react学习-2.Hello Word

如果不考虑工程化的问题，React的运行基础环境非常简单，只需要在HTML文件中引入两个js文件（react.min.js和react-dom.min.js）即可开始工作。首先我们访问 https://facebook.github.io/react/,下载这两个文件。

• react.js：实现React核心逻辑，且于与具体的渲染引擎无关，从而可以跨平台公用。如果应用要迁移到React Native，这一部分逻辑是不需要改变的。
• react-dom.js：包含了具体的DOM渲染更新逻辑，以及服务端渲染的逻辑，这部分就是与浏览器相关的部分了。
• babel-core.js:解析JSX语法以及es6语法。后面学习jsx语法需要引入，本章可以不引用，只引用前两个。

由于国内墙太高问题，可以到bootcdn，下载所需资源。

• https://cdn.bootcss.com/react/15.6.1/react.min.js
• https://cdn.bootcss.com/react/15.6.1/react-dom.min.js
• https://cdn.bootcss.com/babel-core/6.1.19/browser.js （引入此文件后，下面的自己的js的script标签需要加 type="text/babel"，这样babel才会识别。即代码在<script type="text/babel"></script>写即可。）

注：react已经更新了很多次，现已无法直接引用js来直接开发。15.6.1（包括15.6.1之前的版本可以）。
不过推荐使用最新版本来开发。

所以我们在练习demo时，首先需要搭建开发环境。

具体怎样使用webpack搭建简易开发环境，首先需要学习webpackhttps://www.jianshu.com/p/97cae0978e52。这里就不介绍了，贴一下配置，直接开始demo。

image

1.Hello word

首页在main.js入口文件中添加一下代码

import React from 'react';
import ReactDOM from 'react-dom';
var element=React.createElement('h1',null,'Hello world')

ReactDOM.render(
    element, document.getElementById('root'));

预览，可以看见它渲染了一个 “Hello, world!” 的标题。

这个是最简单的react demo。

• 引入React包，用来处理JSX
• 引入ReactDOM包，用来渲染组件
• 调用渲染函数render()
• 引用react封装好的React.createElement方法创建html结构
• document.getElementById('root')一个HTML容器

React.createElement(type,attr,child)

React.createElement是React的最基本方法。用于创建并返回一个给定类型的ReactElement元素。type参数可以是一个html标签名称字符串，也可以是一个ReactClasss。这个type参数对于createElement来说是必须的。第二个参数是该标签的属性，这个参数是可选的。第三个参数是该元素的子节点，同样也是可选的。

ReactDOM.render()

ReactDOM.render是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。

下一篇——react学习-3.JSX语法原理