目录

[TOC]

环境搭建

1. 安装node

2. npm install -g webpack

3. 配置淘宝镜像

   npm install -g cnpm --registry=https://registry.npm.taobao.org
   npm config set registry https://registry.npm.taobao.org

4. 安装create-react-app

   cnpm install -g create-react-app

5. 创建项目

   create-react-app hello_world

6. 本地服务启动，运行项目

   npm run start

项目框架

|-node_modules //项目包

|-public //一般用于存放静态文件，打包时会被直接复制到输出目录(./buidle)

|-src //项目源代码
| |-asserts //用于存放静态资源，打包时会经过 webpack 处理

| |-components //组件 存放 React 组件，一般是该项目公用的无状态组件
| |-containers //页面视图
| |-routes //路由 存放需要 connect model 的路由组件

| |-App.js //入口文件

| |-index //注册路由与服务

| |- serviceWorker //开发配置

|-package.json //包管理代码

|-.gitignore //Git忽略文件

集成mobx

1. npm run eject 弹出webpack配置

   如果出错请运行如下命令

   git add .
   
   git commit -am "Save before ejecting"

2. 安装依赖：

   npm i --save-dev babel-plugin-transform-decorators-legacy
   npm i --save-dev @babel/plugin-proposal-decorators

3. 安装mobx和mobx-react

   npm install mbox --save
   npm install mobx-react --save

4. 配置package.json

   "babel": {
       "plugins": [
         [
           "@babel/plugin-proposal-decorators",
           {
             "legacy": true
           }
         ]
       ],
       "presets": [
         "react-app"
       ]
     }

項目部署

1. 运行 “npm run build”
2. 将生成的build的文件夹拷贝到服务器tomcat目录下
3. 服务器中进入build文件夹，启动“serve -s”

注：有时候项目目录下有dist文件夹，然后生成不了build文件夹，此文件夹等同于build，将此文件夹拷贝至想同目录下进行相同的后续步骤即可部署