React for Beginners | Components

• Instead of just rendering one or another set of JSX elements, we can include them within React components.
• Components are created using what looks like a normal JavaScript function, but is different in that it returns JSX elements.

function Greeting() {
    return <div>Hello React!</div>
}

• React components allow us to create more complex logic and structures within our React application than we would with JSX elements alone.
• Think of React components as our custom React elements that have their own functionality.
• As we know, functions allow us to create our own functionality and reuse it where we like across our application.
• Components are reusable wherever we like across our app and as many times as we like.

• How would we render or display the returned JSX from the component above?

import React from  'react';
import ReactDOM from  'react-dom';

function Greeting() {
    return <div>Hello React!</div>
}

ReactDOM.render(<Greeting />, document.getElementById(*root));

• We use the React import to parse the JSX and component to a root element with the id of "root".

• Components can return valid JSX elements, as well as strings, numbers, booleans, the value null, as well as arrays and fragments.
• Why would we want to return null? It is common to return null if we want a component to display nothing.

function Greeting() {
    if(isAuthUser) {
        return "Hello again!";
    } else {
        return null;
    }
}

• Another rule is that JSX elements must be wrapped in one parent element. Multiple sibling elements cannot be returned.
• If you need to return multiple elements, but don't need to add another element to the DOM (usually for a conditional), you can use a special React component called a fragment.
• Fragments can be written as <></> or when you import React into your file, with <React.Fragment></React.Fragment>.

function Greeting() {
    const isAuthUser = true;

    if(isAuthUser) {
        return (
            <>
                <h1>Hello again!</h1>
                <button>Logout</button>
            </>
        );
    } else {
        return null;
    }
}

• The most important thing components can return is other components.
• Below is a basic example of a React application contained with ina component called App that returns multiple components:

import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';
import Navbar from './components/Navbar';
import Aside from './components/Aside';
import Main from './components/Main';
import Footer from './components/Footer';

function App() {
    return (
        <Layout>
            <Navbar />
            <Main />
            <Aside />
            <Footer />
        </Layout>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

• What is powerful about this is that we are using the customization of components to describe what they are (Le. Layout) and their function in our ation. This tells us how they should be used just by looking at their name.
• Additionally, we are using the power of JSX to compose these components. In other words, to use the HTML-like syntax of JSX to structure them in an immediately understandable way (ie. the Navbar is at the top of the app, the Footer at the bottom, etc).

• Just as we can use JavaScript variables within our components, we can use them directly within our JSX as well.
• There are a few core rules to using dynamic values within JSX, however.
• JSX can accept any primitive values (strings, booleans, numbers), but it will not accept plain objects.
• JSX can also include expressions that resolve to these values.
• For example, conditionals can be included within JSX using the ternary operator, since it resolves to a value.

function Greeting() {
    const isAuthUser = true;

    return <div>{isAuthUser ? "Hello!" : null}</div>;
}