React創(chuàng)建配置項目的實現(xiàn)
更新時間：2025年06月05日 10:08:46 作者：shifff
本文主要介紹了React創(chuàng)建配置項目的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
tips：所有配置文件均配置在項目的根目錄下
1.初始化一個前端項目
新建一個項目文件夾：npm init -y
創(chuàng)建文件目錄如下
- src/ -index.ts//項目入口文件 - package.json
2.添加TypeScript（可選/默認(rèn)JS）
安裝TS，要先在全局安裝有yarn包管理工具，--dev命令將ts安裝為開發(fā)環(huán)境的依賴，不需要在生產(chǎn)環(huán)境中運行。
進(jìn)行TS配置，在項目根目錄通過tsc --init命令創(chuàng)建tsconfig.json文件
如果報錯：zsh: command not found: tsc。通常是因為 tsc 命令未被正確識別?？赡苁且驗?TypeScript 沒有全局安裝，或者你沒有正確配置路徑來運行 tsc。這里我們不需要全局安裝，所以我們直接配置路徑。
確認(rèn)路徑設(shè)置（針對 zsh 用戶）
（ 可以通過 vi ~/.zshrc打開.zshrc文件，鍵盤敲I鍵進(jìn)入編輯模式）
在 ~/.zshrc 文件中，添加以下行（如果未添加）：
export PATH="$PATH:./node_modules/.bin"
輸入:wq退出并保存文件，然后應(yīng)用更改
source ~/.zshrc
通過tsc --version查看版本，如果出現(xiàn)版本說明路徑設(shè)置成功
配置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, // 對象，數(shù)組加空格
"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 代碼風(fēng)格統(tǒng)一工具
在VSCode 中安裝 EditorConfig 插件
配置.editorconfig文件
# http://editorconfig.org root = true [*] #縮進(jìn)風(fēng)格：空格 indent_style = space #縮進(jìn)大小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樣式規(guī)范校驗工具
VScode中安裝stylelint插件
安裝依賴
yarn add stylelint stylelint-config-standard --dev
配置.stylelintrc.js文件
module.exports = {
extends: "stylelint-config-standard",
rules: {
// your rules
},
// 忽略其他文件，只校驗樣式相關(guān)的文件
ignoreFiles: [
"node_modules/**/*",
"public/**/*",
"dist/**/*",
"**/*.js",
"**/*.jsx",
"**/*.tsx",
"**/*.ts",
],
};
7.添加git hook（git提交前的強(qiáng)制校驗，不滿足條件不讓提交）
- husky 是一個 gitHook 工具，可以配置 git 的一些鉤子，本文主要用來配置 commit 鉤子
- lint-staged 是一個在 git 暫存文件上運行 lint 校驗的工具，配合 husky 配置 commit 鉤子，用于 git commit 前的強(qiáng)制校驗
安裝依賴(下面兩條命令二選一)
yarn add husky lint-staged --dev npm install husky lint-staged --save-dev
8.基本項目結(jié)構(gòu)
index.html內(nèi)容如下
<!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文件，內(nèi)容如下
import { createRoot } from 'react-dom/client';
import React from 'react';
const App = () => {
return (<h1>你好！</h1>);
};
// 這里用非空斷言說明root這個根結(jié)點是一定存在的
const root = createRoot(document.getElementById("root")!);
root.render(<App />);11.添加Babel
需要使用 Babel 將 React 和 TypeScript 代碼轉(zhuǎn)換為 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
開發(fā)環(huán)境文件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;到此這篇關(guān)于React創(chuàng)建配置項目的實現(xiàn)的文章就介紹到這了,更多相關(guān)React創(chuàng)建配置項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React實現(xiàn)歌詞滾動效果(跟隨音樂播放時間滾動)
這篇文章主要為大家詳細(xì)介紹了React實現(xiàn)歌詞滾動效果(跟隨音樂播放使勁按滾動),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2024-02-02
使用React?Redux實現(xiàn)React組件之間的數(shù)據(jù)共享
在復(fù)雜的React應(yīng)用中,組件之間的數(shù)據(jù)共享是必不可少的,為了解決這個問題,可以使用React?Redux來管理應(yīng)用的狀態(tài),并實現(xiàn)組件之間的數(shù)據(jù)共享,在本文中,我們將介紹如何使用React?Redux實現(xiàn)Count和Person組件之間的數(shù)據(jù)共享,需要的朋友可以參考下2024-03-03
本文以簡潔為目標(biāo)，幫助快速上手react-router-dom默認(rèn)你接觸過路由相關(guān)的開發(fā)，通過實例代碼講解的很詳細(xì)，對React路由相關(guān)知識感興趣的朋友一起看看吧2021-05-05
在React中強(qiáng)制重新渲染的4 種方式案例代碼
這篇文章主要介紹了在React中強(qiáng)制重新渲染的4 種方式,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問題
這篇文章主要介紹了react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
React結(jié)合Drag?API實現(xiàn)拖拽示例詳解
這篇文章主要為大家介紹了React結(jié)合Drag?API實現(xiàn)拖拽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
深入理解React19中任務(wù)調(diào)度器Scheduler的實現(xiàn)
本文主要介紹了深入理解React任務(wù)調(diào)度器Scheduler的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
詳解create-react-app 2.0版本如何啟用裝飾器語法
這篇文章主要介紹了詳解create-react-app 2.0版本如何啟用裝飾器語法，cra2.0時代如何啟用裝飾器語法呢? 我們依舊采用的是react-app-rewired, 通過劫持webpack cofig對象, 達(dá)到修改的目的2018-10-10
這篇文章主要介紹了React降級配置及Ant Design配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
React 遞歸手寫流程圖展示樹形數(shù)據(jù)的操作方法
這篇文章主要介紹了React 遞歸手寫流程圖展示樹形數(shù)據(jù)的操作方法,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11