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 ...
随机推荐
- 【杂谈】对IO与NIO的认识
IO流与NIO块的数据缓存 Java的IO是面向流设计的,通常我们通过IO流读取数据,只能指定读取数据的大小,而不能选择数据读取的起始位置.数据就像流水一样,流过我们的应用,一旦流过就无法回头.除非我 ...
- spring boot整合JMS(ActiveMQ实现)
pom依赖如下: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="ht ...
- [IOI2014] 假期
Description 有\(N(N\leq 10^5)\)个排列在一条线上的城市,每个城市有\(val_i\)个景点.每天你可以选择在当前城市\(i\)游览景点,或者前往城市\(i-1\)或城市\( ...
- 复制神器Ditto使用方法详细说明
1.普通的粘贴快捷键设置: 我设置成ctrl+1 --> ctrl+10.但是注意,有些程序里ctrl有特殊功能,这样ctrl+[0-9]键会出现问题,所以建议将粘贴快捷键设置的复杂一点,例如c ...
- 共享内存 - shmget填坑记
1. 问题引出 最近有个项目,需要两个进程之间传递大量的数据,因此考虑采用了共享 内存机制+信号同步,两个进程,笔者和另外一程序员开发,协议都定好了,开发很顺利. 等到我们联合调试的时候,问题出现了, ...
- 正则表达式--C#正则表达式的符号及例子
正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. C#中经常会遇到要查找某一个字 ...
- 用idea搭建SSM项目,原来这么简单
目录 前言 软件环境 创建项目 数据库文件 配置文件 pom.xml log4j.properties jdbc.properties applicationContext.xml spring-mv ...
- quartz部署出现找不到表的情况,错误提示: Table 'heart_beat.QRTZ_LOCKS' doesn't exist
描述一下,本地可以,部署到Linux就不行,Linux上的数据库是本地直接拷贝上去的,项目环境是Spring Boot2.1.Shiro.MyBatis.Redis.swagger.Bootstrap ...
- coffee.js
( ) ( ( ) ) ( ( ( ) ) ) ########################## ############################ #################### ...
- 内网访问已经启动的vue项目
1. 项目本机启动地址: http://localhost:8090/#/login 2.项目内网启动地址: http://192.168.1.172:8090/#/login 3. 在vue项目的 ...