官网相关文档:
1.初始化 react 脚手架
npx create-react-app myreact //myreact为项目名称
2.安装路由组件
npm install react-router-dom --save
注意:组件react-router是路由组件的基础版,react-router-dom相当于是扩展版,已经包含react-router,只需安装一个即可
3.安装react-redux组件
推荐文档:https://segmentfault.com/a/1190000017064759
npm install redux react-redux --save
如果action中需要做异步操作,还需安装一个插件 redux-thunk
npm install redux-thunk --save
然后将以下代码
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducers from './redux/index';
const store = createStore(reducers);
修改为
import { createStore, applyMiddleware } from 'redux';
...
import thunk from "redux-thunk";
const store = createStore(reducers, applyMiddleware(thunk));
最后修改action方法,例如:
export function onRequest(param) {
return (dispatch, getState) => {
const state = getState(); //获取store的旧数据
setTimeout(() => { //模拟异步请求
dispatch({
type: 'MYTEST',
payload: {
addGun: param || 200
}
})
}, 3000);
}
}
4.启动项目
cd myreact 进入项目的根目录, 运行npm start 启动项目
5.npm run eject
如果需要手动变更配置项(如增加less-loader等),则运行此命令,还原配置文件,否则脚手架默认是零配置的
如果出现报错Remove untracked files... 则运行以下2行代码即可
git add .
git commit -am "Save before ejecting"
注意:一般不改动初始代码直接执行npm run eject就不会出现该错误
6.react使用less
npm install less-loader less --save
在webpack.config.js文件中,搜索const sassModuleRegex = ... 在之后添加以下代码
const lessRegex = /\.less$/; //匹配全局的less文件
const lessModuleRegex = /\.module\.less$/; //匹配局部化的less文件
接着找到类似以下的代码段,在之后添加以下代码
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3, //指css-loader之后还需要多少个loader
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: { //模块化
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
模块化 的作用:
即让less 或 scss 或 css样式只作用于局部文件(默认是作用到全局)
模块化 的使用(以less为例):
一个需要模块化的less文件,必须命名为xxx.module.less(scss/css同理),并将其引入对应的 组件文件.jsx 中,然后用className调用
例:import less from 'xxx.module.less';
....
<div className={less['less文件中的类名']}> //最好不用less.className的写法,因为有些className会有中划线'-'
</div>
最后重新运行代码,即可使用less写样式
7.react使用scss/sass
scss其实是sass的升级版,使用npx create-react-app的项目默认安装了sass相关的loader,包括模块化的配置也默认设置好了,但要使用sass,还需安装一个插件 node-sass,命令如下:
npm install node-sass --save
注意:windows环境下安装node-sass一般会失败,提示没有python环境导致的,这个时候可以换阿里的镜像源安装 或 用cnpm安装即可
8.安装antd ui框架(参考官网antd教程,包括定制主题颜色)
npm install antd --save
1) 全局加载
在index.css文件中引入antd的全局样式 @import '~antd/dist/antd.css';
2) 按需加载
2.1)第一种方式(官网推荐,有缺陷)
官网教程:https://ant.design/docs/react/use-with-create-react-app-cn
注意:这种方式由于 修改了package.json文件 的scripts,会导致less的模块化功能失效
2.2)第二种方式(推荐)
安装3个官网指定插件
npm install react-app-rewired customize-cra babel-plugin-import --save
然后在package.json文件中写入以下代码
"babel": {
...
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": true //值为"css"仅启动按需加载,若为true则 启动按需加载 和 定制antd颜色
}
]
]
}
定制antd颜色 配置,打卡webpack.config.js文件,写入以下代码(具体可能要根据实际情况改部分逻辑代码):
{
loader: 'less-loader',
options: {
...
modifyVars: {
// 修改某个antd的全局样式值
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
// 或者用hack独立配置(一般用hack)
'hack': `true; @import "${path.resolve(__dirname, '..')}/antd-cover.less";`, //自定义less文件,用于覆盖antd默认主题色
//path.resolve(__dirname, '..')表示项目根目录
},
javascriptEnabled: true,
}
}
在根目录下创建antd-cover.less文件(该文件名可以任意取),并写入定制代码,如:
@primary-color: #1DA57A; // 全局主色
@link-color: #1DA57A; // 链接色
...
更多定制变量,可参考
https://ant.design/docs/react/customize-theme-cn 或
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
重新运行npm start即可(按需加载、less模块化、定制主题 同时生效)
3) 使用
在组件中直接引入即可 import { Button } from 'antd';
9.建立项目目录
public目录
imgs目录 //存放静态图片
plugins目录 //存放第三方非npm插件
src目录
common目录 //存放工具类方法、小图标等
router目录 //存放路由相关文件
components目录 //存放自定义组件
redux目录 //存放状态管理相关文件
pages目录 //存放页面文件
10.保存时格式化 插件
在vscode里搜
Beautify less(格式化样式,注意:会把js文件也格式化了,且不是我们想要的结果)
JS JSX Snippets(格式化jsx文件)