반응 프로젝트 시작 시 오류 해결 방법: 1. 프로젝트 폴더에 들어가서 프로젝트를 시작한 후 오류 메시지를 확인합니다. 2. "npm install" 또는 "npm install React-scripts" 명령을 실행합니다. npm install @ant-design/pro-field --save" 명령을 실행합니다.
npm (yarn을 사용할 수도 있습니다. 이 글에서는 npm을 예로 사용합니다.)
npm 소개
npm command
npm -v를 사용하여 설치 성공 여부를 테스트할 수 있도록 허용합니다npm -v来测试是否成功安装npm list
npm install [ -g ] [ --save-dev] <name></name>
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 install cnpm -g --registry=https://registry.npm.taobao.org
cnpm -vnpm list
npm install [ -g ] [ --save-dev] <name></name>
npm을 사용하여 플러그인 업데이트 ：npm update [ -g ] [ --save-dev ] <name></name>
install은 i로 축약될 수 있습니다. []는 선택 사항,
<name> </name>: 패키지(플러그인 라이브러리) 이름[ -g ]: 전역 설치 . C: 사용자 관리자 AppData Roaming npm에 설치되고 시스템 환경 변수에 기록됩니다.
전역 설치는 명령줄을 통해 어디서나 호출할 수 있습니다. 비전역 설치: 현재 위치 디렉터리에 설치됩니다. ;, 로컬 설치 위치 디렉터리의 node_modules 폴더 아래에 설치되며 요청에 의해 호출됩니다.
[ --save-dev]:패키지의 <code>종속성 /code>는 반응, vue 제품군 버킷, ele-ui 및 기타 UI 프레임워크와 같은 프로덕션 환경에 게시되어야 합니다. 이러한 프로젝트를 실행할 때 사용해야 하는 플러그인은 다음 위치에 배치되어야 합니다. 의존성.
cnpm
국내 미러링은 타오바오 팀에서 제작했습니다. npm 서버가 해외에 있기 때문에 설치에 영향을 줄 수 있습니다. Taobao 미러 설치 속도는 일반적으로 더 빠릅니다.
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm -v 설치 성공 여부를 테스트하려면
2. 프로젝트 생성 단계:
1. 전역 설치: npm install -g create-react-app
2. , 새 스캐폴딩 생성(hello-react ): create-react-app hello-react
npm run eject
//引入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
npm i prop-types
//对接收的props进行：类型、必要性的限制
import PropTypes from 'prop-types'
npm i nanoid
//生成唯一标识 一般用来充当id或遍历时的index
import {nanoid} from 'nanoid'
id:nanoid()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编码）//开源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 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视频教程》
위 내용은 React 프로젝트 시작 시 오류가 발생하면 어떻게 해야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
