# 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. Oracle Error - "OCIEnvCreate failed with return code -1 but error message text was not available".

    ISSUE: When trying to connect to an Oracle database you receive the following error: "OCIEnvCre ...

  2. Lesson: The "Hello World!" Application

    Lesson: The "Hello World!" Application The sections listed below provide detailed instruct ...

  3. SQL Pretty Printer-不错的SQL格式化工具

    前言 好长时间没有写过博客了,人变懒了很多,应该说本来也不怎么勤快.但今天为了这个工具,必须得勤快一下了,天下真的没有免费的午餐. 之前使用过sql server 2000的查询设计器和Toad fo ...

  4. Android使用SQLite数据库(3)

    插入新数据到SQLite数据库,首先定义一个ContentValues变量,然后使用put方法: public void put (String key, String value) 其中key是字段 ...

  5. How to Access MySQL with Python Version 3.4

    http://askubuntu.com/questions/630728/how-to-access-mysql-with-python-version-3-4 How to Access MySQ ...

  6. win7系统旗舰版path

    %SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShel ...

  7. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  8. 15款最好的 jQuery Modal（模态窗口）插件

    jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...

  9. 【CSS3】CSS3：border-image的详解和实例

    border-image简介 border-image是CSS3中的新特性.目前几乎所有的主流浏览器都已经支持该特性,详情请移步border-image的兼容性. border-image属性及使用说 ...

  10. 推荐几个jQuery插件

    jQuery仿京东无限级菜单HoverTree http://www.cnblogs.com/jihua/p/hvtree.html 多级弹出菜单jQuery插件ZoneMenu http://www ...