使用Facebook的create-react-app快速构建React开发环境

前言:

create-react-app:来自Facebook官方的零配置命令行工具

create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板,有助于初学者快速上手实践。安装create-react-app的方式也非常简单,可以直接使用npm命令进行全局安装。

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

执行完上述命令之后,你可以直接打开http://localhost:3000,即可以看到你React APP的运行效果。此时也是处于开发模式下,如果你要进行发布,则使用npm run build进行编译。  

create-react-app生成的目录格式如下所示:

my-app/
README.md
index.html
favicon.ico
node_modules/
package.json
src/
App.css
App.js
index.css
index.js
logo.svg

如果你是使用npm start来启动配置,那么自动会进入开发模式,此时热替换是处于自动激活状态,你也可以实时地在界面或者命令行中看到错误提示:

如果你使用npm run build来编译得到生产环境,此时代码会被编译到build目录下,此时会自动将整个应用打包发布,它会自动使用Webpack控件进行优化与压缩。  

React学习笔记_01的更多相关文章

  1. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  2. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  3. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  4. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  5. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  6. React学习笔记(五)State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  7. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  8. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  9. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

随机推荐

  1. 自己动手实现java数据结构(五)哈希表

    1.哈希表介绍 前面我们已经介绍了许多类型的数据结构.在想要查询容器内特定元素时,有序向量使得我们能使用二分查找法进行精确的查询((O(logN)对数复杂度,很高效). 可人类总是不知满足,依然在寻求 ...

  2. lua脚本在游戏中的应用

    为什么要在游戏中使用脚本语言? 要解释这个问题首先我们先来了解一下脚本语言的特性: 学习门槛低,快速上手 开发成本低,可维护性强 动态语言,灵活性高 相对于C/C++这类高复杂性.高风险的编译型语言来 ...

  3. Java设计模式学习记录-装饰模式

    前言 装饰模式也是一种结构型模式,主要是目的是相对于类与类之间的继承关系来说,使用装饰模式可以降低耦合度.JDK中有不少地方都使用到了装饰模式,例如Java的各种I/O流,javax.swing包中一 ...

  4. 序列化(pickle,shelve,json,configparser)

    一,序列化 在我们存储数据或者网络传输数据的时候,需要对我们的对象进行处理,把对象处理成方便存储和传输的数据结构,这个过程叫序列化,不同的序列化,结果也不同,但是目的是一样的,都是为了存储和传输. 在 ...

  5. 如何查看oracle用户具有的权限和角色

    .查看所有用户: select * from dba_users; select * from all_users; select * from user_users; .查看用户或角色系统权限(直接 ...

  6. FireFox升级后FireBug不能使用

    今天发现,火狐浏览器从49.0.2升级到50.0.2之后,firebug的js调试被禁用了,果断去找49.0.2的版本. 链接: https://ftp.mozilla.org/pub/firefox ...

  7. Shaping Regions(dfs)

    Shaping Regions Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 124  Solved: 39[Submit][Status][Web B ...

  8. python字典按照value进行排序

    先说几个解决的方法,具体的有时间再细说 d = {'a':1,'b':4,'c':2} 字典是这个,然后要对字典按照value进行排序 方法一: sorted(d.items(),key = lamb ...

  9. spring boot (1):初尝

    工具:intellij idea 自定义banner: 控制台console显示的banner 自定义方式,在src/main/resources 下创建banner.txt增加文本即可,生成字符网站 ...

  10. PATH、CLASSPATH、CLASSPATH

    PATH: 说明: 环境变量中的path,意在在向计算机发出指令时的一个指向路径,如 一般会在path里加上:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 其中:%JAVA_ ...