本文是一个基础性的React使用介绍,一般性的我们看到的都是如何创建项目,然后给出一大串流程,而这篇写的恰恰就是创建工程后我们应该做些什么。希望大家能够喜欢。
本文由@xuxo提供.
构建
环境准备
Create React App 是一个用于学习 React 的舒适环境,也是用 React 创建新的单页应用的最佳方式。
它会配置你的开发环境,以便使你能够使用最新的 JavaScript 特性,提供良好的开发体验,并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目,请执行:
yarn create-react-app my-app
cd my-app
yarn start
至此,一个单页面react应用构建完成。
必要依赖
ant design
yarn add antd
修改默认配置
yarn add @craco/craco
安装 craco 并修改 package.json 里的 scripts 属性
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
然后在项目根目录创建一个 craco.config.js 用于修改默认配置
/* craco.config.js */
module.exports = {
// ...
};
自定义主题
按照 配置主题 的要求,自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能。我们可以引入 craco-less 来帮助加载 less 样式和修改变量。
首先把 src/App.css 文件修改为 src/App.less,然后修改样式引用为 less 文件。
/* src/App.js */
- import './App.css';
+ import './App.less';
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
然后安装 craco-less 并修改 craco.config.js 文件如下。
yarn add craco-less
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
修改后重启 yarn start
路由
yarn add react-router-dom