MacOS下用node.js+npm+VSCode搭建React项目

MacOS下用VSCode搭建React项目

React： 一个用于构建用户界面的JavaScript 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
node.js： 一种javascript的运行环境，能够使得javascript脱离浏览器运行!
npm： 随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

搭建步骤

• 1.安装VSCode https://code.visualstudio.com/
• 2.安装node.js与npm包管理工具 http://nodejs.cn/download/

node -v // 查看node.js的版本
npm -v // 查看npm的版本

⚠️ 无报错，显示版本号则安装成功

• 3.利用npm安装React框架

sudo npm install -g create-react-app // 必须用sudo管理员权限

安装报错原因是：没有访问权限，使用sudo管理员权限重试。

成功安装显示如下：

• 4.使用npm命令创建新的React工程，时间比较长

npx create-react-app  myreact  // 创建一个名为 myreact的工程

❌ 错误：npm ERR FETCH_ERROR
原因：对http://registry.npmjs.org/XXX 的请求失败，读取ECONNRESET

⭕️ 解决方法：

• 1.删除package-lock.json
• 2.ping -c4 registry.npmjs.org获得对应的IP地址
  或 根据域名查询IP地址 查询对应的IP地址
• 3.将查询到的IP地址与域名添加到hosts文件中
  详细操作参考MacOS下修改hosts文件的两种方法

参考来源：
1.Mac下 React+node.js+VScode 前端环境的搭建
2.VSCode官方推荐安装手册
3.对http://registry.npmjs.org/XXX 的请求失败。。。