01初识React

1. 在html文件中先使用CDN连接引入React：

<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>

2. 安装Live Server并使用它在public目录下开启一个服务器：

npm install -g live-server
live-server public/

Live Server有热刷新功能。

3. 了解JSX语法: 在js文件中写html代码

// Reat和ReactDOM是对象，里面有很多方法
console.log(React);
console.log(ReactDOM);

// 定义在外面的变量
let user = "方华永";

// javascript XML
const template = (<div>
        <p>name:{user}</p>
        <h3>我是h3标签</h3>
    </div>)

// 获取html文件中的节点，使用ReactDOM中的render方法插入
const root = document.getElementById("app");
ReactDOM.render(template, root)

4. 使用Babel:因为在js中是不能直接运行React.js的，所有我们需要使用Babel工具转换一下
   @babel/core: babel的核心语法
   @babel/cli: babel的命令工具
   @babel/prset-env: es6、es7转es5
   @babel/prset-react: React.js转es5
   先使用npm init生成一个项目说明书，然后安装工具在开发模式下

npm install @babel/core @babel/cli @babel/prset-env @babel/prset-react --dev-save

修改pageck.json文件，自动在node_modul/bin/目录下找babel工具

{
  "name": "usereact",
  "version": "1.0.0",
  "description": "this is a react",
  "main": "index.js",
  "scripts": {
    "babel": "babel"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "@babel/preset-react": "^7.7.4"
  },
  "dependencies": {}
}

在根目录下创建.babelrc文件，使用转换工具：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

编译: – 指定源文件和 -o 目标文件 加-w可以监听，不需要每次都使用这个命令

npm run babel -- src/app.js -o public/scripts/app.js