React Tutorial: Build Your First Component in 15 Minutes

React is a JavaScript library used to build user interfaces (UI - the visual parts of a website that people interact with). By following these 5 steps, you will build and deploy a live interactive component in under 15 minutes. This guide uses React 19 to help you master the modern way of creating web applications.

What do you need before you start?

Before writing code, you need a few tools installed on your computer. First, ensure you have Node.js (a tool that allows JavaScript to run outside of a web browser) version 20 or higher. You will also need a code editor like Visual Studio Code to write your files.

We recommend using a modern build tool called Vite (pronounced "veet") to set up your project quickly. Vite handles the complex background tasks like refreshing your browser automatically when you save changes. It is much faster than older tools you might find in older tutorials.

Finally, a basic understanding of HTML (the structure of a webpage) and CSS (the styling of a webpage) will help. Don't worry if you aren't an expert yet. React uses a syntax that looks very similar to standard HTML.

Why should you use React for your projects?

React allows you to build websites using small, reusable pieces of code. Instead of writing one massive file for an entire page, you create separate files for buttons, navigation bars, and forms. This makes your code easier to manage and fix when things go wrong.

The library also handles updates to the screen very efficiently. When data changes, React only updates the specific part of the page that needs to change. This results in a faster experience for your users compared to traditional websites.

In our experience, learning React opens up many career opportunities because it is the most popular framework in the industry. Most modern tech companies use it to power their web applications. Starting with React 19 ensures you are learning the latest standards from day one.

How do you set up your first React project?

To begin, open your computer's terminal (a text-based interface for giving commands to your computer). Type the following command and press enter:

npm create vite@latest my-first-app -- --template react

This command creates a new folder named my-first-app with all the necessary React 19 files. After the process finishes, move into your new folder and install the required packages. Use these commands:

cd my-first-app
npm install
npm run dev

What you should see is a message in your terminal providing a local URL, usually http://localhost:5173. Open that link in your browser to see the default React welcome page. You have successfully started your first environment!

What exactly is a React Component?

A component is a JavaScript function that returns a piece of the user interface. Think of it like a custom HTML tag that you define yourself. For example, you could create a component called <WelcomeMessage /> and use it anywhere in your app.

Components use a special syntax called JSX (JavaScript XML - a way to write HTML-like code inside JavaScript). JSX makes it easy to visualize what the UI will look like directly inside your logic. It looks like HTML, but it has the full power of programming behind it.

Every React component must start with a capital letter. This helps React distinguish between standard HTML tags like <div> and your custom components like <MyButton>. If you use a lowercase letter for your component name, the code will likely fail to run.

How do you build your first custom component?

Open the src folder in your code editor and create a new file named Greeting.jsx. This file will hold the logic for a simple greeting card. Copy and paste the following code into that file:

// Greeting.jsx
function Greeting() {
  // We define a variable to hold a name
  const name = "New Developer";

  // The 'return' statement tells React what to show on the screen
  return (
    <div style={{ padding: '20px', border: '1px solid blue' }}>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your first React 19 component.</p>
    </div>
  );
}

// This allows other files to use this component
export default Greeting;

Now, you need to display this component on your main page. Open App.jsx in the same folder, delete the existing content, and replace it with this:

import Greeting from './Greeting'; // Import your new component

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

export default App;

What you should see in your browser is a blue-bordered box with your greeting message. You have just successfully created, exported, and rendered a custom React component.

How do you add interactivity with State?

Static components are great, but React shines when things change on the screen. To do this, you use a "Hook" called useState (a special function that lets you store data that changes over time). Let's add a simple counter to your greeting.

Update your Greeting.jsx file with this code:

import { useState } from 'react'; // Import the state hook

function Greeting() {
  // count is the value, setCount is the function to change it
  // 0 is the starting value
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: '20px', border: '1px solid blue' }}>
      <h1>Clicks: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Click Me!
      </button>
    </div>
  );
}

export default Greeting;

What you should see is a button that increases the number on the screen every time you click it. React automatically detects that count has changed and updates only that specific number on the page. This is the core magic of how React works.

What are common mistakes beginners make?

One common error is forgetting to import useState at the top of the file. If you try to use a hook without importing it, your app will crash with a "ReferenceError." Always check your imports if the screen goes white.

Another frequent mistake is trying to return multiple elements without a container. A React component must return a single "parent" element. If you have two <div> tags side-by-side, wrap them in a single <div> or a Fragment (an empty tag written as <> ... </>).

Don't worry if the code feels overwhelming at first. It is normal to feel confused by JSX or the way data flows between files. Most developers take a few weeks of practice before the concepts of state and props (properties passed to components) feel natural.

What are the next steps in your React journey?

Now that you have built a component with state, you should explore how to pass data between components using "props." Props allow you to make your components even more reusable by passing different information to them. You might also want to look into the new use hook introduced in React 19 for handling data.

Try building a small project like a To-Do list or a weather dashboard. These projects will teach you how to handle lists of data and how to fetch information from the internet. The more you build, the more comfortable you will become with the syntax.

For more guides, visit the official React documentation.