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脚手架使用方法的更多相关文章

  1. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  2. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  3. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  4. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  5. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

  9. [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 ...

  10. [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  ...

随机推荐

  1. 2.BIND服务基础及域主服务器配置

    一.BIND 现今使用最晚广泛的DNS服务器软件是BIND(Berkeley Internet Name Domain),最早由伯克利大学的一名学生编写,现在最新的版本是9,由ISC(Internet ...

  2. Python pycharm 引入需要使用的包

    第一步 第二步 第三步

  3. JavaScrip(三)JavaScrip变量高级操作(字符串,数组,日期)

    一:字符串 charAt() 返回指定位置的字符 indexof() 返回指定字符串首次出现的位置 replace() 替换指定的字符 concat() 连接两个或多个字符串 substr(start ...

  4. 解决了好几个软件的构建问题,在解决部署问题,bluemix部署

    https://www.puteulanus.com/archives/838#comment-961新版 Bluemix 一键搭建 SS 脚本 https://blog.feixueacg.com/ ...

  5. linux系统安装mysql详细配置

    参考文章https://baijiahao.baidu.com/s?id=1584072431498789934&wfr=spider&for=pc https://www.5yun. ...

  6. STA/LTA方法

    STA是用于捕捉地震信号的时间窗,因此STA越短,就对短周期的地震信号捕捉越有效:LTA是用于衡量时间窗内的平均噪声,STA/LTA就可以根据周围环境噪声程度自适应地调整其对于某一类型地震信号的敏感度 ...

  7. 关于Java的特点之封装

    抽象 1.简单理解 我们在前面去定义一个类时候,实际上就是把一类事物的共有的属性和行为提取出来,形成一个物理模型(模版).这种研究问题的方法称为抽象. 封装--什么是封装 封装就是把抽象出来的数据和对 ...

  8. synchronized(九)

    在Java中是有常量池缓存的功能的,就是说如果我先声明了一个String str1 = “a”; 再声明一个一样的字符串的时候,取值是从原地址去取的,也就是说是同一个对象.这也就导致了在锁字符串对象的 ...

  9. 移动端设置, mobile , 一张图片作为背景 ,平铺 ,自动拉伸 , 图片 铺满视界 ,窗口. background-image , background-size, background-repeat

    1.  效果: 浏览器: 手机模拟: 2.代码: <!DOCTYPE html> <html lang="en"> <head> <met ...

  10. Spring Boot 揭秘与实战(二) 数据存储篇 - JPA整合

    文章目录 1. 环境依赖 2. 数据源 3. 脚本初始化 4. JPA 整合方案一 通过继承 JpaRepository 接口 4.1. 实体对象 4.2. DAO相关 4.3. Service相关 ...