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入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

随机推荐

Asp.Net Core 项目 EntityFramework Core 根据登录用户名过滤数据
1.创建ASP.NET Core Web Applicatoin (MVC)项目,并且使用 Individual User Account 2.创建数据筛选接口 Models->IDataFil ...
Hyperledger Fabric1.4环境搭建过程
简单记录一下fabric版本1.4的环境搭建,运行环境为Ubuntu18.04,其中一些内容是根据官方文档整理的,如有错误欢迎批评指正. 本文只介绍最简单的环境搭建方法,具体的环境搭建解析在这里深入解 ...
Netty源码分析--Channel注册（上）（五）
其实在将这一节之前,我们来分析一个东西,方便下面的工作好开展. 打开启动类,最开始的时候创建了一个NioEventLoopGroup 事件循环组,我们来跟一下这个. 这里bossGroup, 我传入了 ...
Storm 学习之路（八）—— Storm集成HDFS和HBase
一.Storm集成HDFS 1.1 项目结构本用例源码下载地址:storm-hdfs-integration 1.2 项目主要依赖项目主要依赖如下,有两个地方需要注意: 这里由于我服务器上安装的是 ...
java源码解析之String类(二)
上一节主要介绍了String类的一些构造方法,主要分为四类无参构造器:String(),创建一个空字符串"",区别于null字符串,""已经初始化,null并 ...
Spring 之Aop实现日志记录
Aop实现见代码,简单demo实现 package com.idcos.automate.config; import com.idcos.automate.dal.auto.dao.dcos.Dco ...
yii中 columnszii.widgets.grid.CGridView
<?php $this->widget('zii.widgets.grid.CGridView', array( 'id'=>'chapter-grid', 'dataProvide ...
Android使用Camera2获取预览数据
一.Camera2简介 Camera2是Google在Android 5.0后推出的一个全新的相机API,Camera2和Camera没有继承关系,是完全重新设计的,且Camera2支持的功能也更加丰 ...
DBA主宰一切请求，MySQL 查询重写
这个功能一年左右之前就以知晓,应该是5.7的高版本中.今天难得有兴致测试.随之也就总结一下. 前言: 一般来说,我们都会让开发自己去改sql.这样需要重启应用,单节点不可避免有或多或少的停服时间.同事 ...
JAVA写入大文件DEMO
/** * 读取filePath的文件 * @param filePath 文件的路径 * @return List集合文件中一行一行的数据 ...

React入门理解demo

React入门理解demo的更多相关文章

随机推荐

热门专题