# 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. JQuery新闻滚动的实现方法（常用笔记1）

    .mouseover() //经过子元素也会触发 .mouseenter() //经过被选元素才会触发 .mouseout() //离开子元素也会触发 .mouseleave() //离开被选元素才会 ...

  2. c# TCP Socket通讯基础

    在做网络通讯方面的程序时,必不可少的是Socket通讯. 那么我们需要有一套既定的,简易的通讯流程. 如下: <pre name="code" class="csh ...

  3. 用js解析经json序列化后的C#的DateTime类型数据

    格式化日期(网上到处是),把下面的代码添加到jQuery.js文件中 //格式化日期 Date.prototype.format = function(format) { /* * eg:format ...

  4. Sqlserver2005日志文件太大,使其减小的方法

    Sqlserver2005日志文件太大,使其减小的方法: 运行下面的三行 dbName为数据库名: backup log dbNamewith NO_LOG backup log dbNamewith ...

  5. CSS使图片变灰

    为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...

  6. 将文本文件(txt)的内容导入到Excel和SQL

    这两天网络上流传14w条12306账号信息的txt文档,下载下来之后发现在txt文档中看和查询内容都不是很方便. 这里我就记录下如何将txt文档导入到excel和SQL的过程. 导入到excel 1. ...

  7. Using Stored Programs with MySQLdb

    http://flylib.com/books/en/1.142.1.125/1/ Using Stored Programs with MySQLdb The techniques for call ...

  8. EventBus简单的实现

    EventBus是最近项目用到的,也只是会些简单的功能,不过感觉功能蛮强大的.代码链接:http://download.csdn.net/detail/qq_29774291/9629346 Even ...

  9. 转：python signal信号

    转自:http://www.jb51.net/article/74844.htm 在liunx系统中要想每隔一分钟执行一个命令,最普遍的方法就是crontab了,如果不想使用crontab,经同事指点 ...

  10. python 学习笔记9（面向对象）

    面向过程.函数式.面向对象 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象(Object Oriented Programmin ...