搭建自己的 React 项目：从零开始配置 Webpack4、Babel7、ESLint 和 Redux-JavaScript中文网-JavaScript教程资源分享门户

随着 React 技术在前端开发中的广泛应用，越来越多的开发者开始使用 React 来构建自己的项目。但是，要搭建一个完整的 React 项目需要配置很多工具和插件，这对于初学者来说是一件比较困难的事情。

本文将介绍如何从零开始搭建一个 React 项目，并配置 Webpack4、Babel7、ESLint 和 Redux。我们将详细讲解每个工具和插件的作用以及如何进行配置，希望能够对初学者有所帮助。

1. 创建项目

首先，我们需要创建一个空的项目目录，并使用 npm 初始化该项目：

mkdir react-project
cd react-project
npm init -y

2. 安装依赖

接下来，我们需要安装一些依赖，包括 React、ReactDOM、Webpack、Babel、ESLint 和 Redux：

npm install react react-dom webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react redux react-redux --save-dev

其中，我们安装了以下依赖：

react 和 react-dom：React 的核心库和 DOM 操作库；
webpack 和 webpack-cli：打包工具；
babel-loader、@babel/core、@babel/preset-env 和 @babel/preset-react：Babel 的核心库和插件，用于将 ES6+ 和 JSX 语法转换为浏览器可识别的语法；
eslint、eslint-config-airbnb、eslint-plugin-import、eslint-plugin-jsx-a11y 和 eslint-plugin-react：代码检查工具，用于规范代码风格；
redux 和 react-redux：Redux 的核心库和 React 绑定库。

3. 配置 Webpack

接下来，我们需要配置 Webpack。Webpack 是一个模块化打包工具，用于将多个模块打包成一个文件。

首先，在项目根目录下创建一个 webpack.config.js 文件，并添加以下内容：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

在上面的配置中，我们指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。同时，我们使用了 babel-loader 来将 ES6+ 和 JSX 语法转换为浏览器可识别的语法。

4. 配置 Babel

接下来，我们需要配置 Babel。Babel 是一个 JavaScript 编译器，用于将 ES6+ 和 JSX 语法转换为浏览器可识别的语法。

在项目根目录下创建一个 .babelrc 文件，并添加以下内容：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

在上面的配置中，我们指定了使用 @babel/preset-env 和 @babel/preset-react 来转换语法。

5. 配置 ESLint

接下来，我们需要配置 ESLint。ESLint 是一个代码检查工具，用于规范代码风格。

在项目根目录下创建一个 .eslintrc.json 文件，并添加以下内容：

{
  "extends": ["airbnb", "plugin:react/recommended"],
  "plugins": ["import", "jsx-a11y", "react"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  }
}

在上面的配置中，我们指定了使用 airbnb 和 plugin:react/recommended 来规范代码风格。同时，我们还添加了一些自定义规则，如允许在 .js 和 .jsx 文件中使用 JSX 语法，禁止使用未安装的依赖等。

6. 配置 Redux

最后，我们需要配置 Redux。Redux 是一个状态管理工具，用于管理应用的状态。

首先，在 src 目录下创建一个 store 目录，并在该目录下创建一个 index.js 文件，添加以下内容：

import { createStore } from 'redux';

const initialState = {};

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

const store = createStore(rootReducer);

export default store;

在上面的代码中，我们定义了一个空的 initialState 和一个 rootReducer 函数，用于管理应用的状态。同时，我们使用 createStore 函数创建了一个全局的 store 对象，并将其导出。

接下来，在 src 目录下创建一个 index.js 文件，添加以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

在上面的代码中，我们使用 Provider 组件将全局的 store 对象注入到应用中，并渲染了一个 App 组件。

7. 编写示例代码

最后，我们来编写一些示例代码。

在 src 目录下创建一个 App.js 文件，添加以下内容：

import React from 'react';
import { connect } from 'react-redux';

function App(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <button onClick={props.changeName}>Change Name</button>
    </div>
  );
}

function mapStateToProps(state) {
  return {
    name: state.name,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    changeName: () => dispatch({ type: 'CHANGE_NAME', name: 'React' }),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

在上面的代码中，我们定义了一个 App 组件，并使用 connect 函数将其与全局的 store 对象连接起来。同时，我们还定义了一个 mapStateToProps 函数和一个 mapDispatchToProps 函数，用于将 store 中的状态映射到组件的属性中，并将组件的行为映射到 store 的操作中。

最后，在 src 目录下创建一个 index.js 文件，添加以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

在上面的代码中，我们使用 Provider 组件将全局的 store 对象注入到应用中，并渲染了一个 App 组件。

8. 运行项目

最后，我们可以使用以下命令来运行项目：

npx webpack --mode development

该命令将会打包所有的模块，并生成一个 dist/bundle.js 文件。

在浏览器中打开 index.html 文件，即可看到渲染后的页面。

总结

通过本文的介绍，我们学习了如何从零开始搭建一个 React 项目，并配置了 Webpack4、Babel7、ESLint 和 Redux。我们详细讲解了每个工具和插件的作用以及如何进行配置，并编写了一些示例代码。希望本文能够对初学者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c1a790add4f0e0ffba7ee2