React仮想DOM概念
Reactでは、レンダーが実行した結果得られたのは本当のDOMノードではなく、結果はライト級のJavaScriptオブジェクトだけで、私たちはvirtual DOMと呼んでいます.
DOM操作に比べて、js計算はとても安いです.JSベースのvirtual DOMは、そのままリセットしたDOMに比べて効率が向上しました.Reactでは、ノードの内容を変更し、現在のノードのみをレンダリングし、DOMツリー全体をリセットしません.
Reactコンポーネント
コンポーネントはReactの中の主要な特性です.ページの異なる部分を別々のコンポーネントに分けて単独開発することは、モジュール開発にとって重要な意義を持つ.同時に、1つのコンポーネントは、異なるページに多重化され、向上されたコードの再使用性および維持可能な行を有してもよい.
コンポーネントの作成
まず、npmでReactを使用することを提案します.webpackはReact DOMをインストールして、あなたのバッグを構築します.npm install-save react-dom babel-preset-react$webpackは注意してください.もしあなたがES 2015を使っているなら、babel-prest-es 2015パッケージを使います.
一つのコンポーネントはReactによって宣言されたクラスで、具体的なプロセスは以下の通りです.まず「React」モジュールを導入します.import React from'react'

import React from 'react';
export default class ComponentExample extends React.Component {
    render() {
        return (
            
Hello World
        )
}

このように、外部で使用できる簡単なReactコンポーネントを定義します.「Component Example」は定義されたコンポーネント名であり、「export default」というキーワードは、このコンポーネントが外部から引用され、他のコンポーネントとして形式的に使用されることを定義しています.たとえば:

import ComponentExample '  ';
class Index extends React.Component {

    render() {
        return (
               

                  
                  
Hi, Maggie
              
        )
    }
}

Component Exampleをimportキーで導入すると、サブコンポーネントとしてIndexコンポーネントに組み込まれます.
Reactマルチコンポーネントネスト
Indexコンポーネントを例にとる.もし私たちが定義したとしたら、この二つのコンポーネントはIndexコンポーネントによって使用できます.

class Index extends React.Component {

    render() {
        return (
               

                  
                  
              
        )
    }
}

ここで注意したいのは、コンポーネントのreturn関数から戻るHTMLノードは必ず一つであることです.したがって、すべてのコンポーネントを一つの外部ノードに含める必要がある.
値の注意点は、コンポーネントの命名規範とファイルの構造化は、チーム開発において非常に重要である.
コンポーネントの入り口の定義
どのようにコンポーネントをHTMLファイルに追加しますか?これはその入口を定義するためにReactDOMが必要である.まず、htmlファイルで入口ノードを作成します.

再以Index节点为例，将其加载到html文件id为“example”的节点中。

var ReactDOM = require('react-dom');
var React = require('react');

class Index extends React.Component {

    render() {
        return (
               

                  
                  
              
        )
    }
}
ReactDOM.render(
    ,
    document.getElementById('example')
);

このようにIndexコンポーネントの内容はhtmlに表示されます.