• 环境安装(需要安装node,npm)
   npm install -g create-react-app //全局安装官方脚手架
   create-react-app project-name //使用脚手架创建一个为project-name的项目
   这个时候就创建了一个为project-name 的项目 
  • 项目结构
    ├─ node_modules //第三方包文件夹
    ├─ public       //模板和静态资源文件夹
    ├─ src          //核心代码文件夹
    ├─ ├─App.css    
    ├─ ├─App.js
    ├─ ├─App.test.js
    ├─ ├─index.css
    ├─ ├─index.js  //入口文件
    ├─ ├─logo.svg
    ├─ ├─serviceWorker.js
    ├─ ├─setupTests.js
    ├─ .gitignore   //git配置文件
    ├─ package.json //npm包配置
    ├─ README.md  
    └─ yarn.lock  
  • 入口文件 index.js说明
import React from 'react'; //引入react 
import ReactDOM from 'react-dom';//引入react-dom 
import './index.css';//引入css
import App from './App';//引入组件App
import * as serviceWorker from './serviceWorker'; // 这个是为了用来做资源的缓存,这样你下次访问时,就可以更快的获取资源。

ReactDOM.render(  //使用react的jxs语法
<React.StrictMode>
    <App />
</React.StrictMode>,
document.getElementById('root') //将内容挂载在index.html中的id为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();
  • 运行

    在根目录

npm run serve // 运行开发环境
npm run build //打包上线