react学习-2.Hello Word
2018-05-02 本文已影响39人
YINdevelop
如果不考虑工程化的问题，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节点。
