React 是由 Facebook 发明及维护，当前最流行的框架，生态链完善
使用 script 来引入 有关 React 的 js 文件
主要进入的文件是 react.development.js // react 的文件依赖
react-dom.development.js // react 的 dom 操作依赖
babel.min.js // react 采用了 jsx 的写法，所以要依赖此文件
如果觉得在 React 的官网上不好找 js 文件的话，我们可以通过 https://www.bootcdn.cn/ 来进行查找，并且可以通过网址搜索 js 的内容，将其拷贝走；
案例：
当我们成功的将 React 的 js 文件引入进入后，我们就可以开发 React 的项目了
第一步，一个简单的 demo ，体验简单的 React 的渲染页面
这上面说了 React 中，最基本的将内容渲染到页面的方法
但是我们还是有一些注意事项：
1. script 的类型，不再是 javascript ，而是 text/babel ，因为 jsx 和 js 格式有冲突，所以我们的 js 类型 只能是 text/babel
2. 注意 React 中的 大小写问题，有可能会将字母的大小写问题，导致出现问题
3. 组件名的首字母大写，这并不是我们的默认这么做，而是 React 的硬性要求
4. render 函数，中的 return 只能由一个顶层标签，不能出现多个顶层标签，在一个顶层标签里面可以随意的嵌套
5. js 的注释在 jsx 中没有用，且可能会报错
6. 在 jsx 中 html 该怎么写，怎么写，js 代码写在 {} 中
让我们来看下一个案例（因为 html 的部分，都是一样的，只是 js 的部分不一样，所以，下面所有的案例都会只写 js 的部分）
这个案例，就是将 <App></App> 组件里面的内容，如果渲染到页面上来
注意事项：
我们并不能直接使用 this.props.children 来进行遍历，如果我们使用 this.props.children 来遍历节点，会出一下几个问题
1. 如果 <App></App> 里面没有内容，this.props.chidren 的值是 undefined
2. 如果 <App></App> 里面有一个内容，this.props.chidren 的值是 object
3. 如果 <App></App> 里面有多个内容，this.props.chidren 的值是 array
所以，React 专门提供了遍历 this.props.children 的方法：React.Children()，这样我们便不用担心遍历后会有问题了
下面这个案例 PropTypes 的使用
我们需要下载的插件 prop-types.js ，还是通过 https://www.bootcdn.cn/ 的网址来进行
这个是我们引入的文件内容
head 中写入的内容
js 部分
像 PropTypes 常用于正则验证，或者默认添加的属性
ref 的案例
注意事项：
this.ref 是真实的节点，所以需要等到虚拟 dom 添加到文档中才可以获取
原文：https://www.cnblogs.com/shangjun6/p/11426601.html