react学习笔记1
# 1、hello world
学习一个语言，最好的方式，我们需要去官网去查看文档（https://facebook.github.io/react），通过JSFiddle,便可以看到最简单的demo.
目前为止最新版本为15.3.0，后续没有特别说明，我们都是基于该版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
<style>
.styleT{
color: #f40;
}
</style>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel"> var Hello = React.createClass({
render:function(){
return <h1 className="styleT">Hello,{this.props.name}</h1>;
}
});
ReactDOM.render(
<Hello name="苍老师" />,
document.getElementById("example")
);
</script>
</body>
</html>
需要注意的点：
+ 引入文件 ：当前版本需要引入react\react-dom\browser三个文件，版本不同，引入文件有出入。
- 问题来了，我们browser的为啥要用，文件这么大？它的作用是使浏览器支持babel，你可以使用ES2015（javascript下一代标准ECMAScript 6）进行编码。如果你用ES5，可以不引入。
+ ReactDOM.render该方法的两个参数
- dom节点，(并不是真正的dom节点，是个实例而已)需要注意的是class不在支持样式，因为关键字的原因，应该用className
- 需要插入的节点。
+ 传参，“苍老师”
# 2、事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/babel">
var Btn=React.createClass({
render:function () {
return <div><button onClick={this.onClick}>显示与隐藏</button> <span ref="tip">看我消失～～!</span></div>;
},
onClick:function(evt){
var ele=ReactDOM.findDOMNode(this.refs.tip);
if(ele.style.display=="none"){
ele.style.display="inline";
}else{
ele.style.display="none";
}
}
}); var Ipt=React.createClass({
render:function (){
return （
<div>
<input onChange={this.onChange} />
<span ref="infoShadow">{this.state.inputVal}</span>
</div>
）;
},
onChange:function(evt){
this.setState({
inputVal:evt.target.value,
});
},
getInitialState:function(){
return {
inputVal:"默认的字符"
}
},
}); ReactDOM.render(
<div>
<Btn />
<br/><br/><br/><br/>
<Ipt />
</div>,
document.getElementById('main')
);
</script>
</body>
</html>
注意点：
+ type类型为text/babel，而非text/JSX
+ 渲染React组件,声明变量采用首字母大写（老纸用小写，踩坑了，半天死活没效果，也不报错）
+ React.createClass() 接受的参数为对象，{ xxx }
+ 绑定事件为 onXxx={this.fn}
+ 查找节点ReactDOM.findDOMNode
- 接受参数为虚拟dom节点this.refs.xxx
- ref="xxx"(我暂时理解为id)
+ 状态
- 状态初始化 getInitialState:fn(){return {xxx:"初始化"}}
- 改变状态 setState({xxx:"改变后的状态"})
+ 创建组件虚拟dom的结构，一行显示为一坨，很恶心
- 放在小括号内 （虚拟dom...）注意接触是分号
react学习笔记1的更多相关文章
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记（一）- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记（七）条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记（六）事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记（五）State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
- React学习笔记 - Hello World
React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...
随机推荐
- C++移位运算符
关于逻辑移位.算术移位可参见迅雷深大笔试题部分.的一道题. 以前看到C++标准上说,移位运算符(<<.>>)出界时的行为并不确定: The behavior is undefi ...
- IT技术开发人员获得成功的六大步骤
IT技术开发人士成功的6大步骤 一个前辈在移民加拿大后写的文章,写得不错,值得借鉴,转来给大家看看,也给自己 序言:经过001多年的洗礼,认识了这里这么多的JJMMGGDD,前几天刚得到签证, 无 ...
- Java--Exchanger用于进行线程间的数据交换
package com; import java.util.concurrent.Exchanger; /** * Created by yangyu on 16/11/28. */ /** * Ex ...
- ssh默认端口更改后，如何正常使用git?
由于安全或者其它原因,我们可能会修改默认的SSH服务端口号,默认情况下,已有的git项目在pull或者push的时候会报错. 现在假设原来的项目的remote设置为git@domain.com:Pro ...
- C++之虚函数的作用和使用方法
在同一类中是不能定义两个名字相同.参数个数和类型都相同的函数的,否则就是“重复定义”.但是在类的继承层次结构中,在不同的层次中可以出现名字相同.参数个数和类型都相同而功能不同的函数.例如在例12.1( ...
- 我开发 wangEditor-mobile 的故事
wangEditor-mobile 是一款适用于手机.手指操作的富文本编辑器,wangEditor-mobile 官网 1. 写在前面 其实,我一开始并没有想做什么手机端操作的富文本编辑器. w ...
- ArcGIS Server 开发之鹰眼地图的实现
鹰眼简单点说就是地图的联动,鹰眼的全称是OverviewMap,在ERSI提供的API包中,在dijit中进行类的调用.查了很多的资料,总结一下: 具体的代码: <!DOCTYPE html&g ...
- 12款免费的响应式 WordPress 主题下载
响应式和现代设计风格的多用途 WordPress 主题能够非常灵活的适应所有设备.而高级主题能够更轻松定制,您可以从主题选项中禁用/启用响应模式.多用途的响应式设计的主题是最适合杂志网站,博客网站,想 ...
- JAVASCRIPT实现网页版：俄罗斯方块
HTML+CSS+JS实现俄罗斯方块完整版,素材只有图片,想要的下载图片按提示名字保存,css中用的时候注意路径!!主要在JS中!JS附有详细注释 效果: 按键提示:[键盘按键] 素材:图片名字与代码 ...
- php代码美化/格式化 还原 -问题
使用某个PHP代码格式化的工具.源代码: if ($this->_standardize_newlines == TRUE) { if (strpos($str, "\r") ...