Introduction To Components | Components

Understanding the concept of components in React

Components are the building blocks of a React application. They allow you to break down your UI into reusable, self-contained pieces, making your code more modular and easier to manage. This tutorial provides an introduction to the concept of components in React.

Key Points:

Components are reusable pieces of UI that can be nested, managed, and handled independently.
There are two types of components in React: functional components and class components.
Components can accept inputs called "props" and manage their own state.
Components make it easier to build and maintain complex user interfaces.

Functional Components

Functional components are simple JavaScript functions that return JSX. They are the most common type of component in modern React applications.

// Functional component example
import React from 'react';

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

export default Welcome;

Class Components

Class components are more feature-rich than functional components. They are defined as ES6 classes and can manage their own state and lifecycle methods.

// Class component example
import React, { Component } from 'react';

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

export default Welcome;

Props

Props (short for properties) are inputs to a React component. They are passed to the component via HTML attributes and are accessible within the component using props.

// Using props in a functional component
import React from 'react';

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

export default Welcome;

// Using the Welcome component
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';

ReactDOM.render(<Welcome name="John" />, document.getElementById('root'));

State

State is a built-in object that allows components to create and manage their own data. State is used to store data that changes over time or in response to user actions.

// Using state in a class component
import React, { Component } from 'react';

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

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

export default Counter;

Lifecycle Methods

Class components can define lifecycle methods to run code at specific points in a component's lifecycle, such as when the component mounts or updates.

// Using lifecycle methods in a class component
import React, { Component } from 'react';

class LifecycleDemo extends Component {
    componentDidMount() {
        console.log('Component did mount');
    }

    componentDidUpdate() {
        console.log('Component did update');
    }

    componentWillUnmount() {
        console.log('Component will unmount');
    }

    render() {
        return <div>Lifecycle Demo</div>;
    }
}

export default LifecycleDemo;

Composing Components

Components can be composed together to build complex user interfaces. This means you can use one component inside another, passing data down through props.

// Composing components
import React from 'react';

function App() {
    return (
        <div>
            <Welcome name="Alice" />
            <Welcome name="Bob" />
            <Welcome name="Charlie" />
        </div>
    );
}

export default App;

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

Summary

In this tutorial, you learned about the concept of components in React. Components are the building blocks of React applications, allowing you to break down your UI into reusable, self-contained pieces. You learned about functional components, class components, props, state, lifecycle methods, and composing components. Understanding these concepts is essential for building and maintaining complex user interfaces in React.

React - Introduction to Components