参考了这篇文章:

http://www.ruanyifeng.com/blog/2015/03/react.html

其中github 安装配置见上一篇文章(link

一、HTML 模板

使用 React 的网页源码,结构大致如下。

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>

上面有两个地方需要注意:

首先,最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。
凡是使用 JSX 的地方,都要加上 type="text/babel" 。 其次,上面代码一共用了三个库: react.js 、react-dom.js 和 Browser.js ,它们必须首先加载。
其中,react.js 是 React 的核心库,
react-dom.js 是提供与 DOM 相关的功能,
Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,
这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。
$ babel src --out-dir build
上面命令可以将 src 子目录的 js 文件进行语法转换,转码后的文件全部放在 build 子目录。

babel命令我发现在机器上没有安装。需要安装一下,用了下面两个命令:

$sudo npm install webpack -g

$sudo npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev -g

但是还是没有babel命令行,需要安装
$ sudo npm install babel-cli -g

然后就有babel命令行了一刚。

在这个目录添加自己练习代码的地方:

/Users/baidu/Documents/Data/Work/Code/Self/react-demos

把build目录拷过来。

然后在demo1里面写一个 index.html :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

双击在浏览器打开,能够看到界面显示。

试一试babel命令。

创建一个目录 dist,然后
$ babel . --out-dir dist 但是发现dist目录没有变化。看了一下,貌似需要是 js 文件才能够被转换。

二、ReactDOM.render()

ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

三、JSX 语法

HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法

JSX 的基本语法规则:

遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;

遇到代码块(以 { 开头),就用 JavaScript 规则解析。

关于上面的内容,又写了一段代码(参考demo2):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var names = ['a', 'b', 'c']; ReactDOM.render(
<div>
{
names.map(function (name) {
return <div> Hello {name}!</div>
})
}
</div>,
document.getElementById('example')
) </script>
</body>
</html>

注意,以上的语句都没有加分号,其实js是不需要有分号;的。

双击在浏览器打开后,能够看到:

Hello a!
Hello b!
Hello c!

以上的代码中,数组是通过map来进行映射和执行的。而如果把数组直接放在jsx模板中,数组的内容会直接展开。

如下(参考了demo03):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var arr = [
<h1>Hello,</h1>,
<h2>Here!</h2>
] ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
) </script>
</body>
</html>

四、组件

React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。

下面的代码生成一个组件(使用React.createClass,参考demo04):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
render:function () {
return <h1>Hello {this.props.name}</h1>
}
}) ReactDOM.render(
<Hello name="myname"/>,
document.getElementById('example')
) </script>
</body>
</html>

浏览器界面显示:

Hello myname

模板插入 <Hello /> 时,会自动生成 Hello 的一个实例(下文的"组件"都指组件类的实例)。

所有组件类都必须有自己的 render 方法,用于输出组件。

组件类的第一个字母必须大写,否则会报错。

另外,组件类顶层标签个数只能是一个,不能有多个顶层标签,(非顶层标签随意),否则也会报错。

组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,组件的属性可以在组件类的 this.props 对象上获取。

添加组件属性,需要注意的是,class 属性需要写成 className ,for 属性需要写成 htmlFor ,因为 class 和 for 是 JavaScript 的保留字。

五、this.props.children

this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点。

写一段代码如下(参考demo5):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
render:function () {
return (<ol>{
React.Children.map(this.props.children,
function (child) {
return <li>
{child}
</li>
})
}</ol>)
}
}) ReactDOM.render(
<Hello>
<span>hello</span>
<span>world</span>
</Hello>,
document.getElementById('example')
) </script>
</body>
</html>

页面代码,加上了li:

<ol data-reactroot=""><li><span>hello</span></li><li><span>world</span></li></ol>

props.children使用注意点如下:

this.props.children 的值有三种可能:
如果当前组件没有子节点,它就是 undefined ;
如果有一个子节点,数据类型是 object ;
如果有多个子节点,数据类型就是 array 。
所以,处理 this.props.children 的时候要小心。 React 提供一个工具方法 React.Children 来处理 this.props.children 。
我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。
更多的 React.Children 的方法,可以参考官方文档。
https://facebook.github.io/react/docs/top-level-api.html#react.children

六、PropTypes

组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function () {
return <h1> {this.props.title} </h1>
}
}) var data = ;
ReactDOM.render(
<Hello title={data}/>,
document.getElementById('example')
) </script>
</body>
</html>

运行时,会发现报错:

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `Hello`, expected `string`.

另外,可以用getDefaultProps设置props的默认值:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getDefaultProps: function () {
return {
title: "Hello"
}
},
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function () {
return <h1> {this.props.title} </h1>
}
}) var data = ;
ReactDOM.render(
<Hello/>,
document.getElementById('example')
) </script>
</body>
</html>

浏览器显示:

Hello

七、获取真实的DOM节点

组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。

只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,
然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。

DOM diff的算法可以详见:link

有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
handleClick: function () {
this.refs.myTextInput.focus();
}, render: function () {
return (
<div>
<input type="text" ref="myTextInput"/>
<input type="button" value="Focus" onClick={this.handleClick}/>
</div>
)
}
}) var data = ;
ReactDOM.render(
<Hello/>,
document.getElementById('example')
) </script>
</body>
</html>

为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。
上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。
React 组件支持很多事件,除了 Click 事件以外,还有 KeyDown 、Copy、Scroll 等,完整的事件清单请查看官方文档。
https://facebook.github.io/react/docs/events.html#supported-events

八、this.state

由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

看如下代码,demo8:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {liked: false}
}, handleClick: function (event) {
this.setState({liked: !this.state.liked})
}, render: function () {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
)
}
}) var data = ;
ReactDOM.render(
<Hello/>,
document.getElementById('example')
) </script>
</body>
</html>

React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。

它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

九、表单

文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。

textarea 元素、select元素、radio元素都属于这种情况,更多介绍请参考官方文档

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {value: 'Hello!'}
}, handleChange: function (event) {
this.setState({value: event.target.value})
}, render: function () {
var text = this.state.value;
return (
<div>
<input type="text" value={text} onChange={this.handleChange}/>
<p>{text}</p>
</div>
)
}
}) var data = ;
ReactDOM.render(
<Hello/>,
document.getElementById('example')
) </script>
</body>
</html>

以上参考demo09。浏览器页面如下:

hidanfeingd,aennga
hidanfeingd,aennga 上面文本框和下面的文本内容是同步的。

十、组件的生命周期

组件的生命周期分成三个状态:

Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM

React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外,React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

需要找时间详细阅读一下官方文档:link

The Component Lifecycle

Mounting

These methods are called when an instance of a component is being created and inserted into the DOM:

Updating

An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

Unmounting

This method is called when a component is being removed from the DOM:

Other APIs

Each component also provides some other APIs:

Class Properties

Instance Properties

参考Demo10,写了一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {opacity: 1.0}
}, componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
})
}.bind(this), )
}, render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
)
}
}) var data = ;
ReactDOM.render(
<Hello name="Bill"/>,
document.getElementById('example')
) </script>
</body>
</html>

界面上面会有一行字,深浅逐渐变化。

通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

另外,组件的style属性的设置方式也值得注意:

不能写成
style="opacity:{this.state.opacity};"
而要写成
style={{opacity: this.state.opacity}} 这是因为 React 组件样式是一个对象,所以第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。
参考:
https://facebook.github.io/react/tips/inline-styles.html

十一、Ajax

组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,

等到请求成功,再用 this.setState 方法重新渲染 UI。

开始没有任何反应,应该是跨域了。结果不是,是缺了jquery的库。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {
username: '',
lastGistUrl: ''
}
}, componentDidMount: function () {
//alert("hihi")
$.get(this.props.source, function (result) {
//alert(result);
var lastGist = result[]; if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
})
}
}.bind(this))
}, render: function () {
return (
<div>
Hello {this.state.username}
<a href={this.state.lastGistUrl}>here</a>
</div>
)
}
}) ReactDOM.render(
<Hello source="https://api.github.com/users/octocat/gists"/>,
document.getElementById('example')
) </script>
</body>
</html>

奇怪的是,我访问其他url,总是存在跨域问题,访问api.github就不会出现这样的问题。。

并且可以直接在html标签里面用 getJSON,然后根据状态来处理,如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {
loading: true,
error: null,
data: null
}
}, componentDidMount: function () {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error})
)
}, render: function () {
if (this.state.loading) {
return <span> Loading... </span>
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error}</span>
}
else {
var repos = this.state.data.items;
var repoList = repos.map(
function (repo, index) {
return (
<li key={index}>
<a href={repo.html_url}>{repo.name}</a>
({repo.stargazers_count} stars) <br/>
{repo.description}
</li>
)
}
)
return (
<main>
<h1>Most Popular Javascript Project in Github</h1>
<ol>{repoList}</ol>
</main>
)
}
}
}) ReactDOM.render(
<Hello promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}/>,
document.getElementById('example')
) </script>
</body>
</html>

浏览器里面可以看到,先是loading,然后有下面的结果:

最后,还有一个demo 13,是介绍react server,首屏渲染的。

安装方法,先到demo13目录里:

# install the dependencies in demo13 directory
$ npm install # translate all jsx file in src subdirectory to js file
$ npm run build # launch http server
$ node server.js

然后 localhost:3000 能访问,但是貌似有一些界面的问题。有机会再看。

【转载】React入门实例教程-读书笔记的更多相关文章

  1. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  2. let import export React入门实例教程 connect provider combineReducers 箭头函数 30分钟掌握ES6/ES2015核心内容 Rest babel

    let与var的区别 http://www.cnblogs.com/snandy/archive/2015/05/10/4485832.html es6 导入导出 http://www.csdn.ne ...

  3. React 入门实例教程(转载)

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  4. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  5. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  6. React入门实例教程

    文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...

  7. 【转】react入门实例教程

    作者: 阮一峰 日期: 2015年3月31日 写在前面:原文链接http://www.ruanyifeng.com/blog/2015/03/react.html    github地址https:/ ...

  8. React 入门实例教程【转】

    Any day will do. 哪一天都行 Are you kidding? 你在开玩笑吧! Congratulations! 祝贺你! I don’t mean it. 我不是故意的. 原文作者: ...

  9. 不会几个框架,都不好意思说搞过前端: React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

随机推荐

  1. luogu3193 [HNOI2008]GT考试

    there #include <iostream> #include <cstdio> using namespace std; int n, m, mod, nxt[25], ...

  2. splay模板三合一 luogu2042 [NOI2005]维护数列/bzoj1500 [NOI2005]维修数列 | poj3580 SuperMemo | luogu3391 【模板】文艺平衡树(Splay)

    先是维修数列 题解看这里,但是我写的跑得很慢 #include <iostream> #include <cstdio> using namespace std; int n, ...

  3. 解决debian 9 重启nameserver失效问题

    目录 解决debian 9 重启nameserver失效问题 安装resolvconf 编辑文件 测试 解决debian 9 重启nameserver失效问题 刚安装完debian9,用过之后会发现/ ...

  4. webdriver高级应用- 测试HTML5语言实现的视频播放器

    能够获取HTML5语言实现的视频播放器,视频文件的地址.时长,控制播放器进行播放或暂停播放等操作. #encoding=utf-8 import unittest from selenium impo ...

  5. Selenium WebDriver-通过断言页面是否存在某些关键字来确定页面按照预期加载

    #encoding=utf-8 import unittest import time import chardet from selenium import webdriver class Visi ...

  6. Python学习-day7 类 部分socket

    这周还是继续关于类的学习,在面向对象的学习过程中又学习了网络编程,并且提交了编写FTP的作业. 复习一下类的相关概念和定义 类      属性           实例变量:内存中           ...

  7. PostgreSQL order by 排序问题

    默认的排序为order by 字段名, 如果该字段不允许为空的情况下可以这样操作, 但是当字段允许为null时,order by 字段名的方式会导致: 升序时(asc): 会从最小值开始升序,最后面接 ...

  8. C++ 将string转换成char*字符串

    我们经常会使用C和C++的混合编程,在某些情况下,需要将C++的string,转换成char* 的字符串.下面说两种可行的方法,作为总结. 1. data(); 如: string str=" ...

  9. pip install ImportError: cannot import name main

    在Ubuntu上用pip install装ansible时报错 root@user:~# pip install --no-cache-dir ansible -i http://mirrors.al ...

  10. BZOJ 4868 [Shoi2017]期末考试 ——三分 枚举

    考场上xjb三分过掉了. 然后$sdfzyhx$.$silvernebula$ $O(n)$虐掉了. 我还是太菜了 #include <cstdio> #include <cmath ...