【React】后台开发学前端 02 - 初入江湖，环境搭建

上一章： 【React】后台开发学前端 01 系列预告 - 后台眼中的前端技术

工欲善其事， 必先利其器。先把学习和开发需要的工具搞定。

该文档所描述的一切行为是在Windows系统下进行的

下载安装npm工具

- 到nodejs官网上下载并安装

地址：  Node.js

版本： 它上面提供的哪个版本是用户推荐最多的，你就下哪个版本，学习嘛都一样。

安装完成后使用cmd进入任意path输入npm -v你能够看到版本号就说明安装成功了。

npm -v

（我安装nodejs版本是16.16.0的，npm版本默认是8.11.0）

- 使用nvm版本管理工具安装nodejs

1. 卸载Nodejs

如果你之前在window机器上有安装过Nodejs，需要先删除，

最简单的删除方法就是到控制面板上删除，它会同时删除Node安装目录和环境变量。

费事儿的方法就是手动删除，手动删除Node安装目录

检查下面的内容是否被擅长于完毕

• C:\Program Files\nodejs
• C:\Program Files (x86)\nodejs
• C:\Users\{User}\AppData\Roaming\npm
• C:\Users\{User}\AppData\Roaming\npm-cache

2. 安装nvm-windows

nvm-windows不是nvm的简单移植，这是两个不同的项目，但是提供相同的功能，

可以到如下主页里面下载mvn-setup.zip包，解压后上级运行安装程序。

地址： Releases · coreybutler/nvm-windows · GitHub

3. 验证nvm-windows

进入cmd工具，输入如下命令, 若显示对应版本，则安装正确。

nvm version

4. 使用nvm-windows

1. 查看本地所有已经安装的Nodejs版本

nvm list

2. 查看远程所有可安装的Nodejs版本

nvm list available

3. 安装特定版本的Nodejs

nvm install <version> # 例如 nvm install 16.16.0

4. 使用特定版本的Nodejs

nvm use <version> #例如 nvm use 16.16.0

5.卸载特定版本的Nodejs

nvm uninstall <version> #例如 nvm uninstall 16.16.0

6.开启nvm服务

nvm on

7.关闭nvm服务

nvm off

 8.设置nodejs镜像地址

nvm node_mirror [url]

 9.设置npm镜像地址

nvm npm_mirror [url]

安装IDE

编辑前端代码，我裂墙推荐使用VS Code （Visual Studio Code）

直接到官网下载安装即可，下载下来一键安装

地址： Visual Studio Code - Code Editing. Redefined

创建React工程

我们使用官网提供的脚手架方式可傻瓜式的创建一个react项目模块。

当我们安装好npm之后，我们可以进入cmd命令窗口，在项目folder下执行如下命令

npx create-react-app <项目名> #例如: npx create-react-app my-first-app

(放心，只要你安装npm成功，npx命令一定可以执行)

当执行成功后，你的项目folder下面会多出以项目名为根目录的folder

此时，你只需要把这个folder用鼠标拖拽进入你VS Code的图标上，VS Code就可以根据项目结构打开这个项目

运行react工程

进入VS Code编辑页面，找到右上角的Togger Panel按钮，打开Termial，选择bash

在命令行输入如下命令加载项目所需moduels

npm install

成功后右边的项目菜单栏会多出一个node_modules的文件夹，里面下载的就是所有所需moduel

modules安装成功后，命令行继续输入如下命令

npm start

项目启动，你可以访问 http://localhost:3000来访问你的页面。

小贴士：

其实除了下面命令可以创建一个react项目目录结构。

npx create-react-app <项目名> #例如: npx create-react-app my-first-app

react文档中心（React 官方中文文档）还给我们介绍了其他集中创建react项目的快捷命令

1. Next.js 

Next.js 是一个全栈式的 React 框架。它用途广泛，可以让你创建任意规模的 React 应用——可以是静态博客，也可以是复杂的动态应用。要创建一个新的 Next.js 项目，请在你的终端运行

npx create-next-app <项目名>

如果你是 Next.js 的新手，请查看 Next.js 教程。

2. Remix 

Remix 是一个具有嵌套路由的全栈式 React 框架。它可以把你的应用分成嵌套部分，该嵌套部分可以并行加载数据并响应用户操作进行刷新。要创建一个新的 Remix 项目，请运行：

npx create-remix <项目名>

如果你是 Remix 的新手，请查看 Remix 的 博客教程（短）和 应用教程（长）。

3. Gatsby 

Gatsby 是一个快速的支持 CMS 的网站的 React 框架。其丰富的插件生态系统和 GraphQL 数据层简化了将内容、API 和服务整合到一个网站的过程。要创建一个新的 Gatsby 项目，请运行：

npx create-gatsby <项目名>

如果你是 Gatsby 的新手，请查看 Gatsby 教程。

4. Expo（用于原生应用）

Expo 是一个 React 框架，可以让你创建具有真正原生 UI 的应用，包括 Android、iOS，以及 Web 应用。它为 React Native 提供了 SDK，使原生部分更容易使用。要创建一个新的 Expo 项目，请运行：

npx create-expo-app <项目名>

如果你是 Expo 的新手，请查看 Expo 教程。

下一章: 【React】后台开发学前端 03- 项目结构介绍 - Hello World！