React学习笔记_01
使用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的更多相关文章
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记(一)- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记(七)条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记(六)事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记(五)State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
随机推荐
- S0到S5状态讲解
ACPI(高级配置和电源管理接口)的六种工作状态Advanced Configuration and Power Management InterfaceACPI表示高级配置和电源管理接口( Adva ...
- spring AOP 之二:@AspectJ注解的3种配置
@AspectJ相关文章 <spring AOP 之二:@AspectJ注解的3种配置> <spring AOP 之三:使用@AspectJ定义切入点> <spring ...
- FFmpeg编解码处理1-转码全流程简介
本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10584901.html FFmpeg编解码处理系列笔记: [0]. FFmpeg时间戳详 ...
- 控制台安装跟检测Microsoft.Net Framework
1.检测 每一个版本的.Net Framework的安装过程都会在Windows目录下的\Microsoft.NET\Framework目录中生成一个子目录(安装目录). 比如说,假设Windows目 ...
- slf4j日志的使用
slf4j(simple logging facade for Java)是Java的简单的日志门面,它不是具体的日志解决方案,它只服务于各种各样slf4j-logo的日志系统.这里的slf4j-lo ...
- java数据写入Excel
正好最近公司要写一个对账的功能,后台用java从银行获得对账信息,数据是json类型的,然后写入excel中发送给一卡通中心的服务器上,网上找了很多代码,然后整合和改正,代码如下. import ja ...
- HTML暗黑料理之a标签执行请求不跳转页面
不是被逼无奈不建议用这HTML暗黑料理. <iframe id="></iframe> <a class="large green button&qu ...
- Oracle总结一
1 数据库相关概念 1.1 数据 数据是描述事物的符号,它有多种表现形式:文本,图形,音频,视频.计算机处理数据的基本单位是字节. 1.2 数据库(Database, 简称DB) 同粮库,车库类似,数 ...
- PHP7.27: MySqlhelper class
https://github.com/ThingEngineer/PHP-MySQLi-Database-Class https://github.com/wildantea/php-pdo-mysq ...
- 微信小程序 封装请求
在写小程序的时候,每个JS文件都一大堆的请求,看得自己都眼花缭乱,下面看一下怎么对请求方法进行封装. 1,方法封装,在util文件夹下新建文件,创建request.js文件,工具文件,用于对方法封装) ...