React(1)

時間 2019-11-10

標籤 react 欄目 React 简体版

原文原文鏈接

React入門

                                 React 是一個用於構建用戶界面的 JAVASCRIPT 庫。有如下特色：
   1.聲明式設計 −React採用聲明範式，能夠輕鬆描述應用。
   2.高效 −React經過對DOM的模擬，最大限度地減小與DOM的交互。
   3.靈活 −React能夠與已知的庫或框架很好地配合。
   4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不必定使用 JSX ，但速度快。
   5.組件 − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。
   6.單向響應的數據流 − React 實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。css

Hello world例子:html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

實例中咱們引入了三個庫： react.min.js 、react-dom.min.js 和 babel.min.js：
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
babel.min.js - Babel 能夠將 ES6 代碼轉爲 ES5 代碼，這樣咱們就能在目前不支持 ES6 瀏覽器上執行 React 代碼。Babel 內嵌了對 JSX 的支持。經過將 Babel 和 babel-sublime 包（package）一同使用可讓源碼的語法渲染上升到一個全新的水平。react

JSX語法:瀏覽器

ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );

上述代碼爲獲取id 爲example的標籤添加render裏寫的html標籤或者執行jsbabel

props -> properties 屬性們
render -> 渲染
ReactDom.render(實例化的組件，要渲染到得對象)框架

咱們能夠在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。以下：dom

ReactDOM.render(
    <div>
      <h1>{alert(1)}</h1>
    </div>
    ,
    document.getElementById('example')
);

在 JSX 中不能使用 if else 語句，但可使用 conditional (三元運算) 表達式來替代。this

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

React 推薦使用內聯樣式。咱們可使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字後自動添加 px ：spa

var style = {
   background-color: blue;
};
ReactDOM.render(
    <h1 style = {style}>hello</h1>,
    document.getElementById('example')
);

React 經過React.createClass新建組件，若是咱們須要向組件傳遞參數，可使用 this.props 對象：設計

var HelloWorld = React.createClass({
  render: function() {
    return <h1>Hello {this.props.world}！</h1>;
  }
});
 
ReactDOM.render(
  <HelloWorld world="World"/>,
  document.getElementById('example')
);

React 複合組件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example" style="background-color: blue"></div>
    <script type="text/babel">
        var Item = React.createClass({
  render: function() {
    return (
      <h1>{this.props.item}</h1>
    );
  }
});

var Pic = React.createClass({
  render: function() {
    return (
      <img src={this.props.src}/> 
    );
  }
});


var List = React.createClass({
  render: function() {
    return (
      <div>
        <Item item={this.props.item} />
        <Pic src={this.props.src} />
      </div>
    );
  }
});

          
      ReactDOM.render(
        <List item="hello react" src="http://www.ruanyifeng.com/blogimg/asset/2016/bg2016021201.png"></List>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

React 把組件當作是一個狀態機（State Machines）。經過與用戶的交互，實現不一樣狀態，而後渲染 UI，讓用戶界面和數據保持一致。
React 裏，只需更新組件的 state，而後根據新的 state 從新渲染用戶界面（不要操做 DOM）。
如下實例中建立了 LikeButton 組件，getInitialState 方法用於定義初始狀態，也就是一個對象，這個對象能夠經過 this.state 屬性讀取。當用戶點擊組件，致使狀態變化，this.setState 方法就修改狀態值，每次修改之後，自動調用 this.render 方法，再次渲染組件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var LikeButton = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});
        },
        render: function() {
          var text = this.state.liked ? '喜歡' : '不喜歡';
          return (
            <p onClick={this.handleClick}>
              你<b>{text}</b>我。點我切換狀態。
            </p>
          );
        }
      });

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

相關標籤/搜索

react1

React

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。