React components

A React component displays portions of apps (such as headers, buttons, links, footers and so on). We create these smaller chunks of code in individual files to keep things better organized. Then, we allow these files to be export-ed to other more foundational files, where we import them. From there, we can make use of these component's functionalities.

Example of a component

A very simple component in React would look something like this:

/* src/components/Greet.jsx */

export default function Greet(name) {

  return <h1>Hi ${name}</h1>
  
}

Single component in App

Then, we would import it into another "app" file and use JSX (that HTML-like syntax) to render it:

/* App.jsx */

import Greet from './component/Greet'

export default function App() {
  
  return <Greet />
  
}

(We can think of this App function as a super-component that renders other components!)

Multiple components in App

Now, if we want to include multiple components into our super-component, then we would encapsulate our return statement with brackets:

/* App.jsx */

import Greet from './component/Greet'

export default function App() {
  
  return (
    <>
      <Greet name="Jon" />
      <Greet name="Joe" />
      <Greet name="Joy" />
    </>
  )
  
}

Also, note that, in this case, we include a set of placeholder "Fragment" tags, since a return statement must have only one single parent tag!