02.React简易环境和基础使用

构建React简易环境

react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本

react.js中有React对象，帮助我们创建组件等功能

react-dom.js中有ReactDOM对象，渲染组件的虚拟dom为真实dom的爆发功能

在编写react代码的时候会大量的使用到jsx代码，但是需要编译：

1. 浏览器端编译，通过引入browser、babel等对引入的script内的代码做编译 – 浏览器
2. 利用webpack等开发环境进行编译，将编译好的文件引入到应用中

简单引入React进行初期的练习

npm init -y  //创建一个package.json配置文件

npm i react react-dom babel-standalone -D  // 安装插件

// 从node_modules/react/umd/xx找到文件babel.js、react-dom.development、react.development.js放入到js目录中方便后续引入

在index.js中引入对应的文件

后续要进行jsx代码的解析，需要引入babel，还得将默认的JS标签的属性变更type="text/babel"
<script type="text/babel"></script>


jsx代码借鉴了xml的语法规则（jsx语法糖）
1. 标签必须闭合，例如<input/>
2. jsx遵循只能有一个根元素的规则

index.html中引入核心包

    <div id="box"></div>
    <!--引入react的核心包-->
    <script src="./js/react.development.js"></script>
    <!--引入开发web的包-->
    <script src="./js/react-dom.development.js"></script>
    <!--引入解析jsx的包-->
    <script