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

ゞ浴缸里的玫瑰 2021-09-15 04:14 341阅读 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 条评论，341人围观）

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

相关阅读

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

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

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

相关新建一个springboot项目

新建Module > ![在这里插入图片描述][c18b84dc548843b59873ae39c5fd6de1.png] --------------------

左手的ㄟ右手/ 2024年03月24日 14:42/ 0 赞/ 49 阅读

相关新建一个react新项目

第一步安装脚手架 - npminstall -g create-react-app 开打使用windows键+R打开运行输入cmd ![a35b8c8e64fc444

梦里梦外;/ 2023年10月08日 22:14/ 0 赞/ 13 阅读

相关新建一个vue项目

第一步：npm安装：先从nodejs官网下载nodejs，然后安装。第二步：检查版本 node -v npm -v 虽然node自带npm，

朱雀/ 2023年06月09日 14:30/ 0 赞/ 19 阅读

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

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

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

相关新建一个vue项目

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

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

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

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

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

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

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

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

相关新建一个Angular项目

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

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

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

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

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