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

‌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。