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. vue-10-混合

    混合对象可以包含任意组件选项, // 定义一个混合对象 var myMixin = { created: function () { this.hello() }, methods: { hello: ...

  2. java阶段学习目标

    0-1年: <java编程思想> 1-2年: <大话设计模式>http://www.cnblogs.com/zuoxiaolong/p/pattern26.html <重 ...

  3. [Leetcode 881]船救人 Boats to Save People 贪心

    [题目] The i-th person has weight people[i], and each boat can carry a maximum weight of limit. Each b ...

  4. loadrunner json参数化

    因为json格式有{},所以LR参数化时如果也用默认的{}的话,会冲突,这样脚本运行时就无法识别,导致不能正确的读取参数化文件里的内容,此时把参数化的{}改成其他符号即可,比如<>

  5. Docker Kubernetes(K8s)简介

    入职了新公司,使用了Docker和K8s,需要有一个基础的了解,对网络上相关信息进行了简单总结. 一Docker 1简介: Docker 将应用程序与该程序的依赖,打包在一个文件里面.运行这个文件,就 ...

  6. STA/LTA方法

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

  7. js 唤起APP

    常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用 ...

  8. 手机号的 AES/CBC/PKCS7Padding 加解密

    前言:接口中上次的手机号码和密码是传入的加密的,模拟自动化的时候也需要先对数据进行加密 1.各种语言实现 网上已经各种语言实现好的AES加密,可以点击查看:http://outofmemory.cn/ ...

  9. Python异常和异常处理

    Python异常和异常处理2017年12月20日 22:17:08 Megustas_JJC 阅读数:114 标签: python 异常处理 更多 个人分类: Python 版权声明:本文为博主原创文 ...

  10. SpringdataJpa的官方API学习

    (将对Springdata JPA的API  第三章之后进行解释) 一 .  Core concepts(核心概念) 1.springdata中的中心接口是——Repository.这个接口没有什么重 ...