⚛️React components

organizing files based on content types

Components display portions of apps, such as a header, button, footer and so on. They typically consist of smaller chunks of code in individual files to keep things better organized. Each component tries to do one thing only and that one thing well!

React components come in two basic types:

• class-based (an older way)

• functional (a newer way)

An example of a simple component in modern React looks something like this:

/component/Greeting.jsx

export default function Greeting(name) {

    return <h1 className="title">Hi ${name}</h1>
    
}

Then, to use this component, we would import it into another "app" file using an HTML-like JSX tag syntax with <Greeting />(or, more generally, <ComponentName />):

App.js

import Greeting from './component/Greeting'

export default function Home() {

    return <Greeting />

}

If we want to include multiple instances, or multiple components, into our "app" file, we would then need to wrap the return statement with parentheses and Fragments as such:

App.js

import Greeting from './component/Greeting'

export default function Home() {

    return (
    {/* this <> and </> are called "Fragment" tags */}
    <>
        <Greeting />
        <Greeting />
        {/* and so on and so forth */}
        <Greeting /> 
    </>               
    )
    
}