Reactコンポーネント

3883 ワード

React.js入門基礎とケーススタディby ParryKK in imooc.com学習ノート
React使用

React



  Hello

をロード
Reactコンポーネント

コンポーネント

// index.js
var React = require('react')
var ReactDOM = require('react-dom')

class Index extends React.Component {
  render() {
    Hello World!!!
  }
}

// React     
ReactDOM.render(
  ,                          //   Index   
  document.getElementById('main')     //     index.html    main   
);

コンポーネント

// ComponentName.js
var React = require('react')

//        export      
export default class ComponentName extends React. Component {
  render() {
        
  }
}

コンポーネント

//          .js    
import ComponentName from './ComponentName';

コンポーネントのreturn がすHTMLノードは、1つの

しかないがあります.
Reactコンポーネントのライフサイクル

| component instantiated   | props changed                 | setState()                              | component deleted
|------------------------  |---------------                |------------                             |-------------------
|                          |                               |                                         |
|                          |                               |                                         |
| getDefaultProps()        | componentWillReceiveProps()   |                                         |
|-------------------       |-----------------------------  |                                         |
|                          |                               |                                         |
|                          |                               | [setState() doesn't trigger re-render]  |
|                          |                               |                                         |
| getInitialState()        | shouldComponentUpdate() |-----|                                         |
|-------------------       |--------------------------                                               |
|                          |                                                                         |
|                          | [true]                                                                  |
|                          |                                                                         |
|--------------------------|                                                                         |
|                                                                                                    |
| render() |---------------|                                                                         |
|-----------               |                                                                         |
|                          |                                                                         |
|                          |                                                                         |
| [First time]             | [After first time]                                                      |
|                          |                                                                         |
|                          |                                                                         |
| componentWillMount()     | componentWillUpdate()                                                   | componentWillUnmount()
|----------------------    |-----------------------                                                  |------------------------
|                          |
|                          |
| componentDidMount()      | componentDidUpdate()
|---------------------     |----------------------

Linuxワイヤレスネットワークへの接続方法

[Linux]RHEL DSNとDHCPを使用