In this quick note, we'll explore the two main ways you can create components in React: Functional Components and Class Components. Here's a concise breakdown of both:

Functional Components

Here's an example of a functional component:

import React from 'react';

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

Key Points:

• Plain JavaScript `functions`

• Directly access `props` as the function's parameter.

• Simpler structure without the need for the keyword `this`

Class Components

Here's an example of a class component:

import React, { Component } from 'react';

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

Key Points:

• Created using JavaScript classes

• Contains a `render()` method to display content.

• Access properties using `this.props`

Summary

Hopefully, you can now distinguish between the two main methods of creating components in React. Currently, functional components are gaining popularity thanks to Hooks. These Hooks provide functional components with abilities that were once limited to class components. The benefits? Cleaner code, improved readability, and fewer potential bugs.🧑‍💻

Resources

Here are some of the resources that inspired this note:

Documentation

• React Documentation

• React Hooks