# 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. 15天玩转redis —— 第六篇 有序集合类型

    今天我们说一下Redis中最后一个数据类型 “有序集合类型”,回首之前学过的几个数据结构,不知道你会不会由衷感叹,开源的世界真好,写这 些代码的好心人真的要一生平安哈,不管我们想没想的到的东西,在这个 ...

  2. 精品干货丨APP常用导航框架

    文章目的:在整体上把握移动端App的导航框架,理解每种导航所具有的优点.局限性和其所适用的范围. 文章用心:典型APP案例(源码:http://www.jinhusns.com/Products/Do ...

  3. C# WebClient 使用http免费代理。

    static void Main(string[] args) { WebClient client = new WebClient(); client.Encoding = Encoding.Get ...

  4. SQL（触发器）

    触发器语法格式(实例): ALTER TRIGGER tri_edituserON dbo.sys_UserFOR INSERT,UPDATE,DELETEAS BEGIN ---判断是新增?修改?删 ...

  5. ListActivity的使用

    Android中经常用到列表,ListActivity是实现列表的一种好方法. 使用ListActivity的方法,首先定义布局文件: <?xml version="1.0" ...

  6. Cygwin的安装

    Android开发要用到NDK,装了一个虚拟机,老是不行. 后来安装了一个cygwin,安装完毕后unset home,再export NDK,就可以使用了,非常方便,不用像虚拟机那样经常切换.

  7. Java并发编程：synchronized

    Java并发编程:synchronized 虽然多线程编程极大地提高了效率,但是也会带来一定的隐患.比如说两个线程同时往一个数据库表中插入不重复的数据,就可能会导致数据库中插入了相同的数据.今天我们就 ...

  8. IOS 2D游戏开发框架 SpriteKit

    最近发现Xcode自带的2D游戏开发框架SpriteKit可以直接引入到APP中进行混合开发,这就是说可以开发出既带业务应用又带游戏的苹果APP,咋怎么觉得这是一个自己的小发现....呵呵....., ...

  9. 【USACO】DP动态规划小测（一）

    {20160927 19:30~21:30} 总分400分,我113.33,稳稳地垫底了......(十分呼应我上面的博客名,hhh~)过了这么多天我才打完所有代码,废话我也就不多说了.不过,虽然时间 ...

  10. Spring面试基本问题(1)

    1.什么是Spring框架?Spring框架有哪些主要模块? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台.Spring帮助开发者解决了开发中基础性的问题, ...