react+webpack入门（2）

这一篇将在上一篇的基础上做修改，不太清楚的朋友可以看这里：http://blog.csdn.net/mafan121/article/details/71425526

首先，在components文件夹下创建ContentTest.js文件，文件内容如下：

import React from 'react';

export default class ContentTest extends React.Component{
    render(){
        return (
            <div>oh,my second test is successfully! </div>
        )
    }
}

如果编辑器报错，不能使用import的话，可以修改编辑器的配置：File->setting->Languages&Feameworks->JavaScript

其次，修改entry.js的内容为：

import React from 'react';
import ReactDOM from 'react-dom';
import ContentTest from './components/ContentTest.js';


ReactDOM.render(
    <ContentTest />,
    document.getElementById('example')
);

最后，执行项目， npm run dev

项目结构图：

结合HolloTest和ContentTest组件

新建一个DemoApp.js,内容如下：

import React from 'react';
import HolloTest from './HolloTest.js';
import ContentTest from './ContentTest.js';

export default class DemoApp extends React.Component{
    render(){
        return (
            <div>
                <HolloTest/>
                <ContentTest/>
            </div>
        )
    }
}

修改entry.js文件，内容如下：

import React from 'react';
import ReactDOM from 'react-dom';
import DemoApp from './components/DemoApp.js';


ReactDOM.render(
    <DemoApp />,
    document.getElementById('example')
);

执行结果：