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

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。这篇文章主要讲述使用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\' exportdefault class Index extends React.Component {constructor(props, context) { super(props, context); } render() { return ( < div> < h1> index页面< /h1> < /div> ) } }