react学习路线-创建项目

最新推荐文章于 2024-10-16 09:23:03 发布

原创最新推荐文章于 2024-10-16 09:23:03 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用Create React App快速搭建React应用，并通过引入React App Rewired、Ant Design等工具进行项目配置优化，实现按需加载、LESS样式支持及主题定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


npm install -g create-react-app

create-react-app my-app

cd my-app

npm start



插件集合-------------------
1.react-router-dom路由

2.axios

3.js-cookie

4.redux、react-redux状态管理

npm run eject 弹出配置文件--不可逆操作--用于修改默认的配置

引入 react-app-rewired 并修改 package.json 里的启动配置:

npm install react-app-rewired --save-dev

/* package.json */

"scripts": {

        -"start":"react-scripts start",

        +"start":"react-app-rewired start",

        -"build":"react-scripts build",

        +"build":"react-app-rewired build",

        -"test":"react-scripts test --env=jsdom",

        +"test":"react-app-rewired test --env=jsdom",

}

3.然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports =function override(config, env){

        return config;

};

安装 babel-plugin-import

 babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

npm install babel-plugin-import --save-dev

+ const { injectBabelPlugin } =require('react-app-rewired');

module.exports =function override(config, env){

        +config= injectBabelPlugin(['import', { libraryName:'antd-mobile', style:'css'}],config);

        return config;

  };

5.组件内引用

-import Button from 'antd-mobile/lib/button';

+import { Button } from 'antd-mobile';

六、less 配置
1.安装所需less依赖

npm install less-loader less --save-dev

2.安装react-app-rewire-less

npm install --save-dev react-app-rewire-less

3.根目录下找到刚才的config-overrides.js 继续修改配置

/* config-overrides.js */

const { injectBabelPlugin } = require('react-app-rewired');

+ const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {

        config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);

        + config = rewireLess.withLoaderOptions({modifyVars: { "@primary-color": "#1DA57A" }})(config, env);

        return config;

};