Bài 05 : Hướng dẫn tách và quản lý Component trong ReactJS


Nối tiếp bài trước tôi sẽ hướng dẫn các bạn cách tách Component ra riêng biệt và quản lý tốt hơn

Component App

class App extends Component {
  render() {
    return (
      <div id="wrapper">
        <Header />

        <Menu />

        <Pane />

        <div className="clear" />

        <Lower />

        <div className="clear" />

        <Footer />
      </div>
    );
  }
}

Compoent Header

class Header extends Component {
    render() {
        return (
            <div id="header">
                <img src="template/img/banner.png" alt="Sản phẩm" />
            </div>
        );
    }
}

Component Menu

class Menu extends Component {
    render() {
        return (
            <div id="menu">
                <ul>
                    <li><a href="a.html">Trang Chủ</a></li>
                    <li><a href="a.html">Giới Thiệu</a></li>
                    <li><a href="a.html">Sản Phẩm</a></li>
                    <li><a href="a.html">Tin Tức</a></li>
                    <li><a href="a.html">Liên Hệ</a></li>
                </ul>
            </div>
        );
    }
}

Component Pane

class Pane extends Component {
    render() {
        return (
            <div id="pane">
                <LeftPane />

                <ContentPane />

                <RightPane />
            </div>
        );
    }
}

Component Lower

class Lower extends Component {
    render() {
        return (
            <div id="lower">
                <div id="left" className="font">ReactJS</div>
                <div id="right" className="font">NodeJS</div>
            </div>
        );
    }
}

Component Footer

class Footer extends Component {
    render() {
        return (
             <div id="footer" className="font">
                Copyright By QuocTuan.Info
             </div>
        );
    }
}

Bạn có thể kiểm tra các Component bằng React Developer Tools để có thể dễ dàng hơn trong việc quản lý các Component


Khóa học lập trình PHP & MySQL cơ bản Khóa học lập trình PHP & MySQL nâng cao Khóa học lập trình Laravel Framework Khóa học lập trình Angular 4 Khóa học lập trình NodeJS Khóa học lập trình Python Khóa học lập trình Android Khóa học lập trình iOS Swift