Thinking in Components

Thinking in components is about being able to break down the UI into a Component hierarchy.

Each component will be created in a separate file.

// Store it in src/components/Greeting.js
function Greeting(){
  return <h1>Hello World</h2>
}

export default Greeting

Each component needs to be exported and then imported following the syntax of the ES6 module.

import Greeting from "./components/Gretting";

function App(){
  return <Greeting />;
}

export default App;

Just as you can compose functions or classes to create more complex solutions/models, you can compose simpler components to create more complex ones.

import Title from "./Title";
import Content from "./Content";
import Comment from "./Comment";

function Article(){
  return (
    <Title />
    <Content />
    <Comment />
  );
}

export default Article;

import Header from "./components/Header";
import Footer from "./components/Footer";
import Sidebar from "./components/Sidebar";
import Article from "./components/Article";

function App(){
  return (
    <Header />
    <Sidebar />
    <Article />
    <Footer />
  );
}

export default App;