What to do if there is an error when starting the react project

Solution to the error when starting the react project: 1. Enter the project folder, start the project and view the error message; 2. Execute the "npm install" or "npm install react-scripts" command; 3. Execute "npm install @ant-design/pro-field --save" command.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

The perfect solution to the error when creating a project in react

1. Preliminary knowledge:

npm (you can also use yarn, this article starts with npm as an example)

npm introduction

• stands for Node Package Manager, which is a package management tool installed along with NodeJS.
• Allow users to download third-party packages written by others from the NPM server for local use.
• Allows users to download and install command line programs written by others from the NPM server for local use.
• Allow users to upload packages or command line programs they write to the NPM server for others to use

npm command

• npm -vTo test whether the installation is successful
• View the installed plug-ins in the current directory:npm list
• Use npm to download the plug-in:npm install [ -g ] [ --save-dev] <name></name>
• Use npm to update the plug-in: npm update [ -g ] [ --save-dev ] <name> </name>

Note:

install can be abbreviated as i, [] means optional, means required

<name> </name>: Package (plug-in library) name

[ -g ]: Global installation. It will be installed in C:\Users\Administrator\AppData\Roaming\npm,and written to the system environment variable; global installation can be called from anywhere through the command line;

non-global Installation: It will be installed in the current location directory;, the local installation will be installed in the node_modules folder of the location directory, and is called by request;

[ --save-dev]: Write The dependencies of package.json need to be published to the production environment, such as react, vue family bucket, ele-ui and other UI frameworks. The plug-ins that must be used when these projects are running need to be placed in dependencies.

##cnpm

Domestic mirror made by Taobao team, Because npm's server is located abroad, the installation may be affected. Taobao mirror installation speed is generally faster.
• Installation: Command prompt execution
• 
  npm install cnpm -g --registry=https://registry.npm.taobao.org
• cnpm -v to test whether the installation is successful

2. Steps to create a project:

1. Global installation: npm install -g create-react-app

2. After switching to the directory where you want to create the project, create a new scaffolding (hello-react): create-react-app hello-react

3. Enter the project folder: cd hello-react

4. Start the project: npm start

Notes:

①After the project is successfully started normally, the following page will appear in the browser

②Open the project folder with vscode and you can see the following files:

③

If you need Expose webpacke configuration (create Do not do anything after completing the project), directly execute the following code: (This operation is irreversible!)

npm run eject

Then enter y, you can see two more folders:

The role of exposed files: for example, introducing antd custom themes on demand

④After installing the scaffolding, you can directly introduce the following packages

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

The above is the detailed content of What to do if there is an error when starting the react project. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7711

15

Java Tutorial

1640

14

CakePHP Tutorial

1394

52

Laravel Tutorial

1288

25

PHP Tutorial

1232

29

Show More