webstorm+create-react-app搭建react.js运行环境上篇

最新推荐文章于 2023-09-17 00:54:55 发布

转载最新推荐文章于 2023-09-17 00:54:55 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015706839

文章标签：

#javascript #ViewUI

本文介绍如何使用create-react-app脚手架快速搭建React.js项目环境，包括安装前提、解决下载速度问题的方法、具体安装步骤及项目启动流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React.js 单独使用基本上是不可能的事情。不要指望着类似于 jQuery 下载放到 <head /> 标签就开始使用。使用 React.js 不管在开发阶段生产阶段都需要一堆工具和库辅助，编译阶段你需要借助 Babel；需要 Redux 等第三方的状态管理工具来组织代码；如果你要写单页面应用那么你需要 React-router。这就是所谓的“React.js全家桶”。
但facebook开发开发出了一个打包运行环境插件的脚手架create-react-app 工具。它可以帮助我们一键生成所需要的工程目录，并帮我们做好各种配置和依赖，也帮我们隐藏了这些配置的细节。也就是所谓的“开箱即用”。

1.安装前提条件 node.js和npm环境搭建

在上一篇文章我们讲过node.js和npm环境搭建如果还没装好的同学可以去查看我的上一篇文章
这里我就直接进行create-react-app的安装

2.你可能会遇到下载速度过慢而失败的情况

npm 下载的时候是从国外的源下载的缘故。所以可以把 npm 的源改成国内的 taobao 的源，这样会加速下载过程。在执行上面的命令之前可以先修改一下 npm 的源：

npm config set registry https://registry.npm.taobao.org

3.配置好上面的环境后就可以进行安装了

npm install -g create-react-app

4.安装好以后就可以直接使用它来构建一个 react 的前端工程：

create-react-app app1

5.等插件加载完毕后你会看到下面的界面

图片描述

6.按照最后的的提示你可以做以下的操作，

我们就可以启动工程了，进入工程目录然后通过 npm 启动工程：

cd app1
npm start

图片描述

7.顺利的话会自动弹出如下页面，没有弹出你也可以手动访问

图片描述

webstorm+create-react-app搭建react.js运行环境 上篇

1.安装前提条件 node.js和npm环境搭建

2.你可能会遇到下载速度过慢而失败的情况

3.配置好上面的环境后就可以进行安装了

4.安装好以后就可以直接使用它来构建一个 react 的前端工程：

5.等插件加载完毕后你会看到下面的界面

6.按照最后的的提示你可以做以下的操作，

7.顺利的话会自动弹出如下页面，没有弹出你也可以手动访问

webstorm+create-react-app搭建react.js运行环境上篇