学习react教程
网址收藏: React官网，React的Github，React的中文文档
1.react是什么？
React起源于Facebook的内部项目，因为该公司对市场上所有的Javascript MVC框架都不满意，决定自己写一套，用来架设Instargm的网站。做完以后，发现很好用，就在2013年5月开源。
2.安装react
- 全局安装react脚手架工具
npm install create-react-app -g - 安装阮一峰老师的教程
git clone git@github.com:ruanyf/react-demos.git下载下来
3.react特性
重点：组件，状态
核心： 状态
4.语法。
4.1 html模板
<!DOCTYPE html>
<html>
<head>
<!-- 这是核心js -->
<script src="../build/react.js"></script>
<!-- 这是处理虚拟dom相关的js -->
<script src="../build/react-dom.js"></script>
<!-- 这是把JSX语法转换为js语法 （注意：JSX就是可以把html写在js里面。） -->
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<!-- 这里加type就是告诉游览器，这里使用的是JSX语法模板。 -->
<script type="text/babel">
//这里写
</script>
</body>
</html>
4.2 ReactDOM.render()
React最基本的方法，用于把模板转换成html语言，并且插入指定的节点。
例如：
ReactDOM.render(
<h2>Welcome to React World!</h2>,
document.getElementById('myapp')
)
4.3 JSX语法
JSX是可以在js中写html，遇到html标签（例如：
<）就用html解析，遇到代码块（例如：{）就用javascript规则解析。
例如：
<!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>
<div id="food"></div>
<script type="text/babel">
var names = ['Alice', 'Emily', 'Kate'];
var foods = ['meal','sala','milk'];
ReactDOM.render(
<div>
{
names.map(function (name, index) {
return <div key={index}>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
ReactDOM.render(
<div>
{
foods.map(function (food, index) {
return <div key={index}>I like eat {food}!</div>
})
}
</div>,
document.getElementById('food')
)
</script>
</body>
</html>
4.4 组件 React.createClass()
React允许将代码封装成组件(component)，然后把它当成html标签插入到网页中。React.createClass()就是可以创建一个组建类。
例如：
<!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="foods"></div>
<script type="text/babel">
var LikeFood = React.createClass({ //创建组件类
render: function() {
return <p>I like eat <mark>{this.props.name}</mark></p>;
}
});
ReactDOM.render(
<LikeFood name="Apple"/>,
document.getElementById('foods')
)
</script>
</body>
</html>
4.5 this.props.children
this.props对象的属性与组件的属性基本上是一致的，特殊在于this.props.children属性，它表示组件的所有子节点。
注意： this.props.children有三个可能，如果当前组件没有子节点，就是显示undefined;如果有一个子节点，数据类型就是object；如果有多个子节点，就是array，所以要小心。
但React提供了一个方法遍历所有子节点，React.Children,通过this.props.children来遍历。
<!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="foods"></div>
<script type="text/babel">
var FoodList = React.createClass({
render: function() {
return (
<ul>
{
React.Children.map(this.props.children,function (child) {
return <li>{child}</li>;
})
}
</ul>
)
}
})
ReactDOM.render(
<FoodList>
<span>Hello,</span>
<span>I like eat</span>
<span>Apple!</span>
</FoodList>,
document.getElementById('foods')
)
</script>
</body>
</html>
4.6 PropTypes
组件的属性可以接受任何值，如字符串，数字，数组，对象，函数，但是需要一种机制来验证使用组件提供的参数是否符合要求，PropTypes就是用来验证这个的。
<!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="foods"></div>
<script type="text/babel">
var str = 123;
var MyNum = React.createClass({
propTypes: {
num: React.PropTypes.number.isRequired,
},
render: function() {
return <h2>{this.props.num}</h2>
}
});
ReactDOM.render(
<MyNum num={str} />,
document.getElementById('foods')
)
</script>
</body>
</html>
补充：还可以添加默认值。'
getDefaultProps: function() {
return {
num: 1818
}
}
例如：
<!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="foods"></div>
<script type="text/babel">
var str;
var MyNum = React.createClass({
getDefaultProps: function() {
return {
num: 1818
}
}
propTypes: {
num: React.PropTypes.number.isRequired,
},
render: function() {
return <h2>{this.props.num}</h2>
}
});
ReactDOM.render(
<MyNum num={str} />,
document.getElementById('foods')
)
</script>
</body>
</html>
4.7 获取真实的DOM节点
组件并不是真的dom节点，只是存在内存中的数据结构，叫做虚拟DOM(virtual)。当它插入到文档以后，才会变成真实的DOM。
所有的DOM变动，先是在虚拟DOM上发生变动，然后再在实际发生变动的部分，反映在真实的DOM，这种叫做DOM diff,它可以极大提高网页的性能表现。
有时需要从组件获取真实的DOM的节点，这个时候就要用到ref属性。
注意：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="foods"></div>
<script type="text/babel">
var MyFoods = React.createClass({
showContent: function() {
this.refs.myFoodInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myFoodInput" />
<input type="button" value="自动聚焦" onClick={this.showContent} />
</div>
)
}
})
ReactDOM.render(
<MyFoods />,
document.getElementById('foods')
)
</script>
</body>
</html>
4.8 this.state 状态管理
组件免不了要和用户互动，React的一大创新就是把组件看成是一个状态机，一开始有个初始状态，然后用户互动，导致状态变化，从而重新出发渲染UI。
注意： getInitialState 方法用于定义初始状态，但同时它是一个对象，这个可以通过this.state属性读取。
当用户点击组件，导致状态发生变化，this.setState 方法就会修改状态值，每次修改完，会自动调用this.render方法，再次渲染组件。
this.props和this.state都是描述组件的特性，但是不同的是this.props是指一旦定义好了，就不再发生变化的特性，而this.state是会随着用户互动而产生变化的特性。
例如：
<!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="foods"></div>
<script type="text/babel">
var FoodButton = React.createClass({
getInitialState: function() {
return {food: false};
},
callClick: function(event) {
this.setState({food: !this.state.food});
},
render: function() {
var text1 = this.state.food ? 'like eat apple' : 'hate eat apple';
return (
<p onClick={this.callClick}>
You {text1}!
</p>
);
}
});
ReactDOM.render(
<FoodButton />,
document.getElementById('foods')
)
</script>
</body>
</html>
4.9 表单
用户在表单填入的内容，属于用户和组件之间的互动，所以不能用
this.state，而要定义一个onChange事件的回调函数，通过event.target.value读取用户的值。
注意：textarea,select,radio都属于这种情况。
例如：
<!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="food"></div>
<script type="text/babel">
var Food = React.createClass({
getInitialState: function() {
return {val: 'Welcome to React!'};
},
hanChange: function(event) {
this.setState({val:event.target.value});
},
render: function() {
var val = this.state.val;
return (
<div>
<input type="text" value={val} onChange={this.hanChange} />
<p>{val}</p>
</div>
);
}
})
ReactDOM.render(<Food />,document.getElementById('food'))
</script>
</body>
</html>
4.10 组件的生命周期
React中组件的生命周期分为三个状态，Mounting是已经插入真实DOM，Updating是正在被重新渲染，Unmounting是已移出真实DOM。
每个状态都有两种处理函数，will函数是进入状态之前，did函数是进入状态之后，三种状态共计五种函数。
注意：组件的样式style不能写成<div style={opacity: this.state.opacity}>，要写成<div style={{opacity: this.state.opacity}}>。
因为React组件样式是个对象，所以第一个大括号表示Javascript语法，第二个大括号表示样式对象。
五种函数
componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentWillUpdate(object prevState, object prevState)componentWillUnMount()
例如：第二种，在已插入真实DOM之后触发。
<!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="food"></div>
<script type="text/babel">
var Food = React.createClass({
getInitialState: function() {
return {
opacity: 0
}
},
componentDidMount: function() {
this.timer = setInterval(function() {
var opacity = this.state.opacity;
opacity += .05;
if (opacity > 1) {
opacity = 0;
}
this.setState({
opacity: opacity
})
}.bind(this),100);
},
render: function() {
return (
<div style={{opacity: this.state.opacity}}>
Hello, {this.props.title}
</div>
);
}
});
ReactDOM.render(
<Food title="apple"/>,
document.getElementById('food')
)
</script>
</body>
</html>
4.11 Ajax的使用
组件的数据来源一般都是通过Ajax请求从服务器获取，可以使用
componentDidMount()方法设置Ajax请求，等到请求成功，再用this.setState方法重新渲染UI。
例如：
<!DOCTYPE html>
<html>
<head>
<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="food"></div>
<script type="text/babel">
var ClientGits = React.createClass({
getInitialState: function() {
return {
id: '',
addr: ''
};
},
componentDidMount: function() {
$.get(this.props.source,function (result) {
var gits = result[0];
this.setState({
id: gits.id,
addr: gits.git_pull_url
});
}.bind(this));
},
render: function() {
return (
<div>
UserId is <a href='#userId'>{this.state.id}</a>, Git Address is <a href={this.state.addr}>{this.state.addr}</a>!
</div>
);
}
});
ReactDOM.render(
<ClientGits source="https://api.github.com/users/octocat/gists" />,
document.getElementById('food')
)
</script>
</body>
</html>
注意：上面采用了jquery的Ajax，还可以采用其他的库。我们甚至可以把Promise对象传入组件。
例如：
<!DOCTYPE html>
<html>
<head>
<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="projects"></div>
<script type="text/babel">
var Projects = 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() {
if (this.state.loading) {
return <span>Loading...</span>;
} else if (this.state.error != null) {
return <span>Error:{this.state.error.message}</span>;
} else {
var res = this.state.data.items;
var resList = res.map(function (res,index) {
return (
<li key={index}><a href={res.html_url} target="_blank">{res.name}</a>({res.stargazers_count} stars)<br/>{res.description}</li>
);
});
return (
<main>
<h1>Github上最受欢迎的JS项目</h1>
<ul>{resList}</ul>
</main>
);
}
}
});
ReactDOM.render(
<Projects promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
document.getElementById('projects')
)
</script>
</body>
</html>
学习react教程的更多相关文章
- [转] 学习React Native必看的几个开源项目
http://www.lcode.org/study-react-native-opensource-one/ http://gold.xitu.io/entry/575f498c128fe10057 ...
- 正式学习 react(三)
有了基础的webpack基础,我们要对react的基本语法进行学习. 我这个教程全部用es6 实现.可能会忽略一些最基本的语法讲解,这些你在官网上或者其他别的地方都比我讲的全. 今天我要讲一下reac ...
- 学习react
推荐资源: 一位react的最初构建者写的学习react的建议,这是翻译过的http://www.360doc.com/content/16/0129/07/13518188_531384175.sh ...
- React学习-React初识
一.前言 为什么要去学习React呢,关于前端三大框架Angular,Vue,React其实都得去学吧,因为大家都在用啊,大家都再谈论啊,面试什么的都要求,没办法,曾几何时,大家都说求求大佬们别坑新了 ...
- [转]React 教程
本文转自:http://www.runoob.com/react/react-install.html React 可以直接下载使用,下载包中也提供了很多学习的实例. 本教程使用了 React 的版本 ...
- SAP官网发布的react教程
大家学习React的时候,用的是什么教程呢?Jerry当时用的阮一峰博客上的入门教程,因为React使用的JSX语法并不是所有的浏览器都支持,所以还得使用browser.js在浏览器端将JSX转换成J ...
- 2021 年学习 React 的所需要的 JavaScript 基础
在理想的情况中,您可以先了解所有有关 JavaScript 和 web 开发的知识,然后再深入了解React. 但是,我们没有办法这样,如果等你把所有 JavaScript 的知识都掌握了再去学习 R ...
- Deep Learning 19_深度学习UFLDL教程：Convolutional Neural Network_Exercise（斯坦福大学深度学习教程）
理论知识:Optimization: Stochastic Gradient Descent和Convolutional Neural Network CNN卷积神经网络推导和实现.Deep lear ...
- 7张图片学习VIM教程
7张图片学习VIM教程 张图片设置为桌面背景,时不时的能看上一眼.慢慢就学会VIM了. VIM lesson 1 VIM lesson 2 VIM lesson 3 VIM lesson 4 VIM ...
随机推荐
- 分布式理论系列（一）从 ACID 到 CAP 到 BASE
分布式理论系列(一)从 ACID 到 CAP 到 BASE 一.ACID 1.1 事务的四个特征: (1) Atomic(原子性) 事务必须是一个原子的操作序列单元,事务中包含的各项操作在一次执行过程 ...
- fabric实现文本聚焦、可编辑
var canvas = new fabric.Canvas('c'); var tex = new fabric.IText('click',{left:100,top:400});canvas.a ...
- 8 求s=a+aa+aaa+aaaa+aa...a的值
题目:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字. * 例如2+22+222+2222+22222(此时共有5个数相加),几个数相加有键盘控制.程序分析:关键是计算出每一项的 ...
- iOS隐藏导航条1px的底部横线
第二种方法:1)声明UIImageView变量,存储底部横线 @implementation MyViewController { UIImageView *navBarHairlineImageVi ...
- JUnit4简易教程
1.下载JUnit4的jar包,在项目上右键选properties->Java Build Path ->Libraries->Add library添加刚才的jar包 2.在项目中 ...
- [翻译] FastReport Class Hierarchy (FastReport 组件类层次结构)
"TfrxComponent" is the base class for all FastReport components. Objects of this type have ...
- 关于数组以及c#学习问题
第二次作业我没注意看群通告,看到都3月8号,开始着手想用c#试着写写,才发现一些问题. a.鞠老的要求中必须原数据需要csv文件,csv文件不是太了解,网上简单查阅了一下------csv意思是逗号分 ...
- Lucene 分页搜索实现
Lucene中有两种分页查询方式 1.一次查询出大量数据,然后根据页码定位是哪个文档,其实就是暴力获取了 2.通过调用searchAfter来实现 我们都知道collect是lucene中对搜索到的文 ...
- .NET框架源码解读之SSCLI编译过程简介
前文演示了编译SSCLI最简便的方法(在Windows下): 在“Visual Studio 2005 Command Prompt”下,进入SSCLI的根目录: 运行 env.bat 脚本准备环境: ...
- solr-4.10.2版本使用tomcat7部署
当前版本仅限于solr-4.10.2版本.默认环境使用的是jdk1.7,tomcat7.环境自己配置.网上一堆堆的. 1.下载相应的文件(solr-4.10.2.zip). 官网地址:http://l ...