大家好，我是Counterrr，生命不息学习不止。
今天第一天学习React，毕竟只掌握Vue我是不满足的，虽然我最近还在学习node，express，但是我还想学Java，php，python，咳咳咳扯远了。
进入主题（Zzz~）：
- 首先在桌面创建文件夹react-demo，拖到编辑器，VsCode或者WebStorm都可以。我这边使用VsCode。在根目录下创建src文件夹。在根目录下创建index.html文件输入！按Tab快速输出网页模板，在body里创建
<div id="app"> </div>在head标签中引入React，CDN文件如下：
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
（PS：这些在官网都可以找到，那这边为什么会有两个CDN文件呢，学过Vue的都应该知道Vue的话只有一个CDN文件，那么在React中其实第一个是基础React语法比如jsx语法还有一些核心的语法都在这个里面，第二个CDN，react-dom就是把我们的这个react渲染到web页面的一个库，为什么分开呢，之前还合在一起，因为现在react能做很多，不仅仅是web页面，还可以开发App（react-native），现在引入react-dom告诉react现在应用的是dom的平台也就是网页平台。如果你写好的东西要引入app里就要引入react-native。）
再在根目录下创建public文件夹，再在public文件下创建scripts文件夹，再在scripts文件夹下创建app.js，并且在index.html下引入这个app.js。
-
安装本地服务器live-server去运行项目，首先得先安装node，node的安装很简单，直接去官网安装，然后在编辑器下打开终端输入命令
npm install -g live-server全局安装。输入live-server，就会在本地8080端口开启服务。在public文件夹下的scripts文件夹下app.js中打印两个变量console.log(React);console.log(ReactDOM)因为引入了React的CND所有在全局有两个变量。F12或者右键鼠标点击检查调出浏览器控制台，查看打印出来没有报错，说明准备工作完绪。 -
接着熟悉jsx语法，在javascript（public文件夹下的scripts文件夹下app.js）里面去写html代码，
const template = <p>我是一个P标签</p>然后再调用ReactDom的变量ReactDOM.render(template, document.getElementById('app'))
（ps：ReactDOM接收两个参数，first-param：template，second-param：dom）
一刷新发现报错，如图：
为什么，因为jsx不是浏览器认识的语法，所有要将jsx换成JavaScript语法，所以采用babel插件，将jsx语法转化为JavaScript语法（babel插件本质上将jsx语法转为React.createElement( )函数） 例如这段代码
React.createElement('div', {id: 'unique'}, [React.createElement('p', null, '我是一个p标签'),'我是一个div标签'])
会生产代码 如图：
但是这种方式创建太麻烦。直接以这种写法：
const template = <p>我是一个P标签</p>然后再调用ReactDom的变量ReactDOM.render(template, document.getElementById('app'))会简单很多，因为就是jsx语法，所以安装babel插件，新建终端，输入命令，npm init -y快速生产项目说明书，然后在输入命令
npm install @babel/core @babel/cli @babel/preset-env @babel/preset-react --save-dev
然后在package.json里面的scripts里面配置，"babel": "babel", 在根目录文件下创建.babelrc文件写入{ "presets": ["@babel/preset-env", "@babel/preset-react"]}，紧接着我们把public文件下的scripts文件下的app.js里面的
const template = <p>我是一个P标签</p>
ReactDOM.render(template, document.getElementById('app'))这两行代码剪切下来，复制到src文件夹下的app.js中。
然后在终端输入命令npm run babel -- src/app.js -o public/scripts/app.js -w发现public/scripts/app.js文件里就转化成ReactDOM.render(template, document.getElementById('app'))这样格式的代码了，附上一张美美的图如下：
至此就可以用这个项目来跑一些react小demo。
