react 项目创建

首先安装脚手架工具，create-react-app

npm install –g create-react-app

安装完成后，执行

create-react-app 项目路径

执行完成后一个 react 项目就在指定的路径下创建

react目录结构

react项目创建完成后的目录结构如图：

主要看 public 和 src 文件夹中的文件：

public 文件夹是公共文件夹，与src最大的区别就是不会被webpack加工，用于存放一些静态文件。

manifest.json ，用于将web应用添加到设备主屏幕robots.txt，爬虫爬取时应该遵守的规则index.html，整个项目的入口文件其他文件都是图标

src 文件夹是项目存放源文件的文件夹，项目的主要内容都会存放在里面。

App.js, 项目的主组件App.css，App组件的样式App.test.js，测试文件index.css，整个项目的全局样式index.js，JS的入口文件serviceWorker.js，用于使项目可以离线运行

再来详细看看 index.js  

import React from 'react'; //导入react import ReactDOM from 'react-dom'; //导入react-dom import './index.css'; //导入index.css, 由这里引入全局样式 import App from './App'; //导入App组件，即项目的主组件 import * as serviceWorker from './serviceWorker'; //导入serviceWorker.js /*这一行的意思是在 id 为 root 的 dom 节点内渲染 App 组件，这个节点在 public 文件中的 index.html 中。 可以这么理解，我们访问一个 react 项目时，就是访问了 index.html, 项目打包后 index.js 也会被 index.html 引入，index.js 在 root 这个 dom 节点渲染 App 这个 react 组件。 */ ReactDOM.render(<App />, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();