使用Facebook的create-react-app脚手架快速构建React开发环境（ant.design，redux......）

 

编程领域中的“脚手架（Scaffolding）”指的是可以快速搭建项目“骨架”的一类工具。例如大多数的React项目都有src，public，webpack配置文件等等，而src目录中又包含components目录等等。每次在新建项目时，手动建立这些固定的文件目录。脚手架的做用就是帮助你完成这些重复性的工做，包括一键生成主要的目录结构、安装依赖等等。

create-react-app是来自于Facebook出品的零配置命令行工具脚手架，可以帮你自动建立基于Webpack+ES6的最简易的React项目模板

1：首先在webstorm中新建一个项目

2：假若不是最新版本的npm   ,   安装最新版本npm     

npm install npm@latest

3: 安装项目中经常使用的相关的配置

yarn add react-redux redux redux-thunk react-router-dom thunk antd-mobile@next babel-plugin-transform-decorators-legacy browser-cookies babel-plugin-import utility body-parser cookie-parser --save

react-redux把状态映射到子组件 分发reducer

redux  建立reducer action store等   

react-thunk  thunk处理发送请求异步。

react-router-dom   用来建立路由

antd-mobile@next  最新版的antd-mobile 模板  手机端用的      假设要是作响应式安装 react-responsive   ant-design@next 是pc端  ant-pro@next 是ipad端

babel-plugin-transform-decorators-legacy   语法转换 用@后面加上函数名字 也能够用来转换view层中的class属性

browser-cookies 客户端获取，设置cookie 

babel-plugin-import 按需加载

utility 登陆注册的时候进行md5加密用的。设置uuid等等 

body-parser 读取前端发送的数据  cookie-parser用于服务端设置cookie    (项目若是是纯前端 不搞后台这两个能够不用安装)

安装：prop-types （验证props的属性的类型）        

yarn add prop-types -d

(yarn 下  --save-dev 能够为-d     --save能够为-s)

安装 react-helmet 支持单页面应用对seo的友好性

安装方法用法地址：yarn add react-helmet 或者npm install --save react-helmet

https://www.npmjs.com/package/react-helmet 

4：安装完成以后。弹出配置项

npm run eject 弹出配置文件，能够自定义配置 webpack

 

完成以后能够在package.json中查看相关的配置

5：package.json中配置babel的babel-plugin-transform-decorators-legacy和babel-plugin-import插件

 方法：修改package.json中的babel和presets同级别

添加：

"plugins": [

      [

        "import",

        {

          "libraryName": "antd-mobile",

          "style": "css"

        }

      ],

      "transform-decorators-legacy"

    ]

6：设置后台端口反向代理.处理跨域请求

"proxy":"tapi.12yuwen.com"

若是多个能够设置成数组      "proxy":["tapi.12yuwen.com","tapia.12yuwena.com"]

 7：基本配置完成，启动项目：yarn start(优先)或者 npm start

8：建立项目目录

Actions redux中建立action

Components 建立木偶组件（纯展现不涉及数据交互）

Config里是一些基本配置。接口名字等等

Constants 里是一些常量

Containers 智能组件 处理数据层和业务层。传递属性到视图层等等

Fetch是发送请求

Reducer redux中各个子reducer合并起来

Router 建立路由

Store 存放redux中相应的状态

Uil（能够不要。处理公共数据用的）

9：Index.Js 启动首屏  app.js

10：Componets中建相应的路由页面 以下图。

每一个页面中基本：语法

import React from 'react' export default class Index extends React.Component { constructor(props, context) { super(props, context); } render() { return ( <div>
                <h1>index页面</h1>
            </div> ) } }

11：想要在项目中使用antd-mobile 先在index.js中引入css

import 'antd-mobile/dist/antd-mobile.min.css'

在根据https://mobile.ant.design/components/tabs-cn/中按需加载想要的组件

以下图：

 

12：配置路由地址

App.js和Componets中的index都是指的是首页  

想要去掉只留下一个index

配置路由能够经过ant-design中改写  例如：点击跳转页面

若是打印出来是undefined的话。就要以下图：就要引入withRouter          

注意：@withRouter

重复点击路由问题：

页面属性中引入的时候应该也有：

好比：