React脚手架的配置

1：建立新的React脚手架

安装yarn：npm install -g yarn （可以不安装）
全局安装：npm i -g create-react-app
切换到想创项目的目录，使用命令：create-react-app 项目名称
进入项目文件夹，目录框中输入cmd, 启动项目：npm start或yarn start（需要已经安装yarn）

2：脚手架中的各个文件是？

ReactNews|--node_modules---第三方依赖模块文件夹|--public|-- index.html-----------------主页面|--favicon.icon ------ 网站页签图标----------------（可删）|--logo192.png ------- logo图 ---------------------（可删）|--logo512.png ------- logo图 ---------------------（可删）|--manifest.json ----- 应用加壳的配置文件-----------（可删）|--robots.txt -------- 爬虫协议文件----------------（可删）|--scripts|-- build.js-------------------build打包引用配置|-- start.js-------------------start运行引用配置|--src------------源码文件夹|--App.css -------- App组件的样式|--App.js --------- App组件|--index.css ------ 样式|--index.js ------- 入口文件|--App.test.js ---- 用于给App做测试----------------（可删）|--logo.svg ------- logo图------------------------（可删）|--reportWebVitals.js-----------------------------（可删）--- 页面性能分析文件(需要web-vitals库的支持)|--setupTests.js（可删）---- 组件单元测试的文件(需要jest-dom库的支持)|--.gitignore------git版本管制忽略的配置（可删）|--package.json----应用包配置文件 |--README.md-------应用描述说明的readme文件

3. index.html准备容器`root`

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><!-- %PUBLIC_URL%代表public文件夹的路径 --><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><!-- 开启理想视口，用于做移动端网页的适配 --><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) --><meta name="theme-color" content="pink" /><meta name="description" content="Web site created using create-react-app" /><!-- 用于指定网页添加到手机主屏幕后的图标 --><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!-- 应用加壳时的配置文件 --><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>React App</title>
</head><body><!-- 若llq不支持js则展示标签中的内容 --><noscript>You need to enable JavaScript to run this app.</noscript><!-- 整个React的容器 --><div id="root"></div>
</body></html>

4. App.js 中创建虚拟DOM

//创建“外壳”组件App
import React, { Component } from 'react'   //引入React核心库//创建并暴露App组件
export default class App extends Component {render() {return (<div>App...</div>)}
}

5. index.js 渲染虚拟DOM

import React from 'react'    		//引入React核心库
import ReactDOM from 'react-dom'    //引入操作DOM 的react 扩展库
import App from './App'  		   //引入App组件//渲染虚拟DOM
ReactDOM.render(<App />, document.getElementById('root'))