React Course: Components and State

React is a JavaScript library for building user interfaces. React adopts a component-based architecture, allowing developers to create reusable UI components. This course will delve deeply into the core concepts of React: ‘components’ and ‘state’.

1. What is a component?

A component is the basic building block of React, representing small pieces that make up the UI. Each component operates independently and can be combined with other components to form complex user interfaces.

1.1. Types of components

React components can be broadly classified into two types.

Class components: These are components defined using ES6 classes. They can manage state.
Functional components: These are components defined as JavaScript functions. Recently, a feature called Hooks has been introduced to allow for state management.

1.2. Creating a component

A React component can be created as follows.

import React from 'react';

class MyComponent extends React.Component {
    render() {
        return <h1>Hello, React!</h1>;
    }
}

The above example defines a component called ‘MyComponent’ and uses it to render the text “Hello, React!” on the screen.

2. What is state?

State refers to the data or values of a component. The state of a component is stored internally, and when the state changes, the component is automatically re-rendered.

2.1. Using state

To use state in a class component, you define the initial state in the constructor method and use the `this.setState()` method to update the state.

class MyStateComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }
    
    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }
    
    render() {
        return (
            <div>
                <p>Current count: {this.state.count}</p>
                <button onClick={this.increment}>Increase</button>
            </div>
        );
    }
}

In the example above, ‘MyStateComponent’ is a component that has the functionality to increase the count. When the `increment` method is called, the state changes, causing the component to re-render.

2.2. Managing state in functional components

To manage state in functional components, you use React’s `useState` Hook. Below is an example of a functional component that uses state.

import React, { useState } from 'react';

const MyFunctionalComponent = () => {
    const [count, setCount] = useState(0);
    
    const increment = () => {
        setCount(count + 1);
    }
    
    return (
        <div>
            <p>Current count: {count}</p>
            <button onClick={increment}>Increase</button>
        </div>
    );
}

3. The impact of state on components

State is an important factor in dynamically changing the UI of a component. When the state changes, everything related to the component is re-rendered, providing a UI that reflects the latest state.

3.1. The difference between Props and State

‘Props’, used for passing data between components, and ‘state’, used for managing data within a component, are distinct concepts. Props are read-only data passed from parent components to child components, while state is data managed internally by the component itself.

4. Managing components and state in React

A React application typically consists of multiple components, and the data flow between them occurs from parent components to child components. Below, we will explain how to effectively manage components and state.

4.1. Lifting state up

Lifting state up refers to managing state in a parent component and passing it down to child components via props. This allows multiple child components to share the same state, leading to a more consistent UI.

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { sharedState: 0 };
    }
    
    updateSharedState = (newValue) => {
        this.setState({ sharedState: newValue });
    }
    
    render() {
        return (
            <div>
                <ChildComponent sharedState={this.state.sharedState} updateSharedState={this.updateSharedState} />
            </div>
        );
    }
}

4.2. State management libraries

As projects grow larger and state management becomes more complex, it is advisable to use state management libraries such as Redux or MobX. These libraries are useful for managing global state and help simplify state management in complex applications.

For example, when using Redux, you can manage state as follows.

import { createStore } from 'redux';

const initialState = { count: 0 };

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        default:
            return state;
    }
};

const store = createStore(reducer);

5. Lifecycle of React components

React components go through the processes of creation, updating, and removal, where specific methods are called at each stage. This is referred to as the ‘lifecycle’.

5.1. Lifecycle methods

Key lifecycle methods available in class components include the following.

componentDidMount: Called after the component has finished its first rendering.
componentDidUpdate: Called after the component has been updated.
componentWillUnmount: Called when the component is unmounted (removed).

6. Conclusion

In React, components and state play a crucial role in the structure and behavior of applications. By using components to structure the UI and state to provide a dynamic user experience, developers can create applications that satisfy end users. This course aims to help you understand the basic concepts of React, build various components, and learn how to manage state.

7. Additional resources

You can find more information through the official React documentation and various online courses. Below are some useful links: