React

組件開發入門

Introduction

React由Facebook的程序員創建，是一個非常強大的javascript類庫。
一個很大的賣點是virtual DOM機制，在DOM操作的性能上有較大的優勢。
React社區常常介紹它爲MVC架構中的“V”，雖說如此，如果將React與Flux(以後將會介紹)結合，我們就可以輕鬆實現M與V的同步。

Components

通過React，我們可以專注於可複用的組件開發，比如：一個下拉導航欄組件，一個功能齊全的數據表格。React中，像CommonJs標準中一樣，React的組件與組件也能良好隔離，可以隨意的在組件內部增加功能。
所有的React組件都需要實現一個函數: render，我們可以通過它，返回HTML或者調用其它的組件。正是這個基本的功能，給React帶來了無限可能。

JSX

如果你曾經看過React相關的信息，那可能會對一個名詞印象比較深刻：JSX。JSX使js無需""的包裝，編寫各類html tag。使得我們可以更快速的開發React組件(考慮到多行問題，在js中寫HTML原本還是很麻煩的)。
我們可以藉助一個js庫，在瀏覽器中將JSX轉換爲js，但這不是推薦的做法，本文介紹瞭如何通過webpack在本地實現JSX到js的轉換，使得瀏覽器不用解決這一問題。

Using JSX

render扮演着"ViewModel"的角色，在我們返回HTML信息前，將Model注入View，並加入各類js邏輯。
現在，我們新建一個目錄，建立以下文件

index.html
entry.js
webpack.config.js

藉助npm與bower我們可以快速下載依賴項

npm init   
npm install babel-loader --save
bower install react   
bower init

以下是index.html的內容，藉助webpack，我們可以不用再修改它，就完成本示例了。

<html>
    <head>
        <meta charset="utf-8">
        <title>react demo</title>  
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

以下是webpack配置內容

module.exports = {
  entry: "./entry.js",
  output:{
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
  loaders: [
    {
      test: /\.js?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel'
    }
  ]}
}

配置做好了，讓我們開始第一個JSX。

var React = require("./bower_components/react/react.js");

var Widget = React.createClass({
  render:function(){
    return(
    <div>
      <h1>React with webpack</h1>
    </div>);
  }
});

React.render(<Widget />, document.body);

運行指令

webpack -w

可以看到如下結果：

Using variables for attributes

如前文所說，React組件裏可以加入任意的js邏輯，我們可以把剛纔的JSX改成這樣：

var Widget = React.createClass({
  render:function(){
    var text = "React with webpack";
    return(
    <div>
      <h1>{text}</h1>
    </div>);
  }
});

Basics of a component

組件可以維護自己作用域下的各類狀態值。使我們得以複用各類組件。
當我們通過向組件的attributes傳值時，他們會作爲properties而引用。這句話可能不好理解，我們看下代碼：

var Widget = React.createClass({
  render:function(){
    var text = "";
    return(
    <div>
      <h1>{this.props.displayText}</h1>
    </div>);
  }
});

React.render(<Widget displayText="React with webpack"/>, document.body);

State

properties適合用在一次渲染，不需要改變的組件場景。在狀態需要動態改變的場合，我們會用到state。通過this.setState 函數以改變狀態值，之後，組件會重新渲染(藉助virtual DOM機制，這一部分還是蠻快的)。以下是Demo

var Widget = React.createClass({
  getInitialState: function(){
    return{
      number: 0
    };
  },
  increment: function(){
    this.setState({
      number: this.state.number + 1
    });
  },
  render: function(){
    return(
    <div>
      <h1>{this.state.number}</h1>
      <button onClick={this.increment}>Inc</button>
    </div>);
  }
});

顯示的數字將伴隨按鈕點擊上升。

The component lifecycle

所有的組件都是有生命週期的，這無疑爲我們開發提供了很大的便利。比如剛纔例子中的getInitialState，只會在控件裝載(mount)後，調用一次。當然還有其它的生命週期函數：
componentWillMount在組件即將裝載前調用，可以把Ajax放這。
componentDidMount在組件已經被渲染出了DOM後調用，這時，我們可以藉助this.getDOMNode取到跟節點，做一些後續工作。
componentWillUnmount組件被移除時，相關資源的清理工作，就得在這裏(如移除EventHandler，若EventHandler操作了不存在的組件，error自然就被拋出)。

Component Methods

通過getDefaultProps，我們可以爲properties提供默認值，即當properties沒有通過attributes傳入，這些默認值會派上用場。

var Widget = React.createClass({
  getDefaultProps: function(){
    return{
      number: 10
    };
  },
  render: function(){
    return(
    <div>
      <h1>{this.props.number}</h1>
    </div>);
  }
});

React.render(<Widget/>, document.body);

React並不提倡提供過多的模版功能，它提倡的是迴歸原始，比如：當我們需要用到repeater。我們可以這樣：

var Widget = React.createClass({
  render: function(){
    var data =[1,2,3,4]; //請假設這是有用數據
    var content = data.map(function(item){
      return (<h2>{item}</h2>)
    });
    return(
    <div>
      <h1>{content}</h1>
    </div>);
  }
});

React

組件開發入門

Introduction

本文組成：

Ryan Clark文章Getting started with React的翻譯。
博主的實踐心得。

React由Facebook的程序員創建，是一個非常強大的javascript類庫。
一個很大的賣點是virtual DOM機制，在DOM操作的性能上有較大的優勢。
React社區常常介紹它爲MVC架構中的“V”，雖說如此，如果將React與Flux(以後將會介紹)結合，我們就可以輕鬆實現M與V的同步。
在本文中，將會用到博主前兩天介紹的webpack。以下是博文鏈接：
webpack 學習筆記 01 使用webpack的原因
 webpack 學習筆記 02 快速入門

Components

JSX

Using JSX

render扮演着"ViewModel"的角色，在我們返回HTML信息前，將Model注入View，並加入各類js邏輯。
現在，我們新建一個目錄，建立以下文件

index.html
entry.js
webpack.config.js

藉助npm與bower我們可以快速下載依賴項

npm init   
npm install babel-loader --save
bower install react   
bower init

以下是index.html的內容，藉助webpack，我們可以不用再修改它，就完成本示例了。

<html>
    <head>
        <meta charset="utf-8">
        <title>react demo</title>  
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

以下是webpack配置內容

module.exports = {
  entry: "./entry.js",
  output:{
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
  loaders: [
    {
      test: /\.js?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel'
    }
  ]}
}

配置做好了，讓我們開始第一個JSX。

var React = require("./bower_components/react/react.js");

var Widget = React.createClass({
  render:function(){
    return(
    <div>
      <h1>React with webpack</h1>
    </div>);
  }
});

React.render(<Widget />, document.body);

運行指令

webpack -w

可以看到如下結果：

Using variables for attributes

如前文所說，React組件裏可以加入任意的js邏輯，我們可以把剛纔的JSX改成這樣：

var Widget = React.createClass({
  render:function(){
    var text = "React with webpack";
    return(
    <div>
      <h1>{text}</h1>
    </div>);
  }
});

Basics of a component

var Widget = React.createClass({
  render:function(){
    var text = "";
    return(
    <div>
      <h1>{this.props.displayText}</h1>
    </div>);
  }
});

React.render(<Widget displayText="React with webpack"/>, document.body);

State

var Widget = React.createClass({
  getInitialState: function(){
    return{
      number: 0
    };
  },
  increment: function(){
    this.setState({
      number: this.state.number + 1
    });
  },
  render: function(){
    return(
    <div>
      <h1>{this.state.number}</h1>
      <button onClick={this.increment}>Inc</button>
    </div>);
  }
});

顯示的數字將伴隨按鈕點擊上升。

The component lifecycle

Component Methods

通過getDefaultProps，我們可以爲properties提供默認值，即當properties沒有通過attributes傳入，這些默認值會派上用場。

var Widget = React.createClass({
  getDefaultProps: function(){
    return{
      number: 10
    };
  },
  render: function(){
    return(
    <div>
      <h1>{this.props.number}</h1>
    </div>);
  }
});

React.render(<Widget/>, document.body);

React並不提倡提供過多的模版功能，它提倡的是迴歸原始，比如：當我們需要用到repeater。我們可以這樣：

var Widget = React.createClass({
  render: function(){
    var data =[1,2,3,4]; //請假設這是有用數據
    var content = data.map(function(item){
      return (<h2>{item}</h2>)
    });
    return(
    <div>
      <h1>{content}</h1>
    </div>);
  }
});

吊炸天的react入門教學

React

組件開發入門

Introduction

Components

JSX

Using JSX

Using variables for attributes

Basics of a component

State

The component lifecycle

Component Methods

React

組件開發入門

Introduction

Components

JSX

Using JSX

Using variables for attributes

Basics of a component

State

The component lifecycle

Component Methods

吊炸天的react入門教學

PubSub模式簡單實現

簡單說一說排序算法

怎麼做出牛逼的二維碼圖片？

簡單說一說數據結構——棧

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結