Skip to main content

React Core Concepts

Core Concepts

You will need to be familiar with three core concepts with React in order to build React applications.

Components

User interface can be broken down into building blocks called components.

Think of it like a self contained, reusable snippet of code. You can compose them with different components that you have write to create a bigger component for your React application!

image.png

Having components allows your code to also be maintainable, you can add, update, delete components without touching the rest of the application.

Creating a Component

In React, components are just functions, a function that returns UI elements. So a simplest component would be:

function header() {
  return <h1>Hello World!</h1>;
}

And using it in our CDN provided React application would just be:

<html>
    <body>
        <div id="app"></div>
        <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="text/jsx">
            
            function header() {
                return <h1>Hello World from a component!</h1>;
            }
            
            const app = document.getElementById("app");
            const root = ReactDOM.createRoot(app);
            root.render(header);
        </script>
    </body>
</html>

Sadly, this doesn't work because there are couple of nuances

  • First, a component name needs to be Capitalized in order to distinguish them from plain HTML and JavaScript. So instead of header it will need to be Header
  • Second, when you are using a component you will need to surround them with <> so that JSX can kick in and compile them into react.createElement. If you're interested to learn more about JSX, you can look at this page.

With that being said, if you now make the minor adjustments:

<html>
    <body>
        <div id="app"></div>
        <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="text/jsx">
            
            function Header() {
                return <h1>Hello World from a component!</h1>;
            }
            
            const app = document.getElementById("app");
            const root = ReactDOM.createRoot(app);
            root.render(<Header />);
        </script>
    </body>
</html>

This will now work perfectly!

Expanding on Component by Nesting!

You can now create new component by nesting in other components!

Take the following for example, although a bit uncreative, we can create a new component called TwoHeader that have the two Header component nested in. When you render only the TwoHeader component you will be able to see two Header component on the page! Neat right?

One thing to call out is that a component must return HTML elements in a wrapper node. Meaning, there must be one parent node that you're returning. If you want to return say multiple HTML elements for a component, you must wrap them under a div OR use JSX fragments. Fragments

<html>
    <body>
        <div id="app"></div>
        <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="text/jsx">
            
            function Header() {
                return <h1>Hello World from a component!</h1>;
            }
            
            function TwoHeader() {
                return <div>
                    <Header />
                    <Header />
                </div>
            }
            
            const app = document.getElementById("app");
            const root = ReactDOM.createRoot(app);
            root.render(<TwoHeader />);
        </script>
    </body>
</html>

You can continue building more component and creating nested component to build more complicated components.

image.png

Passing Props

Now, we have learned how to create a component, we need to add some variety into the mix right? Otherwise, the component would be displaying the same thing everything. We can try changing up the color, the text that it shows on the component.

We can do that with props! Or properties!

In order to pass prop to your component you can just add it as an attribute to where you're using the component, for example, if we are reusing the TwoHeader component we have discussed earlier:

function(

root.render(<TwoHeader text="Wowzers"/>);

No comments to display

Back to top