ECMAScriptreact学习笔记一

# 1、hello world

 

学习1个语言,最棒的主意,我们要求去官方网址去查看文档(https://facebook.github.io/react),通过JSFiddle,便可以看到最简单的demo.
方今停止最新版本为一五.叁.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,你能够选拔ES20一伍(javascript下一代标准ECMAScript
    六)实行编码。假使你用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>    看我消失~~!</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} /> 
            {this.state.inputVal}
          </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
    ECMAScript,  - 接受参数为虚拟dom节点this.refs.xxx
      - ref=”xxx”(小编一时半刻精晓为id)
  • 状态
      - 状态起初化 getInitialState:fn(){return {xxx:”初叶化”}}
      - 改造状态 setState({xxx:”退换后的意况”})
  • 创设组件虚拟dom的构造,一行突显为1坨,很恶心
      - 放在小括号内 (虚拟dom…)注意接触是分号