[React] 03 - Intro: react.js in twelve demos
Ref: React 入门实例教程
这算什么,react学习例子的十二门徒?哈哈
如何运行别人的react项目?
Ref: 【React全家桶入门之CODE】项目代码与使用方法
使用git克隆项目到本地:git clone https://github.com/awaw00/react-curd.git
。
现在你得到的是整个项目最新版本的代码。
(1) 执行npm i roadhog json-server -g
安装全局工具。
(2) 执行npm i
来安装项目依赖。
(3) 执行npm run server
启动服务器,然后再执行npm run dev
启动客户端。
【npm start启动服务器即可】
HTML 模板,以及ReactDOM.render()
可以将 src
子目录的 js
文件进行语法转换,转码后的文件全部放在 build
子目录
$ babel src --out-dir build
JSX 语法
遇到 HTML 标签(以 <
开头),就用 HTML 规则解析;
遇到代码块(以 {
开头),就用 JavaScript 规则解析。
数组变量
组件
组件类的第一个字母必须大写,否则会报错,比如HelloMessage
不能写成helloMessage
。
组件类只能包含一个顶层标签,否则也会报错。
因为 class
和 for
是 JavaScript 的保留字,所以:
(1) class
属性需要写成 className
;
(2) for
属性需要写成 htmlFor
;
this.props.children
这里需要注意, this.props.children
的值有三种可能:
(1) 如果当前组件没有子节点,它就是 undefined
;
(2) 如果有一个子节点,数据类型是 object
;
(3) 如果有多个子节点,数据类型就是 array
。
所以,处理 this.props.children
的时候要小心。
PropTypes
获取真实的DOM节点
获取用户的输入,必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。
为了做到这一点,文本输入框必须有一个 ref
属性,
然后 this.refs.[refName]
就会返回这个真实的 DOM 节点。
除了 Click
事件以外,还有 KeyDown
、Copy
、Scroll
等,完整的事件清单请查看官方文档。
this.state
将组件看成是一个状态机,(1) 一开始有一个初始状态,(2) 然后用户互动,导致状态变化,(3) 从而触发重新渲染 UI 。
(1) this.props
表示那些一旦定义,就不再改变的特性;
(2) this.state
表示会随着用户互动而产生变化的特性;【liked】
表单
用户在表单填入的内容,所以不能用 this.props
读取。
textarea
元素、select
元素、radio
元素都属于这种情况,更多介绍请参考官方文档。
组件的生命周期
will
函数在进入状态之前调用,did
函数在进入状态之后调用。
componentWillMount()
componentDidMount() componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState) componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
Ajax
组件的数据来源,通常是通过 Ajax 请求从服务器获取,
可以使用 componentDidMount
方法设置 Ajax 请求,等到请求成功,再用 this.setState
方法重新渲染 UI。
上面代码使用 jQuery 完成 Ajax 请求,这是为了便于说明。React 本身没有任何依赖,完全可以不用jQuery,而使用其他库。
我们甚至可以把一个Promise对象传入组件。
ReactDOM.render(
// 从Github的API抓取数据,然后将Promise对象作为属性,
// 传给RepoList
组件
<RepoList
promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
/>,
document.body
);
组件代码:
var RepoList = React.createClass({
getInitialState: function() {
return { loading: true, error: null, data: null};
}, componentDidMount() {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
}, render: function() { // 如果Promise对象正在抓取数据(pending状态),组件显示"正在加载";
// 如果Promise对象报错(rejected状态),组件显示报错信息;
// 如果Promise对象抓取数据成功(fulfilled状态),组件显示获取的数据。
if (this.state.loading) {
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var repos = this.state.data.items;
var repoList = repos.map(function (repo) {
return (
<li>
<a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
</li>
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
}
});
[React] 03 - Intro: react.js in twelve demos的更多相关文章
- [React] 02 - Intro: why react and its design pattern
为啥使用React,给我个理由 过去 需要手动更新DOM.费力地记录每一个状态:既不具备扩展性,又很难加入新的功能,就算可以,也是有着冒着很大的风险. 不过,使用这种开发方式很难打造出极佳的用户体验. ...
- React Native 系列(一) -- JS入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- [React] 01 - Intro: javaScript library for building user interfaces
教学视频: http://www.php.cn/code/8217.html React 教程: http://www.runoob.com/react/react-tutorial.html 本篇是 ...
- React 基于antd+video.js实现m3u8格式视频播放及实时切换
文档连接地址(官网看起麻烦,看中文别人整理好的)https://blog.csdn.net/a0405221/article/details/80923090 React项目使用 安装依赖 npm ...
- react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false
react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false
- 【03】react 之 创建component
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...
- React笔记:React基础(2)
1. JSX JSX是一种拥有描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI. 1.1 基本语法 JSX可以嵌套多个HTML标签,可以使用大部分符号HTML规范的属性. ...
- [React] 从零开始的react
组件 1. 无状态组件 在React中,组件的名字必须用大写字母开头,而包含该组件定义的文件名也应该是大写字母(便于区分,也可以不是). 无状态组件是纯展示组件,仅仅只是用于数据的展示,只根据传入的p ...
随机推荐
- 简单的proxy之TinyHTTPProxy.py
简单的proxy之TinyHTTPProxy.py 如果是在外企工作的话,可以访问美国的机器,这样就可以在美国的机器上为自己装个proxy,然后本地就可以很容易的使用proxy来上网了. TinyHT ...
- Axure RP Pro 7.0苏宁易购式标签切换效果教程
转:http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html 页面标签切换效果,几乎是所有大网站(尤其是电商类网站)标配的交互方式: ...
- (总结)Ubuntu apt-get apt-cache命令 使用
http://rsljdkt.iteye.com/blog/1142463 apt-cache search wubipinyin apt-get命令本身并不具有管理软件包功能,只是提供了一个软件包管 ...
- 什么叫做GNU
GNU就是GNU's Not Unix的缩写, GNU 的创始人Stallman 认为UNIX 虽然不是最 好的操作系统,但是至少不会太差,而他自信有能力把UNIX不足的地方加以改进,使它 成为一个优 ...
- sf2gis@163.com
1.下载boost1.52,http://www.boost.org/.解压文件到d:\boost\boost_1_52_0. 2.下载python2.7.3,http://www.python.or ...
- Scala字符串插值
Scala提供了三种字符串插值方式:s,f和raw.1. s字符串插值器简单的说就是解析字符串变量. val name = "Tom" println(s"His nam ...
- angularjs入门初体验
1. http://www.zouyesheng.com/angular.html#toc39
- 有关volatile关键字和transient关键字
(1)volatile关键字['vɑlətl]的作用 让变量每次在使用的时候,都从主存中取,而不是从各个线程的“工作内存”. 也就是说,volatile变量对于每次使用,线程都能得到当前volatil ...
- Kubernetes的ConfigMap解析
ConfigMap功能在Kubernetes1.2版本的时候就有了,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息.这些配置信息需要与docker image解耦,你总不能每修改一个配置 ...
- MemoryFile偷取安卓内存
参考链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0111/3859.html MemoryFile memoryFile ...