[React] 01 - Intro: javaScript library for building user interfaces

時間 2019-11-07

標籤 react intro javascript library building user interfaces 欄目 React 简体版

原文原文鏈接

教學視頻: http://www.php.cn/code/8217.htmlphp

React 教程: http://www.runoob.com/react/react-tutorial.htmlcss

本篇是菜雞水準瞭解輪廓的難度等級，菜雞啄米，嘰嘰喳喳html

先介紹仨工具：node

Babel: 用於編寫下一代 JavaScript 的編譯器
jspm: 是一個一個瀏覽器端包管理器；SystemJS加載js的模塊，也有Babel編譯js，JSX編譯爲js。jspm & SystemJS 教程react
webpack: WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。什麼是WebPack，爲何要使用它？

建立工程

Ref: https://blog.csdn.net/rical730/article/details/77206601webpack

1. 先安裝：nodejs npmes6

2. 新建一個項目文件夾。web

mkdir React & cd React

3. 使用 create-react-app 快速構建 React 開發環境npm

sudo npm install -g create-react-app
create-react-app my-app

4. 安裝結束segmentfault

cd my-app
npm start

5. 其餘（option）

sudo npm install -g browser-sync
　　Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。
　　更重要的是 Browsersync能夠同時在PC、平板、手機等設備下進項調試。

jspm install semantic-ui 

jspm install css

npm start 時，可見實際執行的是：npm run dev，而dev指得是另外一坨東西。

babel 幫助將es6編譯爲es5，然後執行。

React 特色

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

React JSX

Figure, 可見不適用jsx寫的形式（下面），可讀性不好。

React 使用 JSX 來替代常規的 JavaScript。

JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。

咱們不須要必定使用 JSX，但它有如下優勢：

- JSX 執行更快，由於它在編譯爲 JavaScript 代碼後進行了優化。
- 它是類型安全的，在編譯過程當中就能發現錯誤。
- 使用 JSX 編寫模板更加簡單快速。

代碼實例

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>菜鳥教程 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(           <div>
          <h1>菜鳥教程</h1>
          <h2>歡迎學習 React</h2>
          <p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>　　 // p 元素添加了自定義屬性 data-myattribute，須要使用 data- 前綴。
          </div>　　// 第一個參數
          ,
          document.getElementById('example')　　// 第二個參數
      );    </script>
  </body>
</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" src="helloworld_react.js"></script>　　//　另外存在單獨文件更好
  </body>
</html>

不能 if ... else

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

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

樣式

React 推薦使用內聯樣式。

咱們可使用 camelCase 語法來設置內聯樣式.

React 會在指定元素數字後自動添加 px 。

如下實例演示了爲 h1 元素添加 myStyle 內聯樣式：

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鳥教程</h1>,
    document.getElementById('example')
);

數組

JSX 容許在模板中插入數組，數組會自動展開全部成員：

var arr = [ <h1>菜鳥教程</h1>,
  <h2>學的不只是技術，更是夢想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

React 組件

組件類：開頭大寫React.createClass。

var HelloMessage = React.createClass({　　　　// 組件類 HelloMessage
  render: function() {
    return <h1>Hello World！</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

傳參數：向組件傳遞參數，可使用 this.props 對象,實例以下：

var HelloMessage = React.createClass({ render: function() {
    return <h1>Hello {this.props.name}</h1>;　　　// name 屬性經過 this.props.name 來獲取。
  }
});
 
ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById('example')
);

複合組件：建立多個組件來合成一個組件，把組件的不一樣功能點進行分離。

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});
 

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
 

ReactDOM.render(
  <WebSite name="菜鳥教程" site=" http://www.runoob.com" />,
  document.getElementById('example')
);

React State(狀態)

React 把組件當作是一個狀態機（State Machines）。經過

- 與用戶的交互，實現不一樣狀態，
- 而後渲染 UI，讓用戶界面和數據保持一致。

根本思想：React 裏，只需更新組件的 state，而後根據新的 state 從新渲染用戶界面（不要操做 DOM）。

例子：建立了 LikeButton 組件

1. getInitialState 方法用於定義初始狀態，也就是一個對象，這個對象能夠經過 this.state 屬性讀取。

2. 當用戶點擊組件，致使狀態變化，this.setState 方法就修改狀態值，

3. 每次修改之後，自動調用 this.render 方法，再次渲染組件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>菜鳥教程 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">
      var LikeButton = React.createClass({
        getInitialState: function() {　　　　　　　　　　　// 1 定義初始狀態，也就是一個對象
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});　　// 2 有點擊事件，就改變狀態：setState ----> render func
        },
        render: function() {                           // 3 渲染組件，
          var text = this.state.liked ? '喜歡' : '不喜歡';
          return (
            <p onClick={this.handleClick}>
              你<b>{text}</b>我。點我切換狀態。
            </p>
          );
        }
      });

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

</html>

React Props

props 是不可變的：子組件只能經過 props 來傳遞數據

state 能夠根據與用戶交互來改變：有些容器組件須要定義 state 來更新和修改數據。

var HelloMessage = React.createClass({
  getDefaultProps: function() {
    return {
      name: 'Runoob'
    };
  },
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

分離的例子：（其實就是複合組件）

---------------------------------------------------------------
# 定義一個大組件

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "菜鳥教程",
      site: "http://www.runoob.com"
    };
  },

  render: function() {　　　　// 1.0 在render函數中, 咱們設置 name 和 site 來獲取父組件傳遞過來的數據
    return (
      <div>
        <Name name={this.state.name} />　　　　　　// 在父組件中設置 state
        <Link site={this.state.site} />
      </div>
    );
  }
});

---------------------------------------------------------------
# 定義大組件中的兩個小組件

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>　　　　　　　　　　// 2.1 在子組件上使用 props 將其傳遞到子組件上
    );
  }
});
 

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}　　　　　　　　　　　　　　// 2.2 在子組件上使用 props 將其傳遞到子組件上
      </a>
    );
  }
});
 
---------------------------------------------------------------

ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

Props 驗證

實例建立一個 Mytitle 組件，屬性 title 是必須的且是字符串，非字符串類型會自動轉換爲字符串：

var title = "菜鳥教程"; // var title = 123;　　<---- 非字符串類型會自動轉換爲字符串  var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle title={title} />, document.getElementById('example') );

更多驗證器說明以下：

React.createClass({
  propTypes: {
    // 能夠聲明 prop 爲指定的 JS 基本數據類型，默認狀況，這些數據是可選的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 能夠被渲染的對象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操做符聲明 prop 爲類的實例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 來限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 能夠是多個對象類型中的一個
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定類型組成的數組
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定類型的屬性構成的對象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 參數的對象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意類型加上 `isRequired` 來使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意類型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定義驗證器。若是驗證失敗須要返回一個 Error 對象。不要直接使用 `console.warn` 或拋異常，由於這樣 `oneOfType` 會失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

獲取自定義組件的屬性 - this.props.children

在render中，Child有了屬性children，天然地，獲取時就使用this.props.children。

this.props 對象的屬性與組件的屬性一一對應，可是有一個例外，就是 this.props.children 屬性。

它表示組件的全部子節點：【全部子節點可能有三種不一樣的狀況】

若是當前組件沒有子節點，它就是 undefined ;
若是有一個子節點，數據類型是 object ；
若是有多個子節點，數據類型就是 array 。【這個是正常狀況】

var HelloWorld = React.createClass({
     render:function(){
        return (
             <ul>
              {
                   React.Children.map(this.props.children, function (value, key) {　　// 1. 獲取子節點 return <li>{value}----{key}</li>;                          // 2. 以怎樣的html形式展示
                   })
               }
             </ul>
        );
     }
 });
 ReactDOM.render(
   <HelloWorld>
     <span>思考思考</span>
     <span>瞬間即逝</span>
     <span>阿達瓦得</span>
   </HelloWorld>,
   document.getElementById('root'));

Result: 
思考思考—-0 
瞬間即逝—-1 
阿達瓦得—-2

相關標籤/搜索

每日一句

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