安装脚手架
cnpm i -g create-react-app
创建项目
npx create-react-app projectName
npx create-react-app my-app --template typescript
取消eslint
npm run eject 暴露出配置
找到webpack.config，搜索eslint，定位到new ESLintPlugin，注释掉
antd库
按需导入
cnpm i antd react-app-rewired customize-cra babel-plugin-import 安装依赖
在根目录新建config-overrides.js，内容为
module.exports = override(
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: "css",
})
)
修改package.json文件中的启动命令scripts
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
全局导入
cnpm i antd --save
在根组件css中引入@import '~antd/dist/antd.css';
在组件中使用
配置scss
cnpm install node-sass -D 安装node-sass
cnpm install sass-loader node-sass --save-dev css作用域所需依赖
找到webpack.config.js下的rules下的oneof数组，新增如下
{
test:/\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
将css命名为name.module.scss
通过import styles from '定义的名称'引入
在组件中通过styles.className使用
配置router
npm install -S react-router 安装路由
cnpm install --save react-router react-router-dom 安装相关依赖
新建pages文件夹，将每一个page当作一个组件在app.js中引入
在src目录下新建routes文件，新建index作为根路由
let routes = [{
path:'',
component:'',
routes:[]
}]
export default routes
找到app.js,引入并遍历生成路由
import {BrowserRouter as Router} from react-router-dom 引入路由组件
import routes from './routes/index'
将Router作为app的顶级父元素
使用map遍历生产router
{
routes.map((v,i)=>{
return <Route path={v.path} component={props=>{
return <v.component {...props} routes={v.routes}></v.component>
}} key={i}></Route>
})
}
配置redux（redux使用）
在src目录下新建store文件夹
在store下新增index.js,创建全局数据容器store，该文件将被组件引用并注入到组件的state
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
在store下新增reducer.js，这是store的操作文件
import {ADD_ONE_ITEM} from './actionTypes'
const defaultState = {
inputVal:"2",
}
export default (state=defaultState,action)=>{
if(action.type==ADD_ONE_ITEM){
const newState = JSON.parse(JSON.stringify(state))
newState.inputVal = action.value
return newState
}
return state
}
在store下新增actionTypes.js，这里统一管理者所有的store指令类型
export const ADD_ONE_ITEM= 'add-one-item'
在store下新增actionCreators.js,这里统一管理所有的指令集action
import {ADD_ONE_ITEM} from './actionTypes'
export const addOneItem = (value)=>({
type:ADD_ONE_ITEM,
value
})
在组件中使用
import {addOneItem} from './store/actionCreators' 引入action指令集
this.state = store.getState() 在constructor中注入store给组件的state
store.subscribe(()=>{this.setState(store.getState())}) 在constructor中订阅store变化
store.dispatch(addOneItem(1)) 通过dispatch更新store
配置axios
import axios from 'axios'
React.Component.prototype.axios = axios
配置rem
下载依赖
npm i lib-flexible --save
npm i sass-loader node-sass --save-dev
npm i postcss-px2rem --save
找到node_modules/react-scripts/config/webpack.config.js，引入postcss-px2rem
顶部新增 const px2rem = require('postcss-px2rem')
找到getStyleLoaders，在plugins数组中新增px2rem({remUnit:75}) 《75是假设设计稿750》
在入口文件index.js中引入
import 'lib-flexible'
网友评论