react啟動專案報錯怎麼辦

react啟動專案報錯的解決辦法：1、進入專案資料夾，啟動專案並檢視報錯資訊；2、執行「npm install」或「npm install react-scripts」命令；3、執行「npm install @ant-design/pro-field --save」命令。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react建立專案啟動報錯的完美解決方法

一、預備知識：

npm (也可以用yarn，本文以npm為例)

npm介紹

全稱為Node Package Manager，是隨同NodeJS一起安裝的包管理工具。
允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。
允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。
允許使用者將自己編寫的包或命令列程式上傳到NPM伺服器供別人使用

npm命令

npm -v來測試是否成功安裝
檢視當前目錄已安裝外掛：npm list
使用 npm 下載外掛：npm install [ -g ] [ --save-dev] <name>
使用 npm 更新外掛：npm update [ -g ] [ --save-dev ] <name>

註釋：

install可以簡寫為 i，[]表示可選，<>表示必選

<name> ：包（外掛庫）名

[ -g ]：全域性安裝。將會安裝在C：\ Users \ Administrator \ AppData \ Roaming \ npm，並且寫入系統環境變數；全域性安裝可以通過命令列，在任何地方呼叫；

非全域性安裝：將會安裝在當前定位目錄;，本地安裝將安裝在定位目錄的node_modules 資料夾下，通過要求呼叫;

[ --save-dev]：寫入package.json的dependencies需要釋出到生產環境，比如react， vue全家桶，ele-ui等ui框架，這些專案執行時必須使用的外掛，需要放到 dependencies。

cnpm

淘寶團隊做的國內映象，因為npm的伺服器位於國外可能會影響安裝。淘寶映象安裝速度一般更快。
安裝：命令提示字元執行
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm -v來測試是否成功安裝

二、建立專案步驟：

1.全域性安裝： npm install -g create-react-app

2.切換到想建立專案的目錄後，新建腳手架（hello-react）：create-react-app hello-react

3.進入專案資料夾：cd hello-react

4.啟動專案：npm start

註釋：

①專案正常啟動成功後，瀏覽器會出現以下頁面

②用vscode開啟專案資料夾可以看的有以下檔案：

③如果需要暴露webpacke設定(建立完專案後不要做任何操作)，直接執行以下程式碼：(此操作不可逆！)

npm run eject
登入後複製

然後輸入y ，可以看見多了倆個資料夾：

暴露檔案的作用：比如按需引入antd+自定主題

④安裝好腳手架後，可直接引入以下包

//引入react核心元件主庫
import React, { Component } from 'react'
//引入ReactDOM 子庫
import ReactDOM from 'react-dom'
登入後複製

三、啟動專案時可能出現的報錯：

1. 'react-app-rewired' 不是內部或外部命令，也不是可執行的程式或批次檔。

原因：可能是由於create-react-app出現丟包缺陷，手動安裝包後，需要重新安裝，這樣node_modules/.bin/目錄下才會重新出現react-scripts的檔案，從而解決問題。

解決：npm install 或 npm install react-scripts

（若因為某些原因導致包出故障，就刪除node_modules資料夾，重新npm install ）

./src/App.jsx

Module not found: Can't resolve '@ant-design/icons' in 'C:\Users\...

原因：沒有安裝@ant-design/pro-field

解決：npm install @ant-design/pro-field --save

四、Todolist專案相關庫：

npm i prop-types
//對接收的props進行：型別、必要性的限制
import PropTypes from 'prop-types'
npm i nanoid
//生成唯一標識 一般用來充當id或遍歷時的index
import {nanoid} from 'nanoid'
id:nanoid()
登入後複製

五、GitHub搜尋案例相關庫：

npm install pubsub-js --save
//訊息訂閱-釋出機制
import PubSub from 'pubsub-js'
npm install axios
//輕量級ajax請求庫
import axios from 'axios'
登入後複製

六、尚矽谷路由案例相關庫：

npm install --save react-router-dom
//路由庫，前端路由：value是component，用於展示頁面內容；
//      後端路由：value是function, 用來處理使用者端提交的請求。
import {BrowserRouter,HashRouter,NavLink,Link,Route} from 'react-router-dom'
// V5及之前的版本才有以下三個
import {Switch,Redirect,withRouter} from 'react-router-dom' 
// Switch:懶惰匹配  Redirect：重定向  withRouter：讓一般元件具備路由元件所特有的API
 
npm i -save-dev query-string
// 對http請求所帶的資料進行解析
import qs from 'querystring'  import qs from 'qs'
// qs.parse() 將字串解析為物件
// qs.stringify() //將物件解析為字串（urlencoded編碼）
登入後複製

七、UI庫案例相關庫：

//開源React UI元件庫
npm i antd
// 主庫
import { Button,DatePicker } from 'antd';
// 子庫 圖示等
import {WechatOutlined,WeiboOutlined,SearchOutlined} from '@ant-design/icons'
// const 要寫在 import後面
const { RangePicker } = DatePicker;
//按需引入 自定義主題步驟：
//1.安裝依賴
yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
//2.修改package.json
						"scripts": {
							"start": "react-app-rewired start",
							"build": "react-app-rewired build",
							"test": "react-app-rewired test",
							"eject": "react-scripts eject"
						},
 
//3.根目錄下建立config-overrides.js
					const { override, fixBabelImports,addLessLoader} = require('customize-cra');
					module.exports = override(
						fixBabelImports('import', {
							libraryName: 'antd',
							libraryDirectory: 'es',
							style: true,
						}),
						addLessLoader({
							lessOptions:{
								javascriptEnabled: true,
								modifyVars: { '@primary-color': 'green' },
							}
						}),
					);
登入後複製

八、redux相關庫：

// 一、基本redux  componnet==>一般元件Count  redux檔案==>action、reducer、store.js
npm i redux
 
// redux非同步action
npm i redux-thunk
 
// redux中，最為核心的store物件將state、action、reducer聯絡在一起的物件
// 1.建立store.js文，引入createStore，專門用於建立store物件
//    引入redux-thunk，applyMiddleware，用於支援非同步action
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
 
// 2.引入為Count元件服務的reducer
import countReducer from './count_reducer'
 
// 3. 語法：const store = createStore(reducer)
// store.js檔案中一般如下：
export default createStore(countReducer,applyMiddleware(thunk))
 
// 4.store物件的功能
1)store.getState(): 得到state
2)store.dispatch({type:'INCREMENT', number}): 分發action, 觸發reducer呼叫, 產生新的state
3)store.subscribe(render): 註冊監聽, 當產生了新的state時, 自動呼叫
登入後複製

// 二、react-redux  容器元件[UI(同名)元件] ： UI元件==>一般元件  containers元件==>外殼
npm i react-redux

//容器元件中，引入connect用於連線UI元件與redux
// Provider讓多個元件都可以得到store中state資料
import {connect,Provider} from 'react-redux'
//定義UI元件
class CountUI extends Component{...}
// 使用connect()()建立並暴露一個Count的容器元件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
<Count store={store} />
// 給容器元件傳遞store 連線外部的redux; connect()()用於連線內部的內部的UI元件
 
// 資料共用
 
// store.js彙總所有的reducer變為一個總的reducer
import {combineReducers} from 'redux'
const allReducer = combineReducers({
	he:countReducer,
	rens:personReducer
})
// containers元件中：
connect(
	state => ({key:value}), //對映狀態 mapStateToProps
           {key:xxxAction} //對映操作狀態的方法 mapDispatchToProps
        )(UI元件)
 
 
// redux開發者工具 chrome網上商店中搜尋安裝 Redux Devtools 工具
npm i redux-devtools-extension
 
import {composeWithDevTools} from 'redux-devtools-extension'
export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))
登入後複製

推薦學習：《》

以上就是react啟動專案報錯怎麼辦的詳細內容，更多請關注TW511.COM其它相關文章！