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

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


React创建项目基本流程

创建React脚手架

使用 create-react-app name 来生成你的React应用程序

create-react-app demo

此操作必须下载 Node.js

删除不必要的文件(可选)

删除 src 文件夹下的文件,只保留 index.jsApp.js, 并根据删除的内容修改 index.jsApp.js 文件

现在src下的文件

index.js

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 />)

App.js

现在我什么也没写

关于 React 开发版本的警告(^ react && ^ react-dom)

若运行 yarn start 之后 浏览器的 Reactjs 扩展为红色并提示如下错误

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 的开发版本,不适合在生产环境中使用

在部署之前,使用 React 的生产版本

将你的React应用从开发版本切换到生产版本

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

如果使用的是 Create React App,可以通过运行以下命令将应用构建为生产版本

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

这个步骤可能有点问题,若解决不了,请去求助别人

配置 EsLint

使用 npm install eslint --save-dev 下载 eslint 插件

npm install eslint --save-dev

下载 eslint-plugin-react | eslint-plugin-react-hooks 这两个包用于为React项目提供额外的规则和功能

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

创建一个.eslintrc.json文件,它将存储ESLint的配置信息

{
  "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": {
    // 在这里可以添加自定义的规则配置
  }
}

可以在 package.json 中添加一个 lint 脚本,用于检查代码是否符合 EsLint 规范

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

若有报错

Parsing error: No Babel config file detected for C:\Users\ASUS\Desktop\night-community\src\index.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

错误是由Babel配置文件缺失导致的

可以选择禁用Babel配置文件检查

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

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript".

错误是使用了实验性的语法,解析器并没有启用对应的插件来解析该语法

根目录创建 .babelrc 配置文件告诉 Babel 使用 React预设来转译代码

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

告诉EsLint你的React版本(可选)

如果不这么做,EsLint 并不知道你的 React 版本,在运行 lint 检查代码时,会报出一个错误

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

在 eslintrc.json 中指定当前正在使用的 React 版本

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

再次运行 yarn lint,若出现以下提示,表示您的代码是规范的,干净的

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.

可关闭的EsLint校验(可选)

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

no-unused-vars: 表示关闭了对未使用的变量的警告,未使用的变量通常是由于代码重构或错误导致的,但在某些情况下可能是有意为之或临时性的,关闭这个规则可以避免因为未使用变量而产生警告信息

react-hooks/exhaustive-deps: 表示关闭了对 React Hooks 的使用的依赖项不完整的警告,React Hooks 使用了依赖项数组来跟踪数据的变化,以确保正确地触发组件的重新渲染,这个规则会检查依赖项数组是否包含了所有相关的变量,如果不完整则会给出警告,关闭这个规则表示不会检查依赖项数组的完整性

react-hooks/exhaustive-deps 这个校验 hook 的, 例如说 useEffect

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

配置路由

路由配置

npm install react-router-dom

在项目 src 文件夹下创建 router 文件夹, 内置 index.js

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>
    )
  }
}

这里是一些简单的配置,下面我会讲 router 的配置组件问题

一些需要注意的问题

请允许我讲一下一些路由的配置改动以及一些关联到的问题点

React Router v6 中,一些 API 发生了改动, Switch组件被Routes组件取代,用于管理路由配置

Route 组件仍然用于定义路由规则,BrowserRouter 组件用于为应用程序提供浏览器路由功能

element prop在Route组件中用于指定路径匹配时要渲染的React元素

新版本路由跳转和传参(V6)

在React Router v6中,可以使用 useNavigate hook来进行页面跳转并传递参数

导入 useNavigate

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

导入 useParams 接收传递的参数

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 />} /> */}

配置 WebPack

安装 webpack

npm install webpack webpack-cli --save-dev

安装 样式加载器

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

这样,Webpack 将会使用 css-loader 解析 CSS 文件,并使用 style-loader 将其转化为可应用的样式

安装 file-loader

npm install file-loader --save-dev

用于处理图片文件

在处理图片文件时,Webpack 会将它们复制到输出目录并生成一个哈希值文件名

安装 babel 和 相关依赖

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

webpack.config.js

根目录新建 webpack.config.js 文件

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'], // 自动解析指定的扩展名文件
  },
};

完美,嘎嘎踩坑,以后可能会更新一些别的常用到的插件,暂时更新这么多

相关文章
|
2月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
117 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
2月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
172 1
|
4天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
2月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
79 1
react项目配合diff实现文件对比差异功能
|
2月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
54 1
React项目input输入框输入自动失去焦点
|
2月前
|
JavaScript 前端开发 应用服务中间件
本地运行打包好的React、Vue项目
本文讨论了如何本地运行打包好的React和Vue项目,并解决了使用React-Router时Tomcat部署刷新页面导致404的问题,提出了将请求转回index.html的解决方案。
23 1
本地运行打包好的React、Vue项目
|
27天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
71 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
前端开发
react配置proxy代理的两种方式
本文介绍了在React项目中配置代理的两种方式:通过在package.json中添加代理配置,以及通过创建setupProxy.js文件来实现更复杂的代理规则。
79 2
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
3月前
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
323 3
使用vite搭建一个React项目!真香!