使用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. S0到S5状态讲解

    ACPI(高级配置和电源管理接口)的六种工作状态Advanced Configuration and Power Management InterfaceACPI表示高级配置和电源管理接口( Adva ...

  2. spring AOP 之二:@AspectJ注解的3种配置

    @AspectJ相关文章 <spring AOP 之二:@AspectJ注解的3种配置> <spring AOP 之三:使用@AspectJ定义切入点> <spring ...

  3. FFmpeg编解码处理1-转码全流程简介

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10584901.html FFmpeg编解码处理系列笔记: [0]. FFmpeg时间戳详 ...

  4. 控制台安装跟检测Microsoft.Net Framework

    1.检测 每一个版本的.Net Framework的安装过程都会在Windows目录下的\Microsoft.NET\Framework目录中生成一个子目录(安装目录). 比如说,假设Windows目 ...

  5. slf4j日志的使用

    slf4j(simple logging facade for Java)是Java的简单的日志门面,它不是具体的日志解决方案,它只服务于各种各样slf4j-logo的日志系统.这里的slf4j-lo ...

  6. java数据写入Excel

    正好最近公司要写一个对账的功能,后台用java从银行获得对账信息,数据是json类型的,然后写入excel中发送给一卡通中心的服务器上,网上找了很多代码,然后整合和改正,代码如下. import ja ...

  7. HTML暗黑料理之a标签执行请求不跳转页面

    不是被逼无奈不建议用这HTML暗黑料理. <iframe id="></iframe> <a class="large green button&qu ...

  8. Oracle总结一

    1 数据库相关概念 1.1 数据 数据是描述事物的符号,它有多种表现形式:文本,图形,音频,视频.计算机处理数据的基本单位是字节. 1.2 数据库(Database, 简称DB) 同粮库,车库类似,数 ...

  9. PHP7.27: MySqlhelper class

    https://github.com/ThingEngineer/PHP-MySQLi-Database-Class https://github.com/wildantea/php-pdo-mysq ...

  10. 微信小程序 封装请求

    在写小程序的时候,每个JS文件都一大堆的请求,看得自己都眼花缭乱,下面看一下怎么对请求方法进行封装. 1,方法封装,在util文件夹下新建文件,创建request.js文件,工具文件,用于对方法封装) ...