React 入门 01 - Hello World
Posted 逆風的薔薇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React 入门 01 - Hello World相关的知识，希望对你有一定的参考价值。
前言
基于项目需求，最近开始不得不接触前端开发的领域啦。吼吼，从此是不是可以自称全栈开发了🤣～
此系列学习笔记依然是以帮助自己学习、消化以及回忆为目的，将会涉及学习React，Type Script 以及目标 React Native 的心路历程。
React
React 官方系列教程是我学习的主要参考资料。React 是一个用于构建用户界面的 javascript 库，起源于Facebook，2013年5月开始开源流行。
ReactJS官网地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react
零安装、在html中使用React
使用React无需复杂安装配置，只需创建相应的html文件并引入React源文件即可。
步骤 1： 添加一个 DOM 容器到 HTML
首先，打开你想要编辑的 HTML 页面。添加一个空的 <div> 标签作为标记你想要用 React 显示内容的位置。例如：
<!-- ... 其它 HTML ... -->
<div id="root"></div>
<!-- ... 其它 HTML ... -->我们给这个 <div> 加上唯一的 id HTML 属性。这将允许我们稍后用 JavaScript 代码找到它，并在其中显示一个 React 组件。
步骤 2：添加 Script 标签
接下来，在 </body> 结束标签之前，向 HTML 页面中添加三个 <script> 标签：
<!-- ... 其它 HTML ... -->
<!-- 加载 React -->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js" -->
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
react.development.js 是 React 的核心库，react-dom.development.js 是提供与 DOM 相关的功能，引入babel进行语法编译。
上述以CDN链接方式引入React的UMD版本，具体介绍参见官方文档。
Hello World 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。
以上是关于React 入门 01 - Hello World的主要内容，如果未能解决你的问题，请参考以下文章
react native 入门 - 环境搭建, 创建第一个Hello World
React Native入门环境搭建与Hello World