Understanding the Structure of a React Component

In this article, we’ll take a closer look at the structure of a React component and how it works. We’ll cover the different types of components, how to create and render components, and how to pass data between components.

Types of components

In React, a component is a piece of code that represents a part of a UI. Components can be either functional or class-based, and they can be either stateful or stateless.

Functional components

Functional components, also known as stateless or dumb components, are simply JavaScript functions that take in props (short for properties) and return a JSX element. They are called functional because they do not have their own state and are purely responsible for rendering the UI based on the props that are passed to them.

Here’s an example of a functional component:

import React from 'react';

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

In this example, the Welcome component is a functional component that takes in a name prop and returns a JSX element that displays a greeting with the name.

Class-based components

Class-based components, also known as stateful or smart components, are JavaScript classes that extend the React.Component class and define a render() method. They are called class-based because they are defined using a class, and they can have their own state and lifecycle methods.

Here’s an example of a class-based component:

import React from 'react';

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

In this example, the Welcome component is a class-based component that has a render() method that returns a JSX element that displays a greeting with the name prop.

Stateful vs stateless components

Stateful components, also known as container components, are components that manage their own state and pass it down to their children through props. They are often class-based components that have a state object and use lifecycle methods to update the state.

Stateless components, on the other hand, do not have their own state and are purely responsible for rendering the UI based on the props that are passed to them. They are often functional components that take in props and return a JSX element.

Creating and rendering components

Now that you know the different types of components, let’s take a look at how to create and render them in a React application.

Creating components

To create a component, you simply define a function or class that returns a JSX element. The JSX element can be as simple or as complex as you need it to be, and it can include other components as well.

Here’s an example of a component that returns a simple JSX element:

And here’s an example of a component that returns a more complex JSX element that includes other components:

import React from 'react';

function Welcome(props) {
  return (
    <div>
      <h1>Welcome, {props.name}</h1>
      <p>This is your dashboard.</p>
      <Button label="Logout" onClick={props.onLogout} />
    </div>
  );
}

function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

In this example, the Welcome component is a functional component that takes in a name and onLogout prop and returns a JSX element that includes a heading, a paragraph, and a Button component. The Button component is a functional component that takes in a label and onClick prop and returns a JSX element that is a button with the given label and onClick handler.

Rendering components

To render a component, you simply call the component in your JSX element and pass it any necessary props.

Here’s an example of how to render the Hello component:

import React from 'react';
import ReactDOM from 'react-dom';

function Hello() {
  return <h1>Hello, world!</h1>;
}

ReactDOM.render(<Hello />, document.getElementById('root'));

In this example, the Hello component is rendered to the DOM using the ReactDOM.render() function. The ReactDOM.render() function takes in a JSX element and a DOM element, and it renders the JSX element to the DOM element.

Passing data between components

One of the key benefits of using components is the ability to reuse them and pass data between them. In React, you can pass data between components using props.

Props are properties that are passed to a component from its parent component. They are used to pass data from the parent component to the child component, and they can be accessed inside the child component using the props object.

Here’s an example of how to pass data between components using props:

import React from 'react';
import ReactDOM from 'react-dom';

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

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

ReactDOM.render(<App />, document.getElementById('root'));

In this example, the App component is the parent component and the Welcome component is the child component. The App component renders three instances of the Welcome component and passes a different name prop to each instance. The Welcome component then uses the name prop to display a personalized greeting.

Props are read-only, which means that the child component cannot modify the props that are passed to it. If the child component needs to update the data, it should ask the parent component to update it through a callback function or by using another state management solution such as Redux or MobX.

Conclusion

In this article, we’ve learned about the structure of a React component and how it works. We’ve covered the different types of components, how to create and render components, and how to pass data between components using props. Understanding the structure of a React component is an essential part of building applications with React, and it is a key step towards mastering the framework.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

import React from 'react';
import ReactDOM from 'react-dom';

function Hello() {
  return <h1>Hello, world!</h1>;
}

ReactDOM.render(<Hello />, document.getElementById('root'));