React + node.js + VScode 搭建前端开发环境

一、工具介绍

• React：一个用于构建用户界面的JavaScript 库；
• 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）；
• node.js： 一种javascript的运行环境，能够使得javascript脱离浏览器运行；
• npm：随同node.js一起安装的包管理工具；
  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用；
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用；
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用；
• create-react-app：是用于搭建react项目的脚手架；
• 它的优势在于省略了很多涉及配置的地方，让新手能够更加容易上手，减低入门的门槛；

二、环境搭建步骤

• 1.下载安装 vscode
  • 下载地址：https://code.visualstudio.com/
• 2.下载安装 node.js
  • 下载地址：http://nodejs.cn/download/ 
  • 输入cmd，打开终端，验证node与npm是否安装成功
  • 
• 3.创建本地文件夹，用于存放项目
• 4.进入创建好的文件夹，并输入cmd打开终端
• 5.通过 npm 安装 create-react-app 

  • npm install -g create-react-app 

• 
• 6.通过脚手架创建一个React项目
  • npx create-react-app  reactdemo   （终端执行此过程较慢，请耐心等待）
• 

• 
• 7.进入创建好React项目
  • cd reactdemo
• 8.启动项目
  • npm run start
• 
• 9.测试
  • 输入 http://localhost:3000，即可查看到 React 页面 

参考文章链接：Mac下 React+node.js+VScode 前端环境的搭建 - ~gcc~ - 博客园

用vscode打开建好的react项目

按 Ctrl + `  打开终端

在vscode终端中，启动项目