胖蔡说技术
随便扯扯

Create React App 之后你该干啥?

本文是一个基础性的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
 

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
 
赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » Create React App 之后你该干啥?
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏