1. 快速搭建：
- npx
npx create-react-app my-app
cd my-app
npm start
npx 附带npm 5.2及更高版本，请参阅旧版本npm版本的说明。
- npm
npm init react-app my-app
// npm init <initializer>在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组件参数可用冒号标识参数
<Route path='/:location' conponent={Test}></Route> - redirect组件跳转
- <Switch>是唯一的因为它仅仅只会渲染第一个匹配的路径
基于cookie用户验证
-
express依赖cookie-parser，需要npm install cookie-parser --save安装
登录
在项目中使用相对路径 "@"
项目中经常需要引入文件，但是采用绝对路径就很麻烦，而且代码也不简洁，最好就是采用相对路径，在webpack.confijg.js中配置如下：
resolve: {
alias: {
'@': paths.appSrc // 加入这句话即可
}
}
修改项目端口
在start.js文件中 DEFAULT_PORT 为端口变量
