React プロジェクトの開始時にエラーが発生した場合の対処方法-フロントエンドQ&A-php.cn

反応プロジェクト開始時のエラーの解決策: 1. プロジェクトフォルダーに移動し、プロジェクトを開始してエラーメッセージを表示します; 2. 「npm install」または「npm install reverse-scripts」コマンドを実行します。 3. 「npm install @ant-design/pro-field --save」コマンドを実行します。

React プロジェクトの開始時にエラーが発生した場合の対処方法

#このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react でプロジェクトを作成するときのエラーの完璧な解決策

1. 予備知識:

npm (次の方法も使用できます)糸、この記事は例として npm から始まります)

npm の紹介

ユーザーがローカルで使用するために、他のユーザーが作成したサードパーティパッケージを NPM サーバーからダウンロードできるようにします。
ユーザーは、ローカルで使用するために、他の人が作成したコマンドラインプログラムを NPM サーバーからダウンロードしてインストールできます。
ユーザーが作成したパッケージまたはコマンドラインプログラムを NPM サーバーにアップロードして、他のユーザーが使用できるようにする

#npm コマンド

インストールが成功したかどうかをテストするには現在のディレクトリにインストールされているプラグインを表示します:
npm を使用しますプラグインをダウンロードするには:

npm を使用してプラグインを更新します:

npm update [ -g ] [ --save-dev ]

注:

install は i と省略できます。[] はオプションを意味します。は必須を意味します

: パッケージ (プラグインライブラリ) 名

[ -g ]:

グローバルインストール。これは C:\Users\Administrator\AppData\Roaming\npm, にインストールされ、システム環境変数 に書き込まれます。グローバルインストールはコマンドラインを通じてどこからでも呼び出すことができます;非グローバルインストール: 現在の場所のディレクトリにインストールされます。ローカルインストールは、その場所のディレクトリの node_modules フォルダーにインストールされ、リクエストによって呼び出されます。

[ --save -dev]:

書き込み package.jsonの依存関係を、react、vueファミリーバケット、ele-ui、その他のUIフレームワークなどの実稼働環境に公開する必要があります。これらのプロジェクトの実行時に使用する必要があるプラグインは、 dependency に配置する必要があります。

React プロジェクトの開始時にエラーが発生した場合の対処方法

React プロジェクトの開始時にエラーが発生した場合の対処方法 cnpm

タオバオチームが作った国産ミラー、なぜならnpmのサーバーは海外にあるため、インストールに影響が出る可能性があります。タオバオミラーのインストール速度は一般的に速くなります。

npm install cnpm -g --registry=https://registry.npm.taabao.org
cnpm -v
2. プロジェクトを作成する手順:

1. グローバルインストール: npm install -g create-react-app

2. プロジェクトを作成するディレクトリに切り替えた後、新しいスキャフォールディング (hello-react) を作成します: create-react-app hello-react

3. プロジェクトフォルダーに入ります。 : cd hello-react

4. プロジェクトの開始: npm start

注:

①プロジェクトが正常に開始されると、次のページが表示されます。ブラウザに表示されます

②vscode でプロジェクトフォルダーを開くと、次のファイルが表示されます: React プロジェクトの開始時にエラーが発生した場合の対処方法

③ Webpacke 構成を公開する (プロジェクトの完了後に何もしないを作成する) 必要がある場合は、次のコードを直接実行します: (この操作は元に戻すことができません!)

npm run eject

ログイン後にコピー

次に y を入力すると、さらに 2 つのフォルダーが表示されます。

公開されたファイルの役割: たとえば、オンデマンドでの antd カスタムテーマの導入

④インストール後スキャフォールディングでは、次のパッケージを直接導入できます

//引入react核心组件主库
import React, { Component } from &#39;react&#39;
//引入ReactDOM 子库
import ReactDOM from &#39;react-dom&#39;

ログイン後にコピー

三、启动项目时可能出现的报错：

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 &#39;prop-types&#39;
npm i nanoid
//生成唯一标识 一般用来充当id或遍历时的index
import {nanoid} from &#39;nanoid&#39;
id:nanoid()

ログイン後にコピー

五、GitHub搜索案例相关库：

npm install pubsub-js --save
//消息订阅-发布机制
import PubSub from &#39;pubsub-js&#39;
npm install axios
//轻量级ajax请求库
import axios from &#39;axios&#39;

ログイン後にコピー

六、尚硅谷路由案例相关库：

npm install --save react-router-dom
//路由库，前端路由：value是component，用于展示页面内容；
//      后端路由：value是function, 用来处理客户端提交的请求。
import {BrowserRouter,HashRouter,NavLink,Link,Route} from &#39;react-router-dom&#39;
// V5及之前的版本才有以下三个
import {Switch,Redirect,withRouter} from &#39;react-router-dom&#39; 
// Switch:懒惰匹配  Redirect：重定向  withRouter：让一般组件具备路由组件所特有的API
 
npm i -save-dev query-string
// 对http请求所带的数据进行解析
import qs from &#39;querystring&#39;  import qs from &#39;qs&#39;
// qs.parse() 将字符串解析为对象
// qs.stringify() //将对象解析为字符串（urlencoded编码）

ログイン後にコピー

七、UI库案例相关库：

//开源React UI组件库
npm i antd
// 主库
import { Button,DatePicker } from &#39;antd&#39;;
// 子库 图标等
import {WechatOutlined,WeiboOutlined,SearchOutlined} from &#39;@ant-design/icons&#39;
// 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(&#39;customize-cra&#39;);
					module.exports = override(
						fixBabelImports(&#39;import&#39;, {
							libraryName: &#39;antd&#39;,
							libraryDirectory: &#39;es&#39;,
							style: true,
						}),
						addLessLoader({
							lessOptions:{
								javascriptEnabled: true,
								modifyVars: { &#39;@primary-color&#39;: &#39;green&#39; },
							}
						}),
					);

ログイン後にコピー

八、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 &#39;redux&#39;
import thunk from &#39;redux-thunk&#39;
 
// 2.引入为Count组件服务的reducer
import countReducer from &#39;./count_reducer&#39;
 
// 3. 语法：const store = createStore(reducer)
// store.js文件中一般如下：
export default createStore(countReducer,applyMiddleware(thunk))
 
// 4.store对象的功能
1)store.getState(): 得到state
2)store.dispatch({type:&#39;INCREMENT&#39;, 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 &#39;react-redux&#39;
//定义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 &#39;redux&#39;
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 &#39;redux-devtools-extension&#39;
export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))

ログイン後にコピー

推荐学习：《react视频教程》

以上がReact プロジェクトの開始時にエラーが発生した場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。