React.js Crash Course: Learn the Basics in One Day

If you’ve been searching for a React Tutorial that explains everything in simple, beginner-friendly language, you’ve come to the right place. React.js, developed by Facebook, is one of the most popular JavaScript libraries for building modern, interactive, and high-performance user interfaces. Its component-based architecture, virtual DOM, and unidirectional data flow make it the go-to choice for developers worldwide.

In this crash course, we’ll guide you step-by-step through the React basics so that by the end of the day, you’ll have the confidence to build your very first React application. Whether you’re a complete beginner in JavaScript or an experienced developer wanting to explore React, this React Tutorial will provide everything you need to get started.

Why Learn React.js?

Before diving into the code, let’s understand why React has taken the web development world by storm:

1. Fast Rendering with Virtual DOM – React uses a virtual DOM to optimize UI updates, making apps fast and responsive.
2. Reusable Components – Build small, self-contained UI pieces and reuse them across your project.
3. Strong Community Support – Millions of developers contribute tutorials, libraries, and solutions daily.
4. Backed by Facebook – Trusted by big companies like Facebook, Instagram, Airbnb, and Netflix.

If you want to build scalable, maintainable, and high-performing web apps, React is a must-have skill — and this crash course will get you there quickly.

Step 1: Setting Up Your Environment

Before writing your first React app, you need to prepare your development environment. Here’s what you’ll need:

• Node.js & npm – Install the latest version from nodejs.org. npm comes with Node.js.
• Code Editor – Use Visual Studio Code for the best experience.
• Browser – Google Chrome is recommended for React development with the React Developer Tools extension.

To start a new project, use Create React App:

npx create-react-app my-first-app
cd my-first-app
npm start

This will create a React project and run it on http://localhost:3000.

Step 2: Understanding React Components

In React, everything is a component. A component is a small piece of UI, like a button, header, or form. You can think of components as JavaScript functions that return HTML.

Example of a simple functional component:

function Welcome() {
  return <h1>Hello, React!</h1>;
}
export default Welcome;

You can use this component inside App.js:

import Welcome from './Welcome';

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

export default App;

This is the foundation of our React Tutorial — learning to break down your UI into small, reusable components.

Step 3: JSX – JavaScript + HTML

React uses JSX (JavaScript XML), which lets you write HTML-like syntax inside JavaScript.
Example:

const element = <h1>Welcome to React</h1>;

JSX makes code easier to read, but under the hood, it’s converted into JavaScript functions.

Step 4: Props – Passing Data to Components

Props (short for properties) are used to pass data between components.
Example:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Usage:

<Greeting name="Suraj" />

Output:

Hello, Suraj!

Props are read-only — you can’t change them inside a component.

Step 5: State – Managing Data in Components

While props are for passing data from parent to child, state is for storing data within a component itself.
Example using useState hook:

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

This is how React handles dynamic data updates in your app.

Step 6: Handling Events in React

Event handling in React is similar to plain JavaScript, but you use camelCase for event names.
Example:

function ClickButton() {
  function handleClick() {
    alert('Button Clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

Step 7: Conditional Rendering

You can conditionally render components based on state or props.
Example:

function LoginStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn? <h1>Welcome back!</h1> : <h1>Please log in</h1>}
    </div>
  );
}

Step 8: Lists and Keys

Rendering lists in React is simple:

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

Step 9: Styling in React

React supports multiple styling methods:

Inline Styling:

const style = { color: 'blue', fontSize: '20px' };
<p style={style}>Styled Text</p>

CSS Files:

.my-text {
  color: green;
}

<p className="my-text">Hello</p>

Step 10: Using Hooks

React Hooks let you use state and lifecycle features without writing a class. The most common hooks are:

• useState – For state management.
• useEffect – For side effects (fetching data, timers, etc.).

Example with useEffect:

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(interval);
  }, []);

  return <p>Timer: {seconds}s</p>;
}

Step 11: Building Your First React App

Let’s create a simple To-Do List:

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState('');

  function addTask() {
    if (task.trim() !== '') {
      setTodos([...todos, task]);
      setTask('');
    }
  }

  return (
    <div>
      <h1>To-Do List</h1>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="Enter a task"
      />
      <button onClick={addTask}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}
```


`
Run this and you’ve got a fully functional to-do list — all in one day!

 **Final Tips for Beginners**

* Practice daily with small projects.
* Read the official React documentation — it’s an excellent **React Tutorial** resource.
* Use **CodeSandbox** or **StackBlitz** for quick experiments.


By following this **React.js Crash Course**, you’ve learned:
 How to set up a React environment
 The basics of components, props, and state
 How to handle events, lists, and conditional rendering
 Styling methods in React
 Using hooks like `useState` and `useEffect`
 Building your first mini-project in React

This **[React Tutorial](https://www.tpointtech.com/reactjs-tutorial)** was designed to get you building real applications in just **one day**. From here, you can explore advanced topics like **React Router**, **Redux**, and **API integration** to take your skills to the next level.