React Basics

What is React?

React is a popular JavaScript library for building user interfaces. Its main idea is to help you build UIs out of small, isolated pieces of code called “components.”

Think of it like building with LEGO bricks. You can create individual bricks, like a button or a search bar. Then, you can combine these bricks to form larger structures, like a navigation menu. Eventually, you assemble all these structures to build a complete webpage.

Components are the fundamental building blocks of any React application.

This component-based approach makes your code easier to manage and reuse. If you need another button, you just use the same button component you already built. This keeps your code clean and organized, especially as your application grows larger.

Writing with JSX

When you write in React, you'll use something called JSX. It looks a lot like HTML, but it's actually a syntax extension for JavaScript. It lets you write HTML-like code directly within your JavaScript files.

const element = <h1>Hello, world!</h1>;

While it looks like HTML, there are a few key differences. For example, since class is a reserved word in JavaScript, you use className instead to add CSS classes.

Another powerful feature is the ability to embed JavaScript expressions directly inside your JSX. You just need to wrap the expression in curly braces {}.

const userName = 'Alex';
const greeting = <h1>Hello, {userName}!</h1>;

Behind the scenes, this JSX is converted into regular JavaScript function calls that create HTML elements in the browser. You get the power of JavaScript with the familiar structure of HTML.

Functional Components and State

A functional component is just a JavaScript function that returns JSX. It's the most common way to create components in modern React.

Here’s a simple Counter component:

import React from 'react';

function Counter() {
  return (
    <div>
      <p>You clicked 0 times</p>
      <button>Click me</button>
    </div>
  );
}

export default Counter;

This component is static. It always shows “You clicked 0 times.” To make it interactive, we need to introduce state. State is data that a component can hold and change over time. When state changes, React automatically re-renders the component to reflect the new data.

To manage state in functional components, we use a special function from React called the useState hook.

import React, { useState } from 'react';

function Counter() {
  // Declare a new state variable called "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button>Click me</button>
    </div>
  );
}

Let's break that down:

useState(0): We call useState with the initial value of our state (0 in this case).
const [count, setCount]: useState returns a pair of values: the current state (count) and a function that lets you update it (setCount). We use array destructuring to get both values.

Handling Events

Our counter still doesn't do anything when you click the button. To make it work, we need to handle the button's click event.

In React, you handle events by passing a function to special attributes like onClick. When the event occurs, React calls your function.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* When the button is clicked, call setCount */}
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Now, when you click the button:

The onClick event handler is triggered.
It calls setCount(count + 1), passing the new value for the state.
React updates the count state variable.
React re-renders the Counter component, and the paragraph now displays the updated count.

This simple cycle—state change causing a re-render—is the core of how interactive UIs are built in React.

Now that you've seen the fundamentals, let's test your knowledge.

Quiz Questions 1/6

What is the primary purpose of 'state' in a React component?

Quiz Questions 2/6

In JSX, you use className instead of class to assign CSS classes. Why?

These are the building blocks for every React application. Understanding components, JSX, state, and events will prepare you for building much more complex and powerful user interfaces.

React and TypeScript Fundamentals