Published on

React Tutorial: Build Your First App in 15 Minutes (2026)

React is a JavaScript library used to build modern user interfaces (the visual parts of a website) through reusable building blocks called components. By following this guide, you can create your first functional web application in under 15 minutes using React 19 and Vite. This setup provides a fast development environment that handles the complex technical details for you automatically.

Why should you choose React for your project?

React is the most popular tool for building websites because it makes managing complex screens simple. Instead of writing long files of code, you create small, manageable pieces that you can use over and over again.

This modular approach saves time and reduces errors as your project grows. If you need to change a button color, you update it in one place rather than searching through dozens of pages.

The massive community around React means help is always available. You can find thousands of pre-made tools and plugins to add features like charts or maps to your site instantly.

What is a React Component?

A component is a self-contained piece of code that represents a part of the user interface. Think of it like a Lego brick that contains both the structure (HTML) and the logic (JavaScript).

You can build a "Header" component, a "Footer" component, and a "ProfileCard" component. You then snap these bricks together to form a full webpage.

Components are written using JSX (JavaScript XML). This is a special syntax that looks like HTML but lives inside your JavaScript files, making it easier to visualize your layout.

What do you need before starting?

Before writing code, you need a few basic tools installed on your computer. Don't worry if these sound technical; they are standard tools for all modern web developers.

  • Node.js (Version 20 or higher): This is the engine that runs JavaScript on your computer. You can download it from the official Node.js website.
  • Terminal: This is a text-based app to give commands to your computer. On Windows, use "Command Prompt" or "PowerShell," and on Mac, use "Terminal."
  • Code Editor: This is where you write your code. Visual Studio Code (VS Code) is the most popular choice for beginners.
  • AI Pair Programmer: We recommend using an AI assistant like Claude 4.5 or GPT-5 to help you debug errors. These models are excellent at explaining why a specific line of code might be failing.

Step 1: Create your project with Vite

In 2026, we no longer use old tools like "Create React App" because they are too slow. Instead, use Vite (a build tool that makes development incredibly fast).

Open your terminal and type the following command:

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

After running this, the terminal will ask you to confirm. Press "Enter" to proceed.

Next, move into your new project folder by typing:

cd my-react-app

Step 2: Install the necessary packages

Your project folder currently contains a list of instructions, but not the actual React files. You need to download these "dependencies" (external code libraries your project needs to run).

Run this command in your terminal:

npm install

This will create a folder called node_modules. You should never edit the files inside that folder manually, as they are managed by the system.

Step 3: Launch the development server

Now it is time to see your website in action. The development server lets you see changes in real-time as you save your files.

Type this command:

npm run dev

The terminal will provide a link, usually http://localhost:5173. Copy and paste that link into your web browser to see your default React site.

Step 4: Create your first custom component

Open your project folder in VS Code. Look for the src (source) folder and create a new file named Greeting.jsx.

Inside Greeting.jsx, type the following code:

// A simple function that returns HTML-like code
function Greeting() {
  return (
    <div>
      <h1>Hello, I am learning React!</h1>
      <p>This is my very first custom component.</p>
    </div>
  );
}

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

This code defines a function that describes what should appear on the screen. The export default line makes this piece of code available to the rest of your app.

Step 5: Display your component in the App

To see your new "Greeting" on the screen, you must tell your main application to use it. Open the App.jsx file in the src folder.

Replace the existing code with this:

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

function App() {
  return (
    <main>
      <Greeting /> {/* This displays your component */}
      <p>The rest of my app goes here.</p>
    </main>
  );
}

export default App;

Check your browser tab. You should now see "Hello, I am learning React!" displayed on the page.

How do you handle common mistakes?

It is normal to feel frustrated if your screen turns white or shows an error message. Most beginner mistakes fall into three categories.

First, check your "Import" statements. If you create a file named MyButton.jsx but try to import it as mybutton (lowercase), React will fail because it is case-sensitive.

Second, ensure your component functions always start with a capital letter. React treats lowercase tags (like <div>) as standard HTML and uppercase tags (like <Greeting />) as custom components.

Third, look at your terminal or the browser "Console" (Right-click > Inspect > Console). AI tools like Claude 4.5 are great at reading these error logs and telling you exactly which line is broken.

Next Steps

Now that you have built a basic app, you should explore "State" (how React remembers information like button clicks). State allows your app to be interactive rather than just a static page.

Try adding a button that changes text when clicked. This will teach you about the useState hook (a special function that lets you add React state to components).

For more detailed guides, visit the official React documentation.

Read the React Documentation