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.
What are functional components in React?
Functional components, also known as stateless or dumb components, are simply JavaScript functions that take in props and return a JSX element. They do not have their own state and are purely responsible for rendering the UI based on the props that are passed to them.
What are class-based components in React?
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 can have their own state and lifecycle methods and are responsible for rendering the UI and managing the state of their component.
What is the difference between stateful and stateless components in React?
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.
How do you create a component in React?
To create a component in React, 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.
How do you render a component in React?
To render a component in React, you simply call the component in your JSX element and pass it any necessary props. You can then use the ReactDOM.render()
function to render the JSX element to the DOM. The ReactDOM.render()
function takes in a JSX element and a DOM element, and it renders the JSX element to the DOM element.
For example:
import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
return <h1>Hello, world!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('root'));