React 开发环境搭建 超详细 全面 推荐

        本人新入手一台电脑，需要安装各种环境配置，今天把React开发环境进行配置以及创建一个React项目，这里顺便把过程记录一下，方便自己以后查看，也欢迎正在学习react的小伙伴参考，如果发现问题请评论区留言指正，共同学习共同进步，感谢。

目录

1.查看当前环境

2.编辑器安装插件 

2.1 Reactjs code snippets

2.2 npm Intellisense 

2.3 Path Intellisense

2.4 Prettier - Code formatter

3.新建React项目

4.运行项目

5.打包项目 

---

1.查看当前环境

本次介绍的是React16版本使用需要的运行环境

nodejs  + npm + vscode （我使用的这个 ，根据自己的爱好，其他编辑器亦可）

win+ r 打开命令行工具 输入 node -v 和 npm -v 看一下自己的node是否安装成功，以及对应版本号是否满足。 没有安装的小伙伴可以参考：Node.js 下载安装配置 超详细-优快云博客

// 查看node和npm版本号
node -v  
npm -v 

执行结果如下图所示，node版本是20.15.1 npm的版本是10.7.0

只要nodejs 版本 高于 8.21就行，npm 版本高于6.3.0就行

2.编辑器安装插件 

打开vscode编辑器 vscode下载安装配置一步到位超简单-优快云博客  安装配套插件有利于提高我们开发效率。我们先来安装几个常用的扩展插件。

2.1 Reactjs code snippets

Reactjs code snippets 插件有react的一些代码片段，输入简单的命令就可以快速生成react常用的代码片段 。安装方法找到编辑器左侧（如图）红框位置搜索插件名称， 右侧展示结果页面点击install按钮安装插件即可。

2.2 npm Intellisense 

npm Intellisense插件也是常用的插件，具有自动补全代码的功能。

2.3 Path Intellisense

Path Intellisense 补全文件名 和第一个类似。

2.4 Prettier - Code formatter

Prettier - Code formatter 代码格式化，使代码更清晰更规范，保持良好的习惯。

3.新建React项目

现在我们具体了编辑器以及安装了常用的插件，现在可以新建一个项目了。

新建项目命令：npx create-react-app my-app 

// 新建react项目
npx create-react-app my-app    #my-app是项目名称 可以修改

 

输入命令执行新建项目，并没有按照我们预期的那样创建一个项目，反而报错了。 报错了 没关系 我们顺便看一下错误原因以及解决方案。

首先找到错误日志log文件，在D:\Program Files\nodejs\node_cache\_logs 这个是我的报错日志梭所在的目录，按照提示找到自己的报错日志，日志显示failed, 原因是reason: certificate has expired 证书已过期，知道问题就容易解决，经过我们查找资料，成功解决了这个问题。

certificate has expired请参考：npm提示 certificate has expired 证书已过期 已解决-优快云博客

 问题处理之后，我们重新执行新建项目，发现没有报错，恭喜我们成功新建了一个React项目！!

4.运行项目

按照提示下一步我们打开文件 cd my-app  然后运行项目：npm start

cd my-app #打开项目
npm start #运行项目

 

运行项目成功后提示我们在浏览输入：http://localhost:3000/ 访问我们的项目页面，打开之后就可以看到react的默认初始页面了。

5.打包项目 

​

好了 现在我们已经完成了React的环境配置，并且新建了一个React项目。我们发现控制台提醒我们可以使用 npm run build命令进行项目打包操作 。

这是react内置的一个打包工具，不过考虑到性能优化、代码优化、资源优化、转换与兼容性、依赖管理等方面我们更推荐使用webpack模块化打包项目。

如果发现问题请评论区留言指正，欢迎大家一起交流，共同进步，谢谢。

​相关文章：

React基础知识汇总 | React项目实战案例 | Babel7入门基础知识及实战