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(
        <Header/>
        <Body/>
        <Footer/>
ReactDOM.render(
  <Index/>,
  document.getElementById('container')
body.js
 
import React, { Component } from 'react';
export default class Body extends Component {
  render(){
    return(
      <div>Body</div>
}
（与header.jsfooter.js相同） 
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' 
}
然后在项目目录下执行 webpack 后用浏览器打开 index.html 即可 
                    React 推荐以组件的方式去重新思考 UI 构成，将 UI 上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体 UI 的构建。下面是一个简单的组件化例子：index.htmlindex.jsimport React, { Component } from 'react';import ReactDOM from '
				
我们终要远行，最终告别稚嫩的自己。
使用React来构建web应用，每个页面都将是多个组件组成，并且相互嵌套来构成的，接下来就学习下组件的嵌套。一、组件嵌套：
  背景交代： 
  1、创建一个html，包含引用的相关js、需要被渲染的div； 
  2、创建一个有label与input标签组成的简单组件 — IvanInput，并可以通过传入数组来渲染多组label与input标签，拥有不同的la
				
在了解了react基础之后，很多初学者对于react的组件如何嵌套存在疑问，今天我来统一进行回复，react组件分为函数型组件和类组件，今天以类组件为例进行演示。
1.首先第一步要创建项目,具体内容可查看上一篇 <React脚手架的安装与使用以及React基础语法> 内容。
2.删除掉react初始化的src内部文件,仅留下index.js和App.js,删除掉public目录下除index.html以外的文件。(忽略Next.js文件,不需要加)
项目结构如下
3.index.js文件内容
				
一、组件输出输出组件表达式{{}}不仅能输出数据，也能直接输出元素class App extends React.Component{
    constructor(...args){
        super(...args)
    render(){
        let span=<span>测试一下</span>
        return{
				
React组件的组合是指：将一个组件写在另一个组件的内容中，然后在外层组件中通过 this.props.children来接收内容中的组件， 效果上类似vue中的插槽。
App.js
import React, { Component } from "react";
import NavBar from "./NavBar";
export default class App extends Component {
	render() {
		return (
&lt;html&gt;
&lt;head&gt;
  &lt;script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://
├── component                  # 公共组件存放
├   ├── example                
├   ├  ├── example1.ts             # 例子1
├   ├  ├── example2.ts             # 例子2
├   ├  ├── example3.ts             # 例子...