博客

create-react-app常用自定义配置教程示例

  • Post category:http

下面是“create-react-app常用自定义配置教程示例”的详细攻略：

一、前置准备

首先，需要安装create-react-app脚手架，可以在终端执行以下命令进行安装：

npm install -g create-react-app

如果已经安装过，也可以使用以下命令升级到最新版本：

npm update -g create-react-app

二、自定义配置

1. 使用自定义模板和样式

如果我们想要在创建React应用时使用自定义的模板和样式，可以在创建项目时加上--template参数，指定模板名称。例如，假设我们的模板路径为/path/to/template，那么可以执行以下命令创建React应用：

npx create-react-app my-app --template file:/path/to/template

使用这种方法创建应用时，create-react-app会先复制指定的模板文件到新项目中，然后再执行默认的初始化操作。

此外，还可以通过在项目根目录下创建.env文件来指定应用默认使用的样式文件。例如，我们可以在.env文件中添加以下内容：

SASS_PATH=./src/styles

这样，在应用中可以通过import 'main.scss'来直接引用./src/styles/main.scss文件。

2. 添加自定义命令

如果我们需要在开发过程中添加自定义的命令，可以通过在package.json中配置scripts字段来实现。例如：

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "lint": "./node_modules/.bin/eslint src/**/*.js"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  },
  "devDependencies": {
    "eslint": "^5.16.0"
  }
}

在上面的例子中，我们添加了一个名为lint的命令，在执行npm run lint时会自动执行eslint来检查我们的代码。

三、示例说明

下面举两个示例来说明如何使用自定义配置：

1. 使用Antd作为应用UI组件

如果我们想要在React应用中使用Antd作为UI组件框架，可以先安装Antd依赖：

npm install antd --save

然后，在src目录下新建一个index.less文件，写入以下内容：

@import '~antd/dist/antd.less';

/* custom style */

接着，在.env文件中添加如下内容：

SASS_PATH=./src/styles

最后，在src/index.js中引入index.less文件即可：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

这样就可以在应用中直接使用Antd提供的组件了。

2. 使用Redux管理应用状态

如果我们想要在React应用中使用Redux作为状态管理库，可以先安装Redux依赖：

npm install redux react-redux --save

然后，在src目录下新建一个store目录，用来存放Redux相关代码。在store目录中新建一个index.js文件，写入以下内容：

import { createStore } from 'redux';
import rootReducer from './reducers';

export default createStore(rootReducer);

在store目录中再新建一个reducers.js文件，写入以下内容：

const initialState = {};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

export default rootReducer;

我们的Redux Store就搭建好了。接下来，在src目录下新建一个App.js文件，写入以下内容：

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Component from './Component';

function App() {
  return (
    <Provider store={store}>
      <Component />
    </Provider>
  );
}

export default App;

上面的代码中，我们通过Provider组件将Redux Store传递给了应用的根组件Component，这样在子组件中就可以通过connect函数来访问Store中的状态了。

Tags: