共計 4825 個字符，預計需要花費 13 分鐘才能閱讀完成。
本篇內容主要講解“react 創建項目啟動報錯如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓丸趣 TV 小編來帶大家學習“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）
2.
./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 創建項目啟動報錯如何解決”有了更深的了解，不妨來實際操作一番吧！這里是丸趣 TV 網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
