React开发环境搭建以及常见错误解决

原创已于 2024-09-24 17:45:28 修改 · 574 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2024-09-23 15:19:05 首次发布

react 专栏收录该内容

5 篇文章

订阅专栏

‌React开发环境搭建主要包括Node.js安装、编辑器选择、创建React项目等步骤‌。

Node.js安装‌

从Node.js官网下载并安装最新版本的Node.js，安装过程中npm会自动安装。安装完成后，通过命令行输入node -v和npm -v检查安装是否成功。

carawang%node -v
v20.17.0
carawang%npm -v
10.8.2

‌编辑器选择‌
Visual Studio Code（VS Code）

给编辑器安装插件

#提高开发效率
Reactjs code snippets
npm Intellisense
Simple React Snippets
#格式化
ESLint
Prettier

快速创建项目
```
mkdir my_react_app
cd my_react_app
npx create-react-app my-app
cd my-app
npm start
```
npx create...为创建app，中间耗时有点长。npm start为启动该app。顺利启动后，访问http://localhost:3000就可以看

常见错误

ssl相关的错误如error:0A00010B导致无法create成功，可以尝试更改registry, ssl disable, proxy后，继续尝试。常用的指令有：

npm config info
npm get registry
npm config set registry='registry_name'
npm config set proxy="proxy_name"
npm config set http_proxy="proxy_name"
npx --verbose create-react-app my-app

react-scripts not found的错误，尝试以下代码：

# 查看react-scripts是否已经安装
ls -al node_modules/react-scripts/bin/react-scripts.js
# 如果已经安装在，则尝试直接start，看能否正常启动
node_modules/react-scripts/bin/react-scripts.js start
# 如果正常启动了，则说明react-scripts.js是没问题的，则这里control c终止进程
# 查看node_modules/.bin 是否存在，和node_modules/.bin/react-scripts是否存在
# 如果.bin就不存在，说查看package.json是否设置bin，如果没设置则添加设置

  "bin": {                                                                          
    "react-scripts": "react-scripts.js"                                             
  },  
# 然后删除node_modules和package-lock.json后，重新npm install重新安装

一般只要node_modules/.bin下面有了react-scripts，则理论上讲就不会出现react-scripts not found的错误
如果上述步骤，没有用，则可以直接替换package.json中的react-scripts为node_modules/react-scripts/bin/react-scripts.js，然后尝试npm start。