Ex about Child Component

react-child-component.js

class Header extends React.Component {
        render() {
            return (
                    <div className="header">
                        <div className="fa fa-more"></div>
                        <span className="title">Timeline</span>
                        <input
                                type="text"
                                className="searchInput"
                                placeholder="Search ..."/>
                        <div className="fa fa-search searchIcon"></div>
                    </div>
            )
        }
    }


    class Content extends React.Component {
        render() {
            return (
                    <div className="content">
                        <div className="line"></div>
                        <div className="item">
                            <div className="avatar">
                                <img alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg"/>
                            </div>
                            <span className="time"> An hour ago </span> <span>Ate lunch</span></div>
                    </div>
            )
        }
    }


    class App extends React.Component {
        render() {
            return (
                    <div className="notificationsFrame">
                        <div className="panel">
                            {/*Todo something*/}
                            <Header/>
                            <Content/>
                        </div>
                    </div>
            )
        }
    }

    var mountApp = document.querySelector('#app');
    ReactDOM.render(<App/>, mountApp);