React入门理解demo
1.React文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React-demo1</title>
<!-- 核心库 -->
<script src="build/react.js"></script>
<!-- 提供与dom相关功能 -->
<script src="build/react-dom.js"></script>
<!-- 将jsx转化为js -->
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<!-- script的type="text/babel"必不可少，js与jsx不兼容 -->
<script type="text/babel">
//文档内容转自：http://www.ruanyifeng.com/blog/2015/03/react.html
//**our code goes here**
//ReactDOM.render是React最基本的语法,用于将模板转为html语言,并插入制定的DOM节点
ReactDOM.render(
<h1>Hello,world!</h1>,
document.getElementById("example")
)
</script>
</body>
</html>
2.ReactDOM.render（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo2</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">
//map()方法一次对数组元素进行处理,map方法不会对空数组进行检测,map方法不会改变原数组
var names = ['Alice','Lily','Kate'];
ReactDOM.render(
<div>
{names.map(function(name){
return <div>hello,{name}!</div>
})}
</div>,
document.getElementById('example')
)
</script>
</body>
</html>
3.JSX 语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo3</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,world!</h1>,
<h2>React is awesome!</h2>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
)
</script>
</body>
</html>
4.组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React-demo4</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">
//React允许将代码封装成组件,React.createClass()方法用于生成一个组件类
//注意,组件类的第一个字母必须大写,如HelloMessage
//组件的属性可以在组件类的this.props对象上读取,如组件的name属性读取：this.props.name
//属性注意：class属性要写成className,for属性要写成htmlFor,因为class和for都是js的保留字
//this.props对象的属性与组件的属性一一对应，例外的是this.props.children属性,它表示组件的所有子节点
//另外，组件内只能包含一个顶层标签
var HelloMessage = React.createClass({
render : function(){
return <h1>hello,{this.props.name}</h1>
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
)
</script>
</body>
</html>
5.this.props.children
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo5</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">
//this.props.children的值可能有三种，如果当前组件没有子节点，就是undefined;如果当前组件有一个子节点，就是object;如果当前组件有多个子节点，就是Array.
//React提供了React.Children这个工具方法来处理this.props.Children，我们可以用React.Children.Map()来遍历子节点，而不用担心this.props.children的类型
var NotesList = React.createClass({
render : function(){
return <ol>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>
})
}
</ol>
}
});
ReactDOM.render(
<NotesList>
<span>Hello</span>
<span>World</span>
</NotesList>,
document.getElementById('example')
)
</script>
</body>
</html>
6.PropTypes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo6</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">
//组件的属性，可以接受任意值，组件类的PropTypes属性可以验证实例的属性是否符合要求
//MyTitle组件有一个title属性，PropTypes告诉React这个title是必须的，并且要是string类型的
//当我们设置title的属性值为数值时，这一条验证就通不过，控制台就会报错
var MyTitle = React.createClass({
propTypes:{
title:React.PropTypes.string.isRequired
},
render:function(){
return <h1>{this.props.title}</h1>
}
}),
//data = 123;
data = 'hello world';
ReactDOM.render(
<MyTitle title={data}/>,
document.getElementById("example")
)
</script>
</body>
</html>
7.getDefaultProps用来设置组件的默认属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo7</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">
//getDefaultProps用来设置组件的默认属性
var MyTitle = React.createClass({
getDefaultProps:function(){
return {
title:'hello world!'
};
},
render:function(){
return <h1>{this.props.title}</h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.getElementById('example')
)
</script>
</body>
</html>
8.获取真实的dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo8</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">
//获取真实的dom节点
//组件中的DOM并不是真实的dom,称为虚拟dom(virture dom),只有当它插入到文档中以后,才变成真实的dom
//MyComponent组件中有一个文本输入框，用于获取用户的输入，这时就必须获取真实的dom节点，虚拟dom是拿不到用户输入的。为了做到这一点，文本输入框必须有一个[ref]属性，然后this.refs.[refName]就会返回这个真实的节点
//注意：因为this.refs.[refName]获取到的是真实的dom节点，所以必须等到虚拟节点插入到文档中以后，才能使用这个属性，否则就会报错。
//上面代码中，通过为组件指定Click事件的回调函数，确保了只有等到真实dom发生click事件以后，才会读取this.refs.[refName]属性
//React除了支持click事件之外，也支持keyDown、copy、scroll等事件 var MyComponent = React.createClass({
handleClick:function(){
this.refs.myTextInput.focus();
},
render:function(){
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the Text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById("example")
)
</script>
</body>
</html>
9.this.state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo9</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">
//组件免不了要与用户互动。React的一大创新，就是将组件看成一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化,从而触发重新渲染UI。
//在组件LikeButton中，getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state读取。
//当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改之后，就会自动调用this.render方法，再次渲染组件
//this.props与this.state都用于描述组价的特性，可能会产生混淆。一个简单的区分方法：this.props表示那些一旦定义，就不再改变的特性;而this.state是会随着用户互动而产生变化的特性
var LikeButton = 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>)
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById("example")
)
</script>
</body>
</html>
10.表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo9</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">
//组件免不了要与用户互动。React的一大创新，就是将组件看成一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化,从而触发重新渲染UI。
//在组件LikeButton中，getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state读取。
//当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改之后，就会自动调用this.render方法，再次渲染组件
//this.props与this.state都用于描述组价的特性，可能会产生混淆。一个简单的区分方法：this.props表示那些一旦定义，就不再改变的特性;而this.state是会随着用户互动而产生变化的特性
var LikeButton = 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>)
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById("example")
)
</script>
</body>
</html>
11.生命周期-componentDidMount方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo11</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">
//代码在Hello组件加载以后，通过componentDidMount方法设置一个定时器，每个100ms,就重新设置组件的透明度，从而引发重新渲染
//另外，组件的style属性不能写成style="opacity:{this.state.opacity};",而要写成style = {{opacity:this.state.opacity}}
var Hello = React.createClass({
getInitialState:function(){
return {opacity:1.0};
},
componentDidMount:function(){
this.timer = setInterval(function(){
var opacity = this.state.opacity;
opacity -= .05;
if(opacity<0.1){
opacity = 1.0;
}
this.setState({
opacity:opacity
});
}.bind(this),100);
},
render:function(){
return (
<div style={{opacity:this.state.opacity}}>Hello{this.props.name}</div>
)
}
});
ReactDOM.render(
<Hello name="world"/>,
document.getElementById("example")
)
</script>
</body>
</html>
12.Ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo12</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">
//组件的数据来源，通常就是通过Ajax请求从服务器获取，可以使用componentDidMount方法设置Ajax请求，等到请求成功，再用this.setState方法重新渲染UI
//上面代码使用jQuery完成Ajax请求，这是为了便于说明。React本身没有任何依赖，完全可以不用jQuery,而使用其他库
//我们甚至可以把一个Promise对象传入组件
/*
ReactDOM.render(
<RepoList promise={$getJson('https://api.github.com/search/repositories?q=javascript&sort=stars')}/>,
document.getElementById("example")
)
*/
//上面代码从Github的API抓取数据，然后将Promise作为属性，传给RepoList组件
var UserGist = React.createClass({
getInitialState:function(){
return {
username:'',
lastGistUrl:''
};
},
componentDidMount:function(){
$.get(this.props.source,function(result){
var lastGist = result[0];
if(this.isMounted()){
this.setState({
username:lastGist.owner.login,
lastGistUrl:lastGist.html_url
});
}
}.bind(this));
},
render:function(){
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>
</div>
)
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.getElementById("example")
)
</script>
</body>
</html>
13.组件的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo13</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">
//如果promise对象正在抓取数据(pending状态)，组件显示"正在加载";如果promise对象报错（rejected状态），组件显示报错信息；如果promise对象抓取数据成功（fullfilled状态），组件显示获取的数据
//报错：then未定义
var RepoList = 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){
return (
<li>
<a href={repos.html_url}>{repo.name}</a>
</li>
);
});
return (
<main>
<h1>Most Popular Iavascript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
)
}
}
});
ReactDOM.render(
<RepoList />,
document.getElementById("example")
)
</script>
</body>
</html>
参考原文：http://www.ruanyifeng.com/blog/2015/03/react.html
React入门理解demo的更多相关文章
- react入门之使用react-bootstrap当轮子造车（二）
react入门之使用react-bootstrap当轮子造车(二) 上一篇我们谈了谈如何配置react的webpack环境 react入门之搭配环境(一) 可能很多人已经打开过官方文档学习了react ...
- react 入门与进阶教程
react 入门与进阶教程 前端学习对于我们来说越来越不友好,特别是随着这几年的发展,入门门槛越来越高,连进阶道路都变成了一场马拉松.在学习过程中,我们面临很多选择,vue与react便是一个两难的选 ...
- 【React】学习笔记（一）——React入门、面向组件编程、函数柯里化
课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...
- react入门（3）
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门（1）
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南（包括ES5和ES6对比）
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门---基础知识-大纲-1
-----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
随机推荐
- spring 5.x 系列第10篇 —— 整合mongodb (代码配置方式)
源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 配置文件位于com.heibaiying. ...
- ZTree简单粗暴快速使用
是什么:功能强大的树形插件 tip:查资料时痛苦的地方,自我改进 1.没有注明版本:版本不对应导致配置完成后各种无端的错误,特别难查找,运气好能找到英文的解答 2.没有写明配置文件,或者不指明配置文件 ...
- vagramt中同步文件,webpack不热加载
这是一篇参考文章:https://webpack.js.org/guides/development-vagrant/ 在使用vue-cli+webpack构建的项目中,如何使用vagrant文件同步 ...
- 有用的java学习网站
1.在线编译运行Java代码的网站 https://www.compilejava.net/ 2. 综合学习网站: http://www.tutorialspoint.com/,可以在线执行多种编程语 ...
- 还在被大妈灵魂拷问？使用Python轻松完成垃圾分类！
目录 0 环境 1 引言 2 思路 3 图像分类 4 总结 0 环境 Python版本:3.6.8 系统版本:macOS Mojave Python Jupyter Notebook 1 引言 七月了 ...
- 分布式全局ID生成方案
传统的单体架构的时候,我们基本是单库然后业务单表的结构.每个业务表的ID一般我们都是从1增,通过AUTO_INCREMENT=1设置自增起始值,但是在分布式服务架构模式下分库分表的设计,使得多个库或多 ...
- C#类成员初始化顺序
这里直接给出C#类成员一般初始化顺序: 子类静态字段 子类静态构造 子类实例字段 父类静态字段 父类静态构造 父类实例字段 父类实例构造 子类实例构造 为什么说是"一般"初始化顺序 ...
- JavaScript 基础知识 表达式和运算符
表达式的概念:将同类型的数据(如常量.变量.函数等),用运算符号按一定的规则连起来的.有意义的式子称为表达式 一.原始表达式 最简单的表达式,是表达式的最小单位.JavaScript中的原始表达式包含 ...
- Windows下通过VNC远程访问Linux服务器，并实现可视化
前言 最近因部门需要,老大想让我在公司Linux服务器上弄个Oracle,以用作部门测试环境的数据库服务器,经过一番折腾后,成功完成了任务.因公司Linux服务器是无图形界面的,本人接触Linux不多 ...
- CDQZ集训DAY1 日记
爆炸的一天…… 上午考试,然而一道题都没想出正解. T1刚看到题就想到数位DP,然后有感觉是反演,然后读完题之后又觉得是数位DP,发现最后只关注最后9位打了一个类似数位DP的爆搜.期望20分,实际10 ...