Getting Started with React - Lesson #12

Getting Started with React Components

Components can be thought of as the building blocks of any application. If you look at any website, you can break it down by thinking of its components. Here is an example of the better.dev site components.

Components in a Website

Using components, we can organize our sites and applications so that they are easier to build, understand, and maintain.

Luckily React makes creating and organizing components part of its core. Let's talk about the basics of React components, how to create them, and how to use them.

Components, whether created in React, Vue, or mentally modeled usually have three main parts:

  • Template: The HTML or markup of the component. This is what gets shown to users
  • Styles: The CSS used to design the template
  • Functionality: The JavaScript used to let users interact with this component. Think button clicks, form input fields, dragging and dropping, and more.

React has concepts to define these parts of a component.

  • JSX: The templating language of React. This is how React generates the HTML for our sites
  • CSS: Styling in React can be done a bunch of ways. You can use CSS directly, Sass, or tools like CSS-in-JS.
  • JavaScript: The cool thing about React is that "it's just JavaScript". The functionality that we add to components is created through JavaScript functions.

Let's create our first React component using a JavaScript function.

jsx
function MyFirstComponent() {
    return <div>I am a React component!</div>;
}

Note: The naming convention for React components is to use PascalCase.

Once we've created our React component, we can use it as if it were an HTML element:

jsx
// βœ… valid to close the component like this
<MyFirstComponent></MyFirstComponent>

// βœ… also valid to self-close the component like this
<MyFirstComponent />

Making a React component is as easy as making a JavaScript function.

In our example React component above, we only returned a JSX template. If we wanted to add functionality with JavaScript functions, we would add it above the template return.

jsx
function MyFirstComponent() {
    
    // ------------
    // javascript functions go here
    // ------------

    // return our jsx template here
    return <div>I am a React component!</div>;
}

For instance, we could add a function that alerts a user.

jsx
function MyFirstComponent() {
    
    // ------------
    // javascript functions go here
    // ------------

    function alertUser() {
        alert('hi there!');
    }

    // return our jsx template here
    return <div>I am a React component!</div>;
}

That is a simple example and we aren't even using the new alertUser() function we created, but our more production-ready React components will start to have functions that get data from APIs, store data, and manipulate user events.

Now that we've created a React component, you can use it multiple times like so:

jsx
<MyFirstComponent />
<MyFirstComponent />
<MyFirstComponent />
<MyFirstComponent />

Each React component would have its own data, its own template, and its own functionality.

To use a component (when building an app with create react app or any other setup that has a build step like webpack), we can export and import our new component and use it.

jsx
// πŸ—‚ components/MyFirstComponents.js

export default function MyFirstComponent() {
    return <div>I am a React component!</div>;
}

We are assuming that your component is in a file called MyFirstComponent.js.

jsx
// πŸ—‚ App.js

import MyFirstComponent from './components/MyFirstComponent';

function App() {
    return (
        <div>
            <MyFirstComponent />
            <MyFirstComponent />
            <MyFirstComponent />
        </div>
    );
}

Now that we've created a component, we can push forward and talk about adding functionality to each component. There are some major concepts to talk about including React State and React Events.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.