React第一阶段实战分析--评论功能（一）

第一步：组件划分

组件树表示：

第二步 组件实现

1.从组件的顶层开始，在一步步往下构建组件树。

import React from 'react';
import CommentInput from './commentInput';
import CommentList from './commentList';
import './index.css'
class CommentApp extends React.Component{
    render(){
        return (
            <div className='wrapper'>
                <CommentInput  />
                <CommentList  />
            </div>
        )
    }
}
export default CommentApp;

import React from 'react';


class CommentInput extends React.Component{
    render(){
        return (
            <div>
                1111
            </div>
        )
    }
}
export default CommentInput;

import React from 'react';


class CommentList extends React.Component{
    render(){
        return (
            <div>
                33333
            </div>
        )
    }
}
export default CommentList;

基本框架搭好，
css样式：index.css.