React.js Tutorial for Creating Web Applications

React.js has quickly become a favorite for building interactive web applications. When you first start, though, it feels almost like picking up a new language. Sometimes it makes perfect sense, and other times—well, not so much. This tutorial is here to help make sense of things, even when the code looks kind of mysterious.

React changes the way we think about building websites.

That sentence might sound big, but once you see things working, it’s hard not to agree—even if only a little. We’ll walk through the basics of React, set up a project, build a small component, and play with passing data around. By the end, you may find yourself wanting to go further, or maybe just taking a short break. Either is fine. Let’s get going.

Starting with the basics

React.js, or just React, lets you create web apps using building blocks called components. Each component is like a tiny piece of a web page, and you can combine them however you want.

But before you can make anything appear on a screen, you need to set up your environment. There are several ways, but the quickest for beginners is using Create React App—a tool that gets most things ready for you, so you can focus on code instead of configuration.

Installation and setup

1. Install Node.js and npm: If you don’t have Node.js yet, go to nodejs.org and download the installer. npm comes with Node.js, so you get both at once.
2. Create a React app: Open your terminal and type: npx create-react-app my-app This creates a folder called my-app (you can name it something else if you want).
3. Start the app: Go into the folder and run: cd my-app npm start Your browser will open up your new React app automatically.

The hardest part is usually getting started.

Building your first component

Components are where React really shines. These are small chunks of code—written in JavaScript, but they look a lot like HTML. That’s called JSX. JSX helps you describe what the UI should look like.

Let’s try making a simple component. Open your src/App.js file. You’ll see something like this:

function App() {  return (    <div className="App">      <h1>Hello, world!</h1>    </div>  );}

That’s a component! But if you want to personalize it, change the text to your own message, or add something simple, like a button.

Try updating the code to this:

function App() {  return (    <div className="App">      <h1>Welcome to my first React app!</h1>      <button>Click me</button>    </div>  );}

When you save the file, the browser should update right away. You’ve just changed the page—without refreshing it.

Making it interactive

Buttons are boring until you can make them do something. In React, every component can remember things using something called state. For example, maybe you want to count how many times a button is clicked.

You can do it like this:

import { useState } from 'react';function App() {  const [count, setCount] = useState(0);  return (    <div className="App">      <h1>You clicked {count} times</h1>      <button onClick={() => setCount(count + 1)}>Click me</button>    </div>  );}

With this code, the number goes up every time you click the button. The magic comes from useState, a special React hook that lets your component remember data as the user interacts.

Breaking the UI into more components

Once you’ve got an interactive component, it’s easy to keep everything in one file. But soon, you’ll want to split your code up. This fits how real web pages work. You might have a header, a list, and maybe a footer—all as separate components.

Here’s how you can make a new component:

1. Create a new file: In your src folder, make a file called Header.js.
2. Add content:

   function Header() {  return (    <header>      <h2>My React App</h2>    </header>  );}export default Header;

3. Use the new component in App.js:

   import Header from './Header';function App() {  return (    <div className="App">      <Header />      <h1>Welcome!</h1>      <button>Click me</button>    </div>  );}

This pattern is everywhere in React. You create small parts, then put them together like building blocks. Not every block needs to be fancy—some can be very simple, but sometimes you refactor as the app grows.

Small parts come together to make something big.

Passing data between components

Passing data in React is called passing props. Suppose you want your Header to display a custom title. You can pass the title down like this:

function Header(props) {  return (    <header>      <h2>{props.title}</h2>    </header>  );}// In App.js<Header title="Finance dashboard" />

Whenever the title changes, the displayed text updates too. This keeps parts of your app in sync without giving you a headache. It’s easy to start simple and add extra props as your project grows.

Making lists from data

Often you have to show lists, whether it’s items for sale, articles, or users. In React, you do that like this:

const articles = [  { id: 1, title: 'React basics' },  { id: 2, title: 'Understanding state' },  { id: 3, title: 'Working with props' },];function ArticleList() {  return (    <ul>      {articles.map(article => (        <li key={article.id}>{article.title}</li>      ))}    </ul>  );}

You map over the articles array, and for each item, you return an li element. The key property helps React keep track of each list item, so the UI can update smoothly. Forgetting the key doesn’t break everything, but sometimes React gets confused without it. And debugging React confusion can be—let’s say—tricky.

Bringing in user input

React can also handle user input easily. If you want to make a simple form—say, to let someone type their name—you can do this:

import { useState } from 'react';function NameForm() {  const [name, setName] = useState('');  return (    <form>      <input        type="text"        value={name}        onChange={e => setName(e.target.value)}        placeholder="Enter your name"      />      <p>Hello, {name || 'stranger'}!</p>    </form>  );}

The field updates in real time. There’s something satisfying about seeing the greeting change as you type. Kind of fun, actually, even if the purpose is small.

Where to go next

React opens up a lot of possibilities, but no one learns it all at once. You might get stuck, you might even feel annoyed. That’s normal. The trick is to try breaking things, changing code, seeing what happens. You can’t really “break” anything in this playground. If you do, well, that’s just a chance to learn.

• Look at the official docs. They’re helpful, sometimes too detailed, but you don’t need to read every word.
• Try building a real project, even a tiny one. A to-do app or a weather dashboard can teach much more than just reading about theory.
• When confusion strikes, search. Someone, somewhere, already asked the same question.

React shines when you try things out for yourself.

If you’ve made it this far, you’ve taken a real step toward building with React. It’s not always clear what the next move is. Sometimes it just clicks after awhile; sometimes it takes several tries. No need to rush. The web isn’t going anywhere.