React 推薦以元件的方式去重新思考 UI 構成，將 UI 上每一個功能相對獨立的模組定義成元件，然後將小的元件通過組合或者巢狀的方式構成大的元件，最終完成整體 UI 的構建。

下面是一個簡單的元件化例子：

index.html

<div id='container'></div>
<script src='./src/bundle.js'></script>

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Body from './components/body';
import Header from './components/header';
import Footer from './components/footer';

class Index extends Component {
  render(){
    return(
      <div>
        <Header/>
        <Body/>
        <Footer/>
      </div>
    )
  }
}

ReactDOM.render(
  <Index/>,
  document.getElementById('container')
);
 

body.js

import React, { Component } from 'react';

export default class Body extends Component {
  render(){
    return(
      <div>Body</div>
    )
  }
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: __dirname + '/src',
  entry: './js/index.js',
  module: {
    loaders: [{
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  output: {
    path: __dirname + '/src/',
    filename: 'bundle.js' 
  }
}