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 (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to your first React component!</p>
    </div>
  );
}

A simple React functional component

React Hooks

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

Examples:

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

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

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)} style={{marginLeft: '10px'}}>
        Decrement
      </button>
      <button onClick={() => setCount(0)} style={{marginLeft: '10px'}}>
        Reset
      </button>
    </div>
  );
}

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>
  );
}

function App() {
  return (
    <div>
      <UserCard 
        name="John Doe"
        role="Frontend Developer"
        avatar="https://i.pravatar.cc/150?img=12"
      />
      <UserCard 
        name="Jane Smith"
        role="Backend Developer"
        avatar="https://i.pravatar.cc/150?img=5"
      />
    </div>
  );
}

Component props and their usage