ECMAScriptreact学习笔记1

# 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>    看我消失~~!</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
      - 接受参数为虚拟dom节点this.refs.xxx
      - ref=”xxx”(我暂时理解呢id)
  • 状态
      - 状态初始化 getInitialState:fn(){return {xxx:”初始化”}}
      - 改变状态 setState({xxx:”改变后底状态”})
  • 创组件虚拟dom的布局,一行显示也平垛,很恶心
      - 放在小括哀号内 (虚拟dom…)注意点是分号