Maria Mendonca

Posted on Sep 5

Your First React Component: JSX, Components, and the "Hello, World" Program

#webdev #javascript #beginners #react

Hey there!

If you've been following along, you've successfully completed the first and most important step: setting up your React project. Congratulations! You now have a blank canvas, and this is where the real fun begins.

In this article, we're going to take our first practical steps into the world of building UIs. We'll demystify JSX—the special syntax that makes React so powerful—and you'll learn how to create your very first component. By the end of this post, you'll have a running "Hello, World" program, and you'll understand the core pieces that make it work.

Ready to start coding? Let's go!

What Exactly Is a React Component?

At its heart, React is all about building with components. Think of it like a set of digital LEGO bricks. Instead of building your entire website from a single, giant block, you create small, self-contained pieces—like a button, a search bar, or a user profile card. You can then assemble and rearrange these pieces to create complex, interactive user interfaces. This modular approach is a fundamental shift in how we build for the web.

A component is simply a JavaScript function that returns a piece of UI. It's a fundamental concept that can be intimidating at first, but once you grasp it, you'll see why it's so powerful. As Alex Banks and Eve Porcello state in their book, Learning React, components are "the functional foundation of React’s architecture." They are the core building blocks that encapsulate both the logic and the presentation of your UI.

Here is an example of a simple React component named WelcomeMessage. It's just a standard JavaScript function that returns some JSX (the HTML-like code) to be rendered on the page.

import React from 'react';

// This is our WelcomeMessage component. 
// It's a JavaScript function.
function WelcomeMessage() {
  return (
    // It returns a piece of UI (JSX).
    <h1>Hello, React Learners!</h1>
  );
}

export default WelcomeMessage;

As you can see, a component is a reusable function that, when called, renders a part of your user interface. This simple concept is the foundation for everything we will build in this series.

Introducing JSX- HTML in Your JavaScript

The problem with building complex user interfaces is that the UI logic (the structure and content) and the business logic (what the app does) often become tangled. Writing all your UI elements using JavaScript can quickly become messy and difficult to read. It's like trying to draw a detailed picture using only written instructions instead of a pencil.

This is where JSX comes in. JSX (which stands for JavaScript XML) is a syntax extension for JavaScript. It allows you to write HTML-like code directly inside your JavaScript files, making your code much more readable and intuitive. It might look like a template language, but it’s actually the full power of JavaScript.

Consider this simple example. Without JSX, creating a heading element would look like this:

const element = React.createElement("h1", null, "Hello, world!");

With JSX, that same code becomes much cleaner and more familiar:

const element = <h1>Hello, world!</h1>;

As you can see, this syntax is much easier to read and write.

It’s important to remember a key rule: JSX is not HTML. It's a syntax that gets converted into regular JavaScript function calls behind the scenes. This conversion happens during the build process of your application.

Mistake I made while writing JSX for the first time

A crucial rule is that a React component can only return a single root element. This means all your JSX elements must be wrapped inside a single parent tag, like a <div> or a <main> tag. For example, this will not work:

A common and simple solution is to use a div tag, as you see below. This works because both elements are wrapped inside a single parent div:

However, a better solution is to use a React Fragment. A fragment lets you group children without adding an extra div to the HTML output. You can use the full <React.Fragment> tag or its shorthand, <>.

This is the recommended approach for a cleaner, more efficient component.

Your First "Hello, World" Program

You've successfully set up your development environment. Now, let's write our first lines of code.

Open Your Project in the Editor: Go to your code editor (like VS Code) and open the my-react-app folder you created.
Find the App.jsx File: In the project's file explorer, navigate to the src folder and open the App.jsx file. This is the main component file that Vite set up for you.
Review the Initial Code: Take a moment to look at the code. You'll see a JavaScript function called App that returns some HTML-like code (this is JSX!). This is your first component. Don't worry about understanding every line just yet.
Write Your First Code: We're going to make a simple change. Clear all the data inside the return and replace it with <h1>Hello, World!</h1>.

Before:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

After:

import './App.css'

function App() {

  return (
    <>
      <h1>Hello, World!</h1>
    </>
  )
}

export default App

See It in Action: Save the file. Your browser, which is running your development server, should automatically update to reflect your change. This is the magic of React's hot-reloading feature.

The Result
Congratulations! You've just created and rendered your first React component. The page in your browser should look like this:

The Takeaway

Kudos on completing your first hands-on dive into React! Before we wrap up, let's quickly recap the key concepts you've just learned and applied.

You've successfully created your first component. Remember that the App.jsx file we worked in is a component—the fundamental building block of any React application.
You used JSX. That HTML-like syntax you wrote directly inside your JavaScript file is called JSX. It's what makes React code so readable and easy to write.
You saw it in the browser! You told React what to render (<h1>Hello, World!</h1>) and it took care of the rest. This is the power of React’s declarative nature.

You are now officially a React developer! 🚀

Homework of the day

Now that you've seen how easy it is to make a change, it's time for a small challenge to solidify your new skills. Your Homework is:

Image created using Canva

How to Submit Your Solution

If you want to share your work or get feedback, you can share a screenshot of your finished project in the comments below. You can also paste your updated App.jsx code directly into the discussion to get feedback from me and the community. The next article will have the answer to this homework problem.

What's Next?

In our next article, we'll dive into an even more powerful concept: props. Props are how we make our components reusable and dynamic.

Think of it this way: the "Hello, World!" component you just created is a static template. It can only ever say "Hello, World!". In the next article, you'll learn how to use props as a way to send information from a parent component to a child component. This will allow you to create one Welcome component that can say "Hello, Alice!", "Hello, Bob!" or any other name, simply by passing in different data.

Get ready to learn how to pass data to components to build more flexible and powerful user interfaces. See you then! 👋

Reference

React Official Documentation: react.dev

Let's Connect!

If you found this article helpful, please consider following me on Dev.to. You can also connect with me on these platforms for more content and conversation: