Create-React-App脚手架使用方法
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/ 就能看到我们的项目了
此时看到的项目结构如下
4、可以看到项目中,没有webpack的相关配置,因为create-react-app脚手架已经帮我们封装好了。但如果要对webpack进行设置,可以使用命令 npm run eject把webpack文件暴露出来,这个操作是不可逆的。
此时我们的项目中就会有webpack的相关配置了
---------------------
作者:飞歌Fly
来源:CSDN
原文:https://blog.csdn.net/qq_35430000/article/details/79800461
版权声明:本文为博主原创文章,转载请附上博文链接!
Create-React-App脚手架使用方法的更多相关文章
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
随机推荐
- Java压缩文件
压缩文件 package com.iss.cpf.windmanger.userprivilegeexport.bizlogic; import java.io.BufferedInputStream ...
- 【转】Java迭代:Iterator和Iterable接口
Java迭代 : Iterator和Iterable接口 从英文意思去理解 Iterable :故名思议,实现了这个接口的集合对象支持迭代,是可迭代的.able结尾的表示 能...样,可以做.... ...
- linux系统安装tomcat详细配置
1.通过ssh工具将apache-tomcat-7.0.85.tar.gz拖拽到 /home文件下 2.切换到/home 目录下 3.解压 指令 tar -zvxf apache-tomcat-7.0 ...
- DevExpress v18.1新版亮点——DevExtreme篇(四)
用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExtreme JavaScript Controls v18.1 的新功能 ...
- Linux文件系统命令 split
命令:split 功能:将文件按照一定的规则进行切割 用法:-l 表示按照行数进行切割. -b 表示按照字节进行切割,切割后的文件名为自己定义的文件名+aa,ab,ac类似的后缀. eg: 按照行数进 ...
- mysql 数据库关于my.int 的相关问题
最好在建库的时候直接建好 create database db1 charset utf8; my.int 在mysql的目录里 名曰配置文件 里面主要是内容就是 1 一般用到的就是编码不统一 ...
- 四、使用汇编编写LED裸机驱动
1. 确定硬件连接 打开OK6410底板电路图,找到LED,可以发现NLEDx为0时LED点亮. 找到LED的控制引脚,发现LED控制引脚通过连接器连到了核心板: 打开核心板电路图,找到对应的连接器中 ...
- python模块大全
python模块大全2018年01月25日 13:38:55 mcj1314bb 阅读数:3049 pymatgen multidict yarl regex gvar tifffile jupyte ...
- java学习笔记6(面向对象1:概念,private)
1.思想: 面向过程的思想:遇到问题时想,我该如何做,然后分步骤实现: 面向对象的思想:遇到问题时想,我该派谁去做这件事,至于他怎么做,与我无关,我只要最后的结果. 实际举例:我们要组装一台电脑: 面 ...
- float浮动,定位
1 浮动定位 1.普通流定位 普通流,由称为文档流 块级元素:从上到下一个一个的排列 行内元素:一行内从左到右的排列 2.浮动定位 ...