上期我们说到React的由来 官网 特点，可以先看一下React学习----01 React基本介绍(上)
本期我们根据目录继续来介绍
1. react的由来 官网 特点
2. react简易环境的搭建
3. jsx的原理
4. jsx一些注意事项

2.React简易环境的搭建

1.如何搭建react简易环境

• 直接在页面内引入(本期重点介绍)
  • react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本。
    • react.js中有React对象，帮助我们创建组件等功能。
    • react-dom.js中有ReactDOM对象，渲染组件的虚拟DOM为真实DOM的爆发功能。
  • 在编写react代码的时候会大量的使用到jsx代码，但是需要编译：
    • 浏览器端编译，通过引入browser、babel等对引入的script内的代码做编译。
    • 利用webpack等开发环境进行编译，将编译好的文件引入到应用中。
• 通过react脚手架进行工程的搭建

直接在页面内引入步骤

• 首先创建一个初始化工程(笔者起名为01)
• 通过 npm init -y 初始化项目，创建一个package.json的文件。
• 通过 npm i react -S(yarn add react) 安装react。
• 根目录下创建js目录，并且找到 node_modules/react/umd/react.development.js(这个是开发环境js文件，生产环境js文件为：react.production.min.js) 这个js文件，复制粘贴出来到根目录下的js目录中。
• 通过npm i react-dom -S(yarn add react-dom) 安装react-dom
  
• 找到 node_modules/react-dom/umd/react-dom.development.js(这个是开发环境js文件，生产环境js文件为：react-dom.production.min.js) 这个js文件，复制粘贴出来到根目录下的js目录中。
  
• 通过npm i babel-standalone -S(yarn add babel-standalone) 安装解析jsx语法编译工具。并找到 node_modules/babel-standalone/babel.js复制粘贴出来到根目录下的js目录中。
  
• 在根目录下创建.html文件(笔者起名为react-hello-01.html),引入相应js文件。(注意：js文件拥有先后顺序)
  

2.第一个react-hello.html

通过以上步骤可以将一个简易的react环境搭建好，接下来就是我们的第一个Hello World。

• 在body中写入一个容器，用来将后续需要的内容写入。
• 在下方书写script标签，type="text/babel"，这样才能让babel去解析script标签内的内容。
• 接着我们使用ReactDOM中的render函数，render函数接收两个参数。
  参数1：渲染什么内容
  参数2：挂载点
  
  
  至此，我们的Hello World就已经呈现在页面上了。