# 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. Web API应用架构设计分析(2)

    在上篇随笔<Web API应用架构设计分析(1)>,我对Web API的各种应用架构进行了概括性的分析和设计,Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端 ...

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

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

  3. JAVA中的GC机制详解

    优秀Java程序员必须了解的GC工作原理 一个优秀的Java程序员必须了解GC的工作原理.如何优化GC的性能.如何与GC进行有限的交互,因为有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只 ...

  4. 一些ajax代码

    $.ajax({ type : "get", url : "list_hot_ajax.json", data : {"provinceId" ...

  5. jQuery cbpContentSlider 滑动切换

    cbpContentSlider是一款选项卡插件,只要按照以下html结构就可以自动生成菜单切换内容特效. 在线实例 实例演示 使用方法 <div id="cbp-contentsli ...

  6. 使用 WordPress 插件模板开发高质量插件

    WordPress 插件样板是标准化的,有组织的,面向对象的基础,用于构建高品质的 WordPress 插件.样板遵循编码标准和文件标准,所以你不必自己学习这些,根据注释编写代码即可. 官方网站    ...

  7. 使用nodejs+express+socketio+mysql搭建聊天室

    使用nodejs+express+socketio+mysql搭建聊天室 nodejs相关的资料已经很多了,我也是学习中吧,于是把socket的教程看了下,学着做了个聊天室,然后加入简单的操作mysq ...

  8. [deviceone开发]-do_RichLabel的简单示例

    一.简介 do_RichLabel支持html格式的文本内容,但是只支持部分标签,这个示例列出了一些支持的常用标签,android能支持的标签相对ios更少 二.效果图 三.相关下载 https:// ...

  9. angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了

    一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...

  10. loading插件(原创)

    前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了.良心之作啊,难度虽不高,但命名多文件多啊.我得马上写篇博客絮叨一下,直接上地址. 文档及下载地址:www.chenggu ...