JavaScript Introduction to React: Components and State

Table of Contents

1. Fundamental Concepts
   • Components
   • State
2. Usage Methods
   • Creating Components
   • Using State in Components
3. Common Practices
   • Component Composition
   • Lifting State Up
4. Best Practices
   • Keeping Components Small and Focused
   • Using Immutability
5. Conclusion
6. References

Fundamental Concepts

Components

Components are the building blocks of a React application. They are self - contained, reusable pieces of code that can render a part of the user interface. There are two main types of components in React:

• Functional Components: These are JavaScript functions that take in props (short for properties) as an argument and return a React element. They are also known as stateless components because they do not manage their own state.

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

• Class Components: These are JavaScript classes that extend the React.Component class. They have their own state and lifecycle methods.

// Class Component Example
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

State

State is an object that stores data that can change over time within a component. It allows components to be dynamic and interactive. State can only be used in class components or functional components with the help of React Hooks (a feature introduced in React 16.8). When the state of a component changes, React automatically re - renders the component to reflect the new state.

Usage Methods

Creating Components

Functional Components

As shown in the previous example, creating a functional component is as simple as defining a JavaScript function that returns a React element.

function Greeting(props) {
    return <p>Welcome, {props.user}</p>;
}

To use this component, you can include it in another component’s render method:

function App() {
    return (
        <div>
            <Greeting user="John" />
        </div>
    );
}

Class Components

To create a class component, you need to extend the React.Component class and define a render method that returns a React element.

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }

    render() {
        return <p>Count: {this.state.count}</p>;
    }
}

Using State in Components

Class Components

In class components, you initialize the state in the constructor. You can then update the state using the setState method.

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
            </div>
        );
    }
}

Functional Components with Hooks

In functional components, you can use the useState hook to manage state.

import React, { useState } from 'react';

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

    const increment = () => {
        setCount(count + 1);
    }

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

Common Practices

Component Composition

Component composition is the process of combining multiple components to create more complex UIs. You can use smaller components as building blocks to create larger ones.

function Header() {
    return <h1>My App</h1>;
}

function Content() {
    return <p>This is the main content.</p>;
}

function Footer() {
    return <p>&copy; 2023 My App</p>;
}

function App() {
    return (
        <div>
            <Header />
            <Content />
            <Footer />
        </div>
    );
}

Lifting State Up

Lifting state up is a pattern where you move the state from a child component to a common parent component. This allows multiple child components to share and synchronize the state.

class TemperatureInput extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        this.props.onTemperatureChange(e.target.value);
    }

    render() {
        const temperature = this.props.temperature;
        return (
            <input
                type="text"
                value={temperature}
                onChange={this.handleChange}
            />
        );
    }
}

class Calculator extends React.Component {
    constructor(props) {
        super(props);
        this.state = { temperature: '' };
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    }

    handleCelsiusChange(temperature) {
        this.setState({ temperature });
    }

    render() {
        const temperature = this.state.temperature;
        return (
            <div>
                <TemperatureInput
                    temperature={temperature}
                    onTemperatureChange={this.handleCelsiusChange}
                />
            </div>
        );
    }
}

Best Practices

Keeping Components Small and Focused

Components should have a single responsibility. This makes them easier to understand, test, and maintain. For example, a button component should only be responsible for rendering a button and handling its click events.

Using Immutability

When updating the state, it’s important to use immutability. Instead of directly modifying the state object, create a new object with the desired changes. In React, using immutability helps React detect changes more efficiently and enables features like time - travel debugging.

// Bad practice: direct state modification
this.state.list.push('new item');

// Good practice: using immutability
this.setState(prevState => ({
    list: [...prevState.list, 'new item']
}));

Conclusion

Components and state are fundamental concepts in React that allow you to build complex and interactive user interfaces. By understanding how to create and use components, manage state, and follow common practices and best practices, you can write more maintainable and efficient React code. Whether you are using class components or functional components with hooks, the principles of components and state remain the same.

References

• React Official Documentation: https://reactjs.org/docs/getting-started.html
• React Hooks Documentation: https://reactjs.org/docs/hooks-intro.html