react 學習與使用記錄

時間 2019-11-18

標籤 react 學習使用記錄欄目 React 简体版

原文原文鏈接

相關技術：webpack+react+react-router+redux+immutablejavascript

郭永峯react學習指南html

1.git bash--windows命令行工具 --教程下載地址java

2. immutable immutable的基礎操做中文基礎操做文章react

2.1 es6運行編譯環境搭建 webpack

3. js建立對象的幾種方法git

4.阮一峯全棧開發教程es6

5.react--apigithub

6.redux-ruanyifeng redux文檔web

疑問點：redux

關於react-router中props傳遞的問題

-----1.className 有多個的時候

　　（1）用拼接字符串的方法

　　　　<div className={value.class + " " + value.class2}>{value.value}</div>

　　　（2）用字符串模板也行

　　　　<div className={`${value.class} ${value.class2}`}>{value.value}</div>

　　　　　　花括號裏面就是能夠運算的部分啊

　　（3）若是是數組的話直接join也行啊

　　　　<div className={classnames.join(" ")}>{value.value}</div>

舉例：<div className={`header ${className || ''}`}>

------------------------------------------------------------

阮一峯 react教程

1.demo1---3 練習

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
  <!-- 不能少逗號，render裏不能加分號 -->
  <!-- ReactDOM.render（）用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。 -->
    <div id="example"></div>
     <div id="aa"></div>
      <div id="bb">
        <!-- 若是這個變量是一個數組，則會展開這個數組的全部成員 注意：字符串要加'',數字不用-->
      </div>
    <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name) {
            return <div>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );

      var ages=['12','45','67','90'];
      ReactDOM.render(
      <div>
        {
        ages.map(function (age){
        return <div>age:,{age}!</div>
        })
        }
      </div>,
      document.getElementById('aa')
      );

var myArray= [
        '12222ggg',
        '3455555ggg',
        '455444ggg'
      ];
var myArrayNum= [
    12222,
    3455555,
    455444
  ];
var myArrayHtml= [
  <h1>1245444</h1>,
  <h2>2222222</h2>,
  <h3>56898</h3>
];
ReactDOM.render(
<div>
 {myArray}
 {myArrayNum}
{myArrayHtml}
</div>,
document.getElementById('bb')
);
    </script>
  </body>
</html>

View Code

2.demo4--5 練習

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example">
      <!-- React.createClass 方法就用於生成一個組件類.
          組件類只能包含一個頂層標籤，不然也會報錯。
       -->
    </div>
    <div id="bb">
      <!-- this.props.children 屬性。它表示組件的全部子節點 -->
      <!--  React.Children.map() 注意大小寫 -->
      <!--  ReactDOM.render() 必須分狀況寫，不能都寫到一個render裏 -->
    </div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
      render: function(){
        return <h3>hello {this.props.name} <a>age:{this.props.age}</a></h3>
      }
      });

      var MoreChilds = React.createClass({
      render:function(){
        return (
        <ul>
          {
          React.Children.map(this.props.children,function(child){
              return <li>{child}</li>
          })
          }
        </ul>
        );
      }
      })

      ReactDOM.render(
      <HelloMessage name="20161206test" age="13"></HelloMessage>,
      document.getElementById('example')
      );
      ReactDOM.render(
      <MoreChilds>
        <span>morechild1</span>,
         <span>morechild2</span>
      </MoreChilds>,
      document.getElementById('bb')
      );

    </script>
  </body>
</html>

View Code

3.demo6 練習

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example">
            <!-- 組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求 -->
    </div>
    <div id="aa">
      <!-- data_12變量直接輸出 -->
    </div>
     <div id="bb">
      <!-- 虛擬 DOM 是拿不到用戶輸入的。爲了作到這一點，文本輸入框必須有一個 ref 屬性，而後 this.refs.[refName] 就會返回這個真實的 DOM 節點。 -->
    </div>
    <script type="text/babel">
      var data = 123;

      var MyTitle = React.createClass({
        propTypes: {
          title: React.PropTypes.string.isRequired,
        },

        render: function() {
          return <h1> {this.props.title} </h1>;
        }
      });
      ReactDOM.render(
        <MyTitle title={data} />,
        document.getElementById('example')
      );

      var data_11 = 12456;
      var MyTitle_11 = React.createClass({
          propTypes:{
          title: React.PropTypes.string.isRequired,
          },
          handleClick:function(){
              this.refs.myTextInput.focus();
          },
          render:function(){
            return (
            <div>
              <h3>{this.props.title}</h3>
              <input type="text" ref="myTextInput" />
              <input type="button" value="Focus the text input" onClick={this.handleClick} />
            </div>
            )
          }
      });
      ReactDOM.render(
        <MyTitle_11 title={data_11} />,
        document.getElementById('bb')
      )

      var data_12 = 'test123';
      ReactDOM.render(
            <h2>{data_12}</h2>,
            document.getElementById('aa')
      )

    </script>
  </body>
</html>

View Code

4.demo8 練習

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
     <div id="bb">
       <!-- getInitialState 得到初始默認狀態；this.setState 方法就修改狀態值 -->
       <!-- onClick={this.handleClick}  點擊調用操做函數handleClick -->
       <!-- 區分方法是，this.props 表示那些一旦定義，就再也不改變的特性，而 this.state 是會隨着用戶互動而產生變化的特性。 -->
     </div>
    <script type="text/babel">
var LikeButton11 = React.createClass({
  getInitialState: function(){
  return {liked:false};
  },
  handleClick:function(){
    this.setState({liked: !this.state.liked});
    console.log("yyyyyy");
  },
  render: function(){
    var text= this.state.liked ? 'like' : 'nononononno';
    return (
    <p onClick={this.handleClick}>
      你 {text} 點擊了切換
    </p>
    );
  }
});

ReactDOM.render(
<LikeButton11 />,
document.getElementById('bb')
);
    </script>
  </body>
</html>

View Code

5.demo9 練習

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <div id="aa">
      <!-- ，文本輸入框的值，不能用 this.props.value 讀取，而要定義一個 onChange 事件的回調函數，經過 event.target.value 讀取用戶輸入的值。textarea 元素、select元素、radio元素都屬於這種狀況 -->
      <!-- function(event) {   //event 不能忘加
            this.setState({value: event.target.value}); //設置值
             var value = this.state.value;  //勿忘定義
          } -->
    </div>
    <script type="text/babel">
        var Input11 = React.createClass({
          getInitialState:function(){
            return {value:'hello111!'};
          },
          handleChange:function(event) {
            this.setState({value: event.target.value});
          },
          render:function(){
            var value = this.state.value;
            return (
              <div>
                <input type="text" value={value} onChange={this.handleChange} />
                <p>{value}</p>
              </div>
            );
          }
        });
    ReactDOM.render(<Input11/>,document.getElementById('aa'));

    </script>
  </body>
</html>