React Components

React forces you to think about your user interfaces as sets of components: small composable areas of the view. Each component is simply a JavaScript function that returns some HTML. Since components are just functions, we can reuse them throughout our application, This is useful in all those instances where in the past you might have to repeat the same code in multiple places.

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 that returns HTML that uses the html header tag to create the header section of a web page:

// Header.tsx
import React from 'react'

function PageHeader() {
  return (
    <header>
      <h1>My Beautiful Web Site</h1>
    </header>
  )
}

export default PageHeader

This component will be imported into the app using:

// App.tsx
import React from 'react'
import PageHeader from './Header'

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

export default App

From here, you might have a component that creates the body section, one for a sidebar, one for a footer, etc. You might also have React Components that returns a button element or other pieces of HTML that could be used in multiple places throughout your application. A good React Component should do one thing well. As with any code, smaller functions are easier to maintain and test.