从零开始搭建react项目

1. 快速搭建：

npx create-react-app my-app
cd my-app
npm start

npx 附带npm 5.2及更高版本，请参阅旧版本npm版本的说明。

npm init react-app my-app
// npm init 在npm 6+中可用
cd my-app
npm start

Yarn

yarn create react-app my-app
// yarn create在Yarn 0.25+的版本可使用
cd my-app
yarn start

此时项目已运行起来，当您需要部署线上时，运行npm run build或yarn build

运行 npm run eject或yarn eject命令，将所有的配置文件暴露出来

2. 安装antd

antd官网有详细介绍

npm install antd --save
或
yarn add antd

安装之后，一般项目都是使用按需引入加载，并在config的文件对其进行配置才可以使用

使用babel-plugin-import（推荐）。

npm install babel-plugin-import --save-dev
或
yarn add babel-plugin-import --dev

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';

修改/config/webpack.config.js文件中module:{ }找到加载babel-loader，往他的 plugins 加入如下代码
最后配置文件如下：

module: {
      strictExportPresence: true,
      rules: [
          {
          oneOf: [
              {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),
                
                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                        },
                      },
                    },
                  ],
                  ["import", {
                    "libraryName": "antd",
                    "libraryDirectory": "es",
                    "style": "css" // `style: true` 会加载 less 文件
                  }]
                ],
              },
            },
            ]
          }
      ],
}

按需加载，无需单独引入样式，babel-plugin-import 会帮助你加载 JS 和 CSS

还可以在package.json文件中进行配置antd：

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import", { "libraryName": "antd-mobile", "style": "css" }], 
      "transform-decorators-legacy"    // redux 装饰器
    ]
  }

安装mongodb

首先安装homebrew：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew update
brew install mongodb   // brew安装
sudo mkdir -p /data/db
mongod  // 运行
mongod和mongo   // mongod和mongo需要运行在不同的两个窗口

mongod和mongo两个命令需运行在两个窗口运行，否则会报错如下：

MongoDB shell version v4.0.3
connecting to: mongodb://127.0.0.1:27017
2019-03-26T16:35:29.439+0800 E QUERY    [js] Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed: SocketException: Error connecting to 127.0.0.1:27017 :: caused by :: Connection refused :
connect@src/mongo/shell/mongo.js:257:13
@(connect):1:6
exception: connect failed

安装nodemon

监听路由和相应内容，使用nodemon自动重启 npm install -g nodemon

安装react-router

npm install react-router-dom --save
router4使用react-router-dom作为浏览器端的路由
BrowserRouter,包裹整个应用
url参数，route组件参数可用冒号标识参数
redirect组件跳转
是唯一的因为它仅仅只会渲染第一个匹配的路径

基于cookie用户验证

express依赖cookie-parser，需要npm install cookie-parser --save安装

登录

在项目中使用相对路径 "@"

项目中经常需要引入文件，但是采用绝对路径就很麻烦，而且代码也不简洁，最好就是采用相对路径，在webpack.confijg.js中配置如下：

resolve: { 
  alias: {
        '@': paths.appSrc  // 加入这句话即可
  }
}

修改项目端口

在start.js文件中 DEFAULT_PORT 为端口变量