React Components

React forces you to think about your user interfaces as sets of components: small composable areas of the view. Components are composed in a hierarchical structure with container components acting as parents of child components. Each component is made up of the user interface elements (JSX) and data. The guidance is to deconstruct your views into components and understand what data they contain before you begin building your user interface.

This is an example of a component:

// Header.jsx
import React from 'react'

function Header() {
  return (
    <div>
      <h1>Header</h1>
    </div>
  )
}

export default Header

This component will be imported into the app using:

// App.jsx
import React from 'react'
import Header from './Header'

function App() {
  return (
    <div>
      <Header />
    </div>
  )
}

export default App