React Components and JSX

Course: React JS & Tailwind CSS - Full Course

Introduction

In this lesson we’re going to start diving into the core building blocks of React: components and JSX.

Then, we’ll build our very first React component together and see how JSX fits into the picture. By the end of this lesson, you’ll have a working component on the screen, and you’ll get a challenge to practice building your own.

React Components

Components are the building blocks of a React application. Instead of writing all your HTML in one big file, React allows you to split your UI into smaller, reusable pieces called components.

Think of components like LEGO blocks where each block (component) can be built, reused, and combined to make a bigger structure (your full app).

Let's write some code to see this in action!

First, let's delete some of the existing code that Vite had generated for us so that we're working with a clean slate. Go ahead and delete the contents of App.css and index.css (but not the files).

Now go into the App.jsx file and delete everything inside the parenthesis after the "return" statement. You can write some code within these parenthesis and play around with it to see what renders.

We'll start with a simple <h1>Hello World</h1>

Congratulations! You just rendered your first React component!

How to Write a Component

So in the example above, we only worked inside the App.jsx file that Vite created for us. In a real project, you’ll often want to create new components to keep your code organized and reusable.

To do that, we can create a function like this:

function Welcome() {
  return <h1>Hello, world!</h1>;
}

Or use an arrow function:

const Welcome = () => {
  return <h1>Hello, world!</h1>;
}

To use this component inside another, just include it like a custom HTML tag:

function App() {
  return (
      <Greeting />
  )
}

Now as a quick challenge, try to add some additional content to your Welcome component, like a <p> element saying "Check out my first React app!".

Your first instinct may be to do something like this:

  const Welcome = () => {
    return <h1>Hello, world!</h1>
    <p>Check out my first react app!</p>  
  }

However, you'll likely see some red squigglies, and if you hit save, you'll encounter an error! That's because React components need to return a single parent element, meaning it needs to be wrapped in a <div> or <section>.

Rules of Components

These are some rules to keep in mind when creating components React components:

  • Must start with a capital letter (otherwise React thinks it’s a normal HTML tag).
  • Must return a single parent element (wrap everything as mentioned above).
  • Avoid nesting components (define each component at the top level).

The last rule might sound a bit confusing so here is an example of what not to do:

function App() {
  function Welcome() {
    return <h1>Hello, world!</h1>;
  }

  return (
    <div>
      <Welcome />
    </div>
  );
}

Instead, do this:

function Welcome() {
  return <h1>Hello, world!</h1>;
}

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

Now that you know the basics of components, you can start increasing the complexity of these components. Try to write some additional text or add some other sections to the app!

JSX: Writing HTML in JavaScript

JSX stands for JavaScript XML, and it’s how we write HTML-like code inside our JavaScript files. React uses JSX to describe what the UI should look like.

Think of JSX like a shortcut: instead of using React.createElement() everywhere (which is what React does under the hood), you can write something that looks just like HTML. React will then convert it into actual JavaScript behind the scenes.

What's Really Happening with JSX

If you run console.log(<Welcome/>) you'll see that t’s actually just JavaScript objects that describe the UI. React transforms JSX into plain JavaScript objects called React elements. These objects tell React what to render on the page.

So <Welcome /> isn’t HTML yet, it’s just a description. React takes care of turning it into real DOM elements when it renders your app.

JSX vs HTML: A Few Differences

JSX mostly looks like HTML, but there are a few differences you should remember:

className instead of class - In HTML, we write <div class="my-class"></div>, but in JSX we write:

<div className="my-class"></div>

camelCase for attributes - JSX uses camelCase for most attributes, like onClick instead of onclick, and tabIndex instead of tabindex.

Self-closing tags - In JSX, all elements must be properly closed. For elements without children, use a self-closing tag:

<img src="logo.png" alt="Logo" />

Lesson Wrap Up

Awesome! In this lesson, you’ve taken your first steps into building React apps by learning about components and JSX.

By now, you’ve rendered your first components, practiced embedding expressions in JSX, and seen what JSX looks like in the console.

Next up, you’ll get to practice building your own small React components and combine them to create something bigger.

Back to Course