React Development

Introduction to React

Beginner Lesson 1 of 2

Introduction to React

React is a JavaScript library for building user interfaces, developed by Facebook.

Why React?

Component-Based - Build encapsulated components
Declarative - Describe what UI should look like
Virtual DOM - Efficient updates and rendering
Large Ecosystem - Rich tooling and libraries
Industry Standard - Used by Facebook, Netflix, Airbnb

Core Concepts

Components

React apps are built from components - reusable pieces of UI.

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

JSX

JSX lets you write HTML-like syntax in JavaScript.

const element = <h1>Hello, {name}!</h1>;

Props

Components receive data through props.

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

<Welcome name="Alice" />

State

State is data that changes over time.

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

Your First React App

import { useState } from 'react';

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

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

export default Counter;

Next Steps

Continue to React Setup →