React创建配置项目的实现

更新时间：2025年06月05日 10:08:46 作者：shifff

本文主要介绍了React创建配置项目的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1.初始化一个前端项目
2.添加TypeScript（可选/默认JS）
3.添加ESLint
4.添加Prettier
5.添加 EditorConfig 代码风格统一工具
6.stylelint样式规范校验工具
7.添加git hook（git提交前的强制校验，不满足条件不让提交）
8.基本项目结构
9.安装react
10.添加react根组件
11.添加Babel
12.添加webpack

tips：所有配置文件均配置在项目的根目录下

1.初始化一个前端项目

新建一个项目文件夹：npm init -y

初始化一个packahe.json

创建文件目录如下

- src/
 -index.ts//项目入口文件
- package.json

2.添加TypeScript（可选/默认JS）

安装TS，要先在全局安装有yarn包管理工具，--dev命令将ts安装为开发环境的依赖，不需要在生产环境中运行。

安装ts

进行TS配置，在项目根目录通过tsc --init命令创建tsconfig.json文件

ts初始配置文件

如果报错：zsh: command not found: tsc。通常是因为 tsc 命令未被正确识别。可能是因为 TypeScript 没有全局安装，或者你没有正确配置路径来运行 tsc。这里我们不需要全局安装，所以我们直接配置路径。
确认路径设置（针对 zsh 用户）
（可以通过 vi ~/.zshrc打开.zshrc文件，键盘敲I键进入编辑模式）
在 ~/.zshrc 文件中，添加以下行（如果未添加）：

export PATH="$PATH:./node_modules/.bin"

输入:wq退出并保存文件，然后应用更改

source ~/.zshrc

通过tsc --version查看版本，如果出现版本说明路径设置成功
配置tsconfig.json文件

{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "jsx": "react-jsx",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "noEmit": true
  },
  "include": [
    "src/**/*",
    "typings/**/*",
    "config/**/*",
    ".eslintrc.js",
    ".stylelintrc.js",
    ".prettierrc.js"
  ],
  "exclude": ["node_modules", "build", "dist"]
}

3.添加ESLint

yarn add eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

配置.eslintrc.json文件

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "react-hooks"],
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/prop-types": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off"
  }
}

配置.eslintignore文件

# 忽略目录
.DS_Store
node_modules
dist
build
public

4.添加Prettier

yarn add prettier  --dev

配置.prettierrc文件（不允许注释）

{
    "printWidth": 100, 
    "semi": true, 
    "singleQuote": true, 
    "tabWidth": 2,
    "trailingComma": "all", 
    "bracketSpacing": true, 
    "jsxBracketSameLine": false, 
    "arrowParens": "always", 
    "requirePragma": false, 
    "proseWrap": "preserve" 
}

或者配置 .prettierrc.js文件（允许注释）

module.exports={
  "printWidth": 100, // 换行字符串阈值
  "semi": true, // 句末加分号
  "singleQuote": true, // 用单引号
  "tabWidth": 2,
  "trailingComma": "all", // 最后一个对象元素加逗号
  "bracketSpacing": true, // 对象，数组加空格
  "jsxBracketSameLine": false, // jsx > 是否另起一行
  "arrowParens": "always", // (x) => {} 是否要有小括号
  "requirePragma": false, // 是否要注释来决定是否格式化代码
  "proseWrap": "preserve" // 是否要换行
}

配置.prettierignore文件

*.svg
package.json
.DS_Store
.eslintignore
*.png
*.toml
.editorconfig
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
/build
/public

5.添加 EditorConfig 代码风格统一工具

在VSCode 中安装 EditorConfig 插件
配置.editorconfig文件

# http://editorconfig.org
root = true

[*]
#缩进风格：空格
indent_style = space
#缩进大小2
indent_size = 2
#换行符lf
end_of_line = lf
#字符集utf-8
charset = utf-8
#是否删除行尾的空格
trim_trailing_whitespace = true
#是否在文件的最后插入一个空行
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

6.stylelint样式规范校验工具

VScode中安装stylelint插件
安装依赖

yarn add stylelint stylelint-config-standard --dev

配置.stylelintrc.js文件

module.exports = {
  extends: "stylelint-config-standard",
  rules: {
    // your rules
  },
  // 忽略其他文件，只校验样式相关的文件
  ignoreFiles: [
    "node_modules/**/*",
    "public/**/*",
    "dist/**/*",
    "**/*.js",
    "**/*.jsx",
    "**/*.tsx",
    "**/*.ts",
  ],
};

7.添加git hook（git提交前的强制校验，不满足条件不让提交）

husky 是一个 gitHook 工具，可以配置 git 的一些钩子，本文主要用来配置 commit 钩子
lint-staged 是一个在 git 暂存文件上运行 lint 校验的工具，配合 husky 配置 commit 钩子，用于 git commit 前的强制校验
安装依赖(下面两条命令二选一)

yarn add husky lint-staged --dev
npm install husky lint-staged --save-dev

8.基本项目结构

在这里插入图片描述

index.html内容如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react-app</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

9.安装react

yarn add react react-dom
yarn add   @types/react @types/react-dom --dev

10.添加react根组件

在src下添加index.tsx文件，内容如下

import { createRoot } from 'react-dom/client';
import React from 'react';

const App = () => {
  return (<h1>你好！</h1>);
};
// 这里用非空断言说明root这个根结点是一定存在的
const root = createRoot(document.getElementById("root")!);
root.render(<App />);

11.添加Babel

需要使用 Babel 将 React 和 TypeScript 代码转换为 JavaScript。接下来我们安装一些 Babel 工具

yarn add @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime   --dev

配置 .babelrc文件

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

12.添加webpack

yarn add webpack webpack-cli @types/webpack --dev

yarn add webpack-dev-server @types/webpack-dev-server  --dev

yarn add babel-loader  --dev

yarn add html-webpack-plugin  --dev

开发环境文件config/webpack.dev.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const config = {
  mode: "development",
  entry: {
    main: path.resolve(__dirname, "../src/index.tsx"),
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "../build"),
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
            plugins: [
              [
                "@babel/plugin-transform-runtime",
                {
                  regenerator: true,
                },
              ],
            ],
          },
        },
      },
    ],
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "../src"),
    },
    extensions: [".tsx", ".ts", ".jsx", ".js"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devtool: "inline-source-map",
  devServer: {
    static:{
      directory: '../build',
    },
    historyApiFallback: true,
    port: 4000,
    hot: true,
  },
};

module.exports = config;

到此这篇关于React创建配置项目的实现的文章就介绍到这了,更多相关React创建配置项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react中的watch监视属性-useEffect介绍
这篇文章主要介绍了react中的watch监视属性-useEffect使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
React中条件渲染的常见方法总结
条件渲染在React开发中非常重要的功能,它允许开发人员根据条件控制渲染的内容,在创建动态和交互式用户界面方面发挥着至关重要的作用,本文总结了常用的的条件渲染方法,需要的朋友可以参考下
2024-01-01
详解webpack2+React 实例demo
本篇文章主要介绍了详解webpack2+React 实例demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
React深入浅出分析Hooks源码
在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks（版本：>=16.8），使开发者在非class的情况下使用更多react特性
2022-11-11
React中useEffect与生命周期钩子函数的对应关系说明
这篇文章主要介绍了React中useEffect与生命周期钩子函数的对应关系说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
React 路由传参的几种实现方法
React中传参方式有很多,通过路由传参的方式也是必不可少的一种,本文主要介绍了React路由传参的几种实现方法,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
React实现二级联动效果(楼梯效果)
这篇文章主要为大家详细介绍了React实现二级联动效果，楼梯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
react 下拉框内容回显的实现思路
这篇文章主要介绍了react 下拉框内容回显,实现思路是通过将下拉框选项的value和label一起存储到state中, 初始化表单数据时将faqType对应的label查找出来并设置到Form.Item中,最后修改useEffect,需要的朋友可以参考下
2024-05-05
useState 解决文本框无法输入的问题详解
这篇文章主要为大家介绍了useState 解决文本框无法输入的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
React中如何处理承诺demo
这篇文章主要为大家介绍了React中如何处理承诺demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12