# 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的更多相关文章

  1. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  2. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  3. React学习笔记（一）- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  4. React学习笔记（七）条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  5. React学习笔记（六）事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  6. React学习笔记（五）State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  7. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  8. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  9. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  10. React学习笔记 - Hello World

    React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...

随机推荐

  1. WinForm 多窗体操作

    1多窗体操作:确定哪个是主窗体 通过窗体进入其他窗体 代码如下 Form2 f2 = new Form2();//f2窗体实例化出来 f2.Show();//进入f2窗体 this.Hide();// ...

  2. unity3d引擎的学习

    1.在project里面建立一个Editor文件夹,并在其下面放置配置某个游戏物体X的脚本,就可以在游戏物体那一栏里面新建该游戏物体X. 2.将一个游戏物体B放到某个游戏物体F下,点击Reset po ...

  3. linq 实现动态 orderby

    class Pet { public string Name{get;set;} public int Age{get;set;} } void Main() { Pet[] pets = { }, ...

  4. C#的变迁史 - C# 3.0篇

    C# 3.0 (.NET 3.5, VS2008) 第三代C#在语法元素基本完备的基础上提供了全新的开发工具和集合数据查询方式,极大的方便了开发. 1. WPF,WCF,WF 这3个工程类型奠定了新一 ...

  5. sql中 in , not in , exists , not exists效率分析

    in和exists执行时,in是先执行子查询中的查询,然后再执行主查询.而exists查询它是先执行主查询,即外层表的查询,然后再执行子查询. exists 和 in 在执行时效率单从执行时间来说差不 ...

  6. jquery内容选择器（匹配包含指定选择器的元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. ajax跳转传参

  8. php中数组遍历改值

    <?php $arr = array(100, 99, 88, 77, 55, 66); //方法1 foreach ($arr as &$v) { $v = 2; } print_r( ...

  9. Selenium学习笔记之外部化相关测试数据---xml

    我们也可以用xml来定义一个信息更为丰富的UIMap.xml文件,比如,额外还添加控件所属的页,控件的类型,然后解析构建一个XMLParser类来读取相应的值. <?xml version=&q ...

  10. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...