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

Posted 2020-10-16 小_Li_Kelly

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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>
        )
    }
}