React.js Tutorial

Master React.js development with our comprehensive tutorial. Learn modern React patterns and best practices through hands-on examples.

Part 1

Part 2 Introduction to React

React is a JavaScript library for building user interfaces, particularly single-page applications where you need a fast, interactive user experience.

Examples:

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

// Using the component
<Welcome />

A simple React functional component

React Hooks

Hooks are functions that let you 'hook into' React state and lifecycle features from function components.

Examples:

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

useState and useEffect hooks example

Component Props

Props are React's way of passing data from parent to child components, making your components reusable and dynamic.

Examples:

function UserCard({ name, role, avatar }) {
  return (
    <div className="card">
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

// Using the component
<UserCard 
  name="John Doe"
  role="Developer"
  avatar="/john.jpg"
/>

Component props and their usage