0基础配置React项目开发环境

花落影
441 阅读4分钟

前言

虽然文档是基于Windows Server 2012的服务器配置编写的，但是本地环境也可以基于这个操作步骤进行安装，不是在服务器端进安装相关配置，可跳过连接远程服务器部分。

连接远程服务器

经测验Windows Server 2008 最高支持node版本v13，为了更好的使用最新的react，建议升级服务器的操作系统至2012。

首先咱们需要连接远程服务器，按下Win+R键，打开windows系统的运行窗口，输入命令mstsc，打开远程桌面连接对话框:

image.png

点击【显示选项】:

image.png

在随后的弹窗中键入"用户名"和"密码"，即可连接远程桌面:

image.png

连接成功后，打开远程服务器桌面:

image.png

至此，我们已经成功连接了远程服务器，接下来的操作，我们都在这台服务器上进行。

安装运行环境及常用工具

安装Node.js

Node.js是运行时框架，我们所有的react,vue等项目的编辑环境都基本此框架运行。

访问Node.js官网，点击最新的稳定版本，

image.png

在弹出的新页面中选择msi安装包下载，msi安装包包含了环境变量等配置，安装完成后无需再进行环境变量等配置。

image.png

下载成功后，双击安装包，勾选同意协议：

image.png

一路按指引，点击【next】直到【Finish】，点击【Finish】完成安装。

image.png

验证Node版本

按下Win+R键，打开windows系统的运行窗口，输入cmd打开命令行窗口

image.png

验证一下node的版本，node自带npm,同时查看一下npm 的版本：

node -v
npm -v

image.png

安装git

Git 是一个开源的分布式版本控制系统，用以有效、高速的处理从很小到非常大的项目版本管理，点击下载地址下载安装包。

image.png

下载的速度有点慢，请耐心等候，下载完成后双击打开安装包

image.png

根据指引，点击【next】,完成Git的安装。安装完成后，右击桌面任意一个位置打开鼠标右键菜单,可以看到我们的Git成功安装。

image.png

安装chrome浏览器

搞前端的不用chrome浏览器那还叫前端吗？！下载chrome安装包

image.png

下载完成后，双击打开安装包

image.png

安装Visual Studio Code

目前笔者常用的编辑器是Visual Studio Code，你也可以选择用sublime，webstorm这些，都是可以的。 我们在官网下载VS code安装包 image.png

官网下载的速度贼慢，你也可以试试下面的网址下载安装包，经验证也是可以的。 www.pcsoft.com.cn/soft/195313…

下载完成后，双击打开安装包

image.png

在安装的过程中，勾选【创建桌面快捷方式】

image.png

按照指引完成安装。安装完成后，点击运行，选择你喜欢的编码界面风格

image.png

安装yarn

yarn和npm差不多，只是在安装包和使用时，yarn速度更快，所以笔者一般在开发中使用yarn较多。

在任意文件夹下创建新目录react-web，我们将在该目录下创建React项目，鼠标右击空白处，弹出菜单

image.png

单击Git Bash Here，打开Git操作命令行窗口，在后续的开发中，我们都将在该命令行窗口进行操作

image.png

在该命令行窗口中输入命令

npm install -g yarn

安装yarn后验证下版本

image.png

以上就是React开发需要用到的环境配置及常用工具，接下来我们开始创建一个React项目。

创建React项目

在命令行窗口中键入

npx create-react-app react-demo --template typescript

create-react-app是创建React项目的脚手架，同Vue的Vue-cli一样，他支持在创建React项目时，调用不同的模板，我们此处选择的模板是typescript，整个项目将基本ts编写。

image.png

命令运行完成后，我们可以看到react-web文件夹下有react-demo文件夹，即已完成了React项目简单的初始化。

image.png

我们双击VS code打开编辑器，鼠标左键按住react-demo文件夹，拖拽至VS code的编辑区中，弹出对话框，询问是否信任该作者编写的这个文件夹。

image.png

点击yes选项，并选中信任该作者的所有项目，我们可以看到该项目的目录结构。

image.png

再次回到Git Bash命令行窗口：

cd react-demo
yarn start

启动服务，验证React项目是否安装成功: image.png

项目启动成功，打开chrome输入地址:http://localhost:3000/ 即可正常访问react项目。

image.png

恭喜！您已经成功创建了第一个Ract项目。

安装过程中出现的异常处理

  1. windows server 2008 安装node v16.0.0时弹出 This application is only supported on Windows 8.1,Windows Server 2012 R2,or higher 这是在说，下载的node版本太高, 经测试Windows Server 2008 最高支持node v13,建议升级到Windows Server 2012。
avatar
文章
阅读
粉丝