第一步：元件劃分

元件樹表示：

第二步 元件實現

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樣式