Que faire s'il y a une erreur lors du démarrage du projet React

Solution à l'erreur lors du démarrage du projet React : 1. Entrez dans le dossier du projet, démarrez le projet et affichez le message d'erreur ; 2. Exécutez la commande "npm install" ou "npm install react-scripts" ; npm install @ant-design/pro-field --save".

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

La solution parfaite à l'erreur lors du démarrage d'une création de projet React

1. Connaissances préliminaires :

npm (vous pouvez également utiliser du fil, cet article utilise npm comme exemple)

introduction à npm

• le nom complet est Node Package Manager, est un outil de gestion de packages installé avec NodeJS.
• Permet aux utilisateurs de télécharger des packages tiers écrits par d'autres à partir du serveur NPM pour une utilisation locale.
• Permet aux utilisateurs de télécharger et d'installer des programmes en ligne de commande écrits par d'autres à partir du serveur NPM pour une utilisation locale.
• Permet aux utilisateurs de télécharger leurs propres packages ou programmes de ligne de commande sur le serveur NPM pour que d'autres puissent les utiliser

commande npm

• npm -v pour tester si l'installation a réussinpm -v来测试是否成功安装
• 查看当前目录已安装插件：npm list
• 使用 npm 下载插件：npm install [ -g ] [ --save-dev] <name></name>
• 使用 npm 更新插件：npm update [ -g ] [ --save-dev ] <name></name>

注释：

install可以简写为 i，[]表示可选，表示必选

<name> </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
Afficher le répertoire actuel Plugins installés : liste npm

Utilisez npm pour télécharger les plugins : npm install [ -g ] [ --save-dev] <name></name>

Utiliser npm pour mettre à jour les plugins ：npm update [ -g ] [ --save-dev ] <name></name>

Remarque :

install peut être abrégé en i, [] signifie facultatif,

<name> </name> : Nom du package (bibliothèque de plug-ins)

[ -g ] : Installation globale . Il sera installé dans C : Users Administrator AppData Roaming npm, et écrit dans la variable d'environnement système

 ; l'installation globale peut être appelée de n'importe où via la ligne de commande

installation non globale : sera installée dans le répertoire d'emplacement actuel ; ;, installation locale Il sera installé dans le dossier node_modules du répertoire d'emplacement et appelé sur demande ;

[ --save-dev] :Écrivez les dépendancespackage. json /code> doit être publié dans l'environnement de production, tel que React, Vue Family Bucket, ele-ui et d'autres frameworks d'interface utilisateur. Les plug-ins qui doivent être utilisés lors de l'exécution de ces projets doivent être placés dans. dépendances.

cnpm

Miroir domestique réalisé par l'équipe Taobao, car le serveur de npm est situé à l'étranger, ce qui peut affecter l'installation. La vitesse d'installation du miroir Taobao est généralement plus rapide.

Installation : Exécution de l'invite de commande
npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm -v Pour tester si l'installation a réussi

2. Étapes pour créer un projet :

1. Installation globale : npm install -g create-react-app

2. Après avoir basculé vers le répertoire dans lequel vous souhaitez créer le projet. , créez un nouvel échafaudage (hello-react ) : create-react-app hello-react

🎜3 Entrez le dossier du projet : cd hello-react🎜🎜4. Démarrez le projet : npm start🎜🎜🎜Remarque : 🎜🎜🎜. ①Une fois le projet démarré avec succès, le navigateur affichera la page suivante 🎜🎜🎜🎜🎜② Utilisez vscode pour ouvrir le dossier du projet et vous pourrez voir les fichiers suivants : 🎜🎜🎜🎜🎜③🎜Si vous devez 🎜 exposer la configuration du webpacke (ne faites rien après avoir créé le projet), exécutez directement le code suivant (Cette opération est irréversible !)🎜🎜

npm run eject

🎜🎜Puis entrez y, vous pouvez voir deux autres dossiers :🎜🎜🎜🎜🎜La fonction des fichiers exposés : comme l'introduction de thèmes personnalisés antd+ à la demande🎜🎜④Après avoir installé l'échafaudage, vous pouvez directement importer les packages suivants🎜🎜

//引入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 &#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视频教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn