Introduction to React

React is a popular JavaScript library for building user interfaces. It allows you to create reusable UI components and manage the state of your application efficiently. With React 19, you can take advantage of the latest features and improvements to build scalable and performant applications.

Basic Example

To get started with React, let’s consider a simple example of a counter component. This component will display a count and allow the user to increment or decrement it.

import React, { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, we use the useState hook to initialize a state variable count and an setCount function to update it. We then render the count and two buttons to decrement and increment the count.

Advanced Usage

Let’s consider a more complex example of a todo list application. This application will allow users to add, remove, and toggle the completion of todo items.

import React, { useState } from 'react';
 
function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Buy milk', completed: false },
    { id: 2, text: 'Walk the dog', completed: false },
  ]);
 
  const handleAddTodo = (text) => {
    setTodos([...todos, { id: todos.length + 1, text, completed: false }]);
  };
 
  const handleRemoveTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };
 
  const handleToggleCompleted = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };
 
  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggleCompleted(todo.id)}
            />
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
            <button onClick={() => handleRemoveTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="Add new todo"
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            handleAddTodo(e.target.value);
            e.target.value = '';
          }
        }}
      />
    </div>
  );
}

In this example, we use the useState hook to initialize a state variable todos and an setTodos function to update it. We then render a list of todo items and allow users to add, remove, and toggle the completion of todo items.

Best Practices

• Use functional components: React 19 encourages the use of functional components, which are easier to read and maintain.
• Use hooks: Hooks like useState and useEffect allow you to manage state and side effects in a functional component.
• Keep components small and focused: Break down large components into smaller, reusable components to improve maintainability and reusability.
• Use JSX syntax highlighting: Use a code editor with JSX syntax highlighting to improve code readability.

Key Takeaways

• React is a JavaScript library for building user interfaces: React allows you to create reusable UI components and manage the state of your application efficiently.
• Use the useState hook to manage state: The useState hook allows you to initialize a state variable and an update function to manage state in a functional component.
• Break down large components into smaller components: Keep components small and focused to improve maintainability and reusability.
• Use modern React 19 features: Take advantage of the latest features and improvements in React 19 to build scalable and performant applications.