Module 1 - React Components and Component States

Understanding React

Learn about React and the problems it solves in modern web development.

React has quickly become one of the most commonly used libraries for building applications today. React abstracts away a lot of DOM manipulation syntax - your entire application will live within one targeted DOM element, and React will handle the rest for you.

With today's rich user interfaces that interact with ever-changing data, user interactions, and animations, the DOM is doing a lot of work. For large-scale applications like Twitter or Facebook, React is essential because it offloads the app's state (data) from the DOM.

Working with the DOM API directly is challenging. React's "virtual DOM" interacts with the actual DOM for us. We tell it which elements and state to render, and it will do so. Better yet, it will "react" when the state changes and update the DOM accordingly.

In a process called "reconciliation," React detects when the app's state has changed, updates the virtual DOM, identifies which nodes have changed, and then updates only those specific nodes on the actual DOM. This approach significantly reduces the load on browsers, making React powerful and efficient.

Working with Components

Understand how to create and work with React components.

React components are the building blocks of your application. A component is simply a JavaScript function that returns JSX (JavaScript Extension), which looks like HTML but is actually a JavaScript object that React can render to the DOM.

Components are usually created in their own JS files and exported so that other files can import and use them. Here's a simple component example:

import React from 'react';

const Intro = () => {
  return (
    <div>
      <h1>Hi BloomTech!</h1>
    </div>
  );
};

Inside JSX, you can use curly braces {} to evaluate any JavaScript expression. For example:

const greeting = "Hi BloomTech!";

return (
  <div>
    <h1>{greeting}</h1>
  </div>
);

React's design philosophy includes the separation of concerns (each piece of code should do one thing) and declarative programming (telling the computer what you want it to do rather than how to do it).

State in React

Learn about state management in React components.

State is a fundamental concept in React that allows components to create and manage their own data. Unlike props, which are passed from parent to child, state is created and managed within a component.

In React, we use the useState hook to create and manage state in functional components. When state changes, React automatically re-renders the component with the new state data.

Here's a basic example of using state:

import React, { useState } from 'react';

function Counter() {
  // State declaration with initial value of 0
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The useState hook returns an array with two elements: the current state value (count) and a function to update it (setCount). When the button is clicked, setCount is called with the new value, which triggers a re-render of the component.

Event Handling and State Changes

Learn how to handle events and update component state.

React provides a straightforward way to handle browser events like clicks, form submissions, and key presses. Event handlers in React are similar to those in regular DOM manipulation but use camelCase naming (onClick instead of onclick) and take functions as event handlers rather than strings.

When an event handler is triggered, you can update state using the setter function from useState, which causes the component to re-render with the new state.

Here's an example of handling events and updating state:

import React, { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  
  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };
  
  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };
  
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Login attempted with:', username, password);
    // You would typically send this data to a server
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input 
          type="text" 
          value={username} 
          onChange={handleUsernameChange} 
        />
      </div>
      <div>
        <label>Password:</label>
        <input 
          type="password" 
          value={password} 
          onChange={handlePasswordChange} 
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
}

Module Project

Apply your knowledge by building a React application that demonstrates component creation and state management.