react學習筆記1

# 一、hello worldjavascript

 

學習一個語言,最好的方式,咱們須要去官網去查看文檔(https://facebook.github.io/react),經過JSFiddle,即可以看到最簡單的demo.
目前爲止最新版本爲15.3.0,後續沒有特別說明,咱們都是基於該版本。html

 

 

<!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
  - 須要插入的節點。
+ 傳參,「蒼老師」java

# 二、事件react

 

<!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...)注意接觸是分號git

相關文章
相關標籤/搜索