使用creat-react-app快速新建一个react项目

ゞ浴缸里的玫瑰 2021-09-15 04:14 329阅读 0赞

Facebook 官方推出Create-React-App脚手架，基本可以零配置搭建基于webpack的React开发环境，内置了热更新等功能。

由于create-react-app命令预先安装和配置了webpack和babel，同时也初始化了npm（可以通过npm init来初始化，初始化完会有一个package.json文件，专门来说明你的项目的一些基本信息和可以设置npm自定义命令），所以有几个自定义npm命令：

一、如何安装  
1、首先确保已经安装 node.js,可以到node.js官网 https://nodejs.org/en/ 下载安装包，下载好后傻瓜式一步安装到位。

2、按照如下步骤进行安装，推荐使用gitBush命令行工具

（1）npm install -g create-react-app      全局安装

（2）create-react-app reactproject       新建并对react项目进行命名（注:项目名称不能有大写）

（3）cd reactproject                             通过命令进入文件夹内部，准备运行项目

（4）npm start                                     运行项目

3、通过以上命令就可以快速构建一个react项目，此时在地址栏中输入  http://localhost:3000/ 就能看到我们的项目了

![70][]

此时看到的项目结构如下

![70 1][]

4、可以看到项目中，没有webpack的相关配置，因为create-react-app脚手架已经帮我们封装好了。但如果要对webpack进行设置，可以使用命令 npm run eject把webpack文件暴露出来，这个操作是不可逆的。

![70 2][]

此时我们的项目中就会有webpack的相关配置了

![70 3][]

[70]: /images/20210813/015bd3aedae84db389a8aa83872a106d.png
[70 1]: /images/20210813/711c8347a796461f9e0e143bdc23918d.png
[70 2]: /images/20210813/d92565430c6f462cb12aacbc920d6d7e.png
[70 3]: /images/20210813/4b89f72f962046a385609aa66c2c85da.png

发表评论取消回复

表情：

评论列表（有 0 条评论，329人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用create-react-app脚手架快速搭建一个react项目

reate-react-app是一个react工程脚手架，可快速构建一个react应用。内置webpack、babel、es6等特性，开发者无需关注配置，关注业务模块的开...

￡神魔★判官ぃ/ 2024年04月17日 05:30/ 0 赞/ 70 阅读

相关 react快速建立项目

react快速建立项目有两种方式第一种：在原有的项目添加 1.在webpack.config.js配置处理react语法的插件 2.安装react,reach-dom插

「爱情、让人受尽委屈。」/ 2023年08月17日 16:38/ 0 赞/ 99 阅读

相关 idea新建一个Mybatis项目（使用Maven）

新建一个mybatis项目需要首先配置好maven环境具体的mavne问题在我的其他博客中有提到思路：搭建环境–>导入Mybatis–>编写代码–>测试新建项

墨蓝/ 2023年07月15日 04:54/ 0 赞/ 43 阅读

相关快速初始化一个electron+react桌面应用项目

Step1: 初始化一个react应用参考 [react官方文档][react] 这里要先要安装好create-react-app脚手架安装指令如下：

电玩女神/ 2023年03月01日 14:56/ 0 赞/ 17 阅读

相关 vue如何新建一个项目

vue创建项目（npm安装→初始化项目）第一步npm安装首先：先从nodejs.org中下载nodejs ![在这里插入图片描述][watermark_type_

逃离我推掉我的手/ 2022年12月22日 11:27/ 0 赞/ 247 阅读

相关新建一个vue项目

用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的, 所以首先要安装nodejs。安装完成后，打开cmd。

川长思鸟来/ 2022年06月08日 13:22/ 0 赞/ 267 阅读

相关使用idea新建一个maven项目

前段时间写下了一篇文章： idea 如何新建一个Maven项目并且写第一个servlet 地址如下： [https://mp.csdn.net/postedit/850291

谁践踏了优雅/ 2022年04月03日 09:16/ 0 赞/ 474 阅读

相关快速新建新建Vue项目（详细）

一. 安装node.js 1.传送门：[nodejs.org][] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

柔光的暖阳◎/ 2022年01月11日 03:13/ 0 赞/ 350 阅读

相关新建一个Angular项目

终端运行命令`ng new 项目名称` 创建路由 y 选择css y 这时会以npm的方式装包,Ctrl+c 退安装 `cd 到刚才创建的文件夹` `用cnpm i

清疚/ 2021年11月11日 04:40/ 0 赞/ 411 阅读

相关使用creat-react-app快速新建一个react项目

Facebook 官方推出Create-React-App脚手架，基本可以零配置搭建基于webpack的React开发环境，内置了热更新等功能。由于create-react

ゞ浴缸里的玫瑰/ 2021年09月15日 04:14/ 0 赞/ 330 阅读