【React | 完整项目创建流程】能看到这么详细的React配置流程，就偷着乐吧!

create-react-app demo

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.js'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);
// import React from 'react'
// import {createRoot} from 'react-dom/client'
// import App from './App'
// const container = document.getElementById('root')
// const root = createRoot(container)
// root.render(<App />)

现在我什么也没写

This page is using the development build of React. 🚧
Note that the development build is not suitable for production.
Make sure to use the production build before deployment.
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.

// 安装React的生产依赖
npm install --production

npm run build
或者
yarn build
// 这将生成一个优化后的生产版本的应用程序，位于项目根目录下的build文件夹中

npm install eslint --save-dev

npm install eslint eslint-plugin-react eslint-plugin-react-hooks --save-dev

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "plugins": [
    "react",
    "react-hooks"
  ],
  "rules": {
    // 在这里可以添加自定义的规则配置
  }
}

"scripts": {
  "lint": "eslint src"
},

// eslintrc.json
{
  "parserOptions": {
    "babelOptions": {
      "configFile": "path/to/babel/config/file"
    }
  }
}

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

Warning: React version not specified in eslint-plugin-react settings.

{
  "plugins": ["react"],
  "settings": {
    "react": {
      "version": "18.2.0" // 我在使用的react库版本，版本可以在 package.json内查看
    }
  }
}

PS C:\Users\ASUS\Desktop\night-community> yarn lint
yarn run v1.22.17
warning ..\..\package.json: No license field
$ eslint src
Done in 2.78s.

"rules": {
  // 在这里可以添加自定义的规则配置
  "no-unused-vars": "off",
  "react-hooks/exhaustive-deps": "off"
}

useEffect(() => {
  getBgImgData();
}, []) // 若为空数组则会警告

import React, { Fragment, Component } from "react";
import Home from '../pages/Home/index.js'
import { BrowserRouter, Route, Routes } from 'react-router-dom';
export default class index extends Component {
  render() {
    return (
      <Fragment>
        {/* 所有的路由配置均在 BrowserRouter 内部 */}
          <BrowserRouter>
          {/* react V6 Switch改为Routers */}
          <Routes>
            <Route path='/' element={<Home />} />
          </Routes>
          </BrowserRouter>
      </Fragment>
    )
  }
}

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();
navigate("/");
navigate('/', { state: { param1: 'value1', param2: 'value2' } }); // 跳转然后传参数

import React from 'react';
import { useParams } from "react-router-dom";
const Component = () => {
    const params = useParams();
  console.log("params:",params);
    return(
      <div>1</div>
    )
}
export default Component;

{/* 重定向 */}
{/* v6不支持重定向：Redirect 改用 Navigate */}
<Route path="*" element={<Navigate to="/login" />} />
{/* 或者跳转到 404 Not Found */}
{/* <Route path="*" element={<NotFound />} /> */}

npm install webpack webpack-cli --save-dev

npm install style-loader css-loader --save-dev

npm install file-loader --save-dev

npm install @babel/core babel-loader @babel/preset-react --save-dev

const path = require('path');
module.exports = {
  mode: 'development', // 指定环境为开发环境
  entry: './src/index.js', // 指定入口文件路径
  output: {
    path: path.resolve(__dirname, 'dist'), // 指定输出文件路径
    filename: 'bundle.js', // 指定输出文件名
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // 匹配 js 或 jsx 文件
        exclude: /node_modules/, // 排除 node_modules 文件夹
        use: {
          loader: 'babel-loader', // 使用 babel-loader 处理匹配到的文件
          options: {
            presets: ['@babel/preset-react'], // 使用 @babel/preset-react 插件转译 React 代码
          },
        },
      },
      {
        test: /\.css$/, // 匹配 css 文件
        use: ['style-loader', 'css-loader'], // 使用 style-loader 和 css-loader 处理匹配到的文件
      },
      {
        test: /\.(jpg|jpeg|png|gif)$/i, // 匹配 jpg、jpeg、png 或 gif 文件
        type: 'asset/resource', // 使用 asset 模块类型处理匹配到的文件，生成资源文件
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'], // 自动解析指定的扩展名文件
  },
};