Understanding Components in React : A Beginner’s Guide with Examples

React JS / By / / 4 minutes of reading
Introduction

React, a popular JavaScript library, is all about building user interfaces by breaking them down into reusable components. Components are the building blocks of any React application. They allow you to structure your code more efficiently and make it easier to maintain.

What is a Component in React?

A React component is essentially a JavaScript function or class that can optionally accept inputs known as props and return a React element (i.e., JSX) that describes how a section of the UI should appear. React components can be broadly categorized into two types :

  • Functional Components
  • Class Components
1. Functional Components

Functional components are the simplest way to create components in React. They are JavaScript functions that return JSX. These components are stateless, but with the introduction of React Hooks, they can also manage state.

				
					//Example of a Functional Component:
import React from 'react';

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

export default Welcome;

In this example, Welcome is a functional component that takes props as an argument and renders a greeting message using the name prop passed to it.

Using the Functional Component 
				
					import React from 'react';
import Welcome from './Welcome';

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

export default App;
2. Class Components

Before Hooks were introduced, class components were the primary way to create components with state and lifecycle methods. Unlike functional components, class components are more feature-rich and use this keyword to access props and state.

				
					//Example of a Class Component:
import React, { Component } from 'react';

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

export default Greeting;
Using the Class Component:
				
					import React from 'react';
import Greeting from './Greeting';

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

export default App;

Class components use the render method to return JSX, and props are accessed using 'this.props'.

3. Props in React

Props, short for properties, are read-only inputs passed to components to customize their behavior. Both functional and class components can accept props.

				
					//Example Using Props:
function UserProfile(props) {
  return (
    <div>
      <h2>{props.username}</h2>
      <p>Email: {props.email}</p>
    </div>
  );
}

export default UserProfile;

When rendering this component, you can pass different values for username and email :

<UserProfile username=”JohnDoe” email=”[email protected]” ></UserProfile>

4. State in React

State is a way to track data within a component. While props are passed from parent to child components, the state is maintained within a component and can change over time.

				
					//Example of State in a Functional Component with Hooks:
import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button> setCount(count + 1)}&gt;Increase</button>
    </div>
  );
}

export default Counter;
5. Lifecycle Methods in Class Components

Class components come with lifecycle methods that allow you to control the component’s behavior at different stages. Some of the common lifecycle methods include:

  • componentDidMount()
  • componentDidUpdate()
  • componentWillUnmount()
				
					//Example of a Lifecycle Method:
import React, { Component } from 'react';

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

  componentDidMount() {
    this.timerID = setInterval(() =&gt; this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ seconds: this.state.seconds + 1 });
  }

  render() {
    return <h2>Seconds: {this.state.seconds}</h2>;
  }
}

export default Timer;
6. Reusable Components

React components can be reused across different parts of your application. By passing different props, you can customize how they behave and appear without having to rewrite code.

				
					//Example of a Reusable Button Component:
function Button(props) {
  return (
    <button style="{{">
      {props.text}
    </button>
  );
}

export default Button;

You can reuse this button across the app with different props :

<Button color =”blue” text =”Submit”></Button>
<Button color=”green” text=”Save”></Button>

Important Points : 

  • Importance of Components: Understanding components is essential for mastering React development.
  • Component Types: React offers two main types of components: functional and class components.
  • Reusability: Components are powerful tools for building reusable and maintainable UI elements.
  • Props and State: React components use props and state to manage data and handle UI behavior.
  • Lifecycle Methods: Class components support lifecycle methods to manage component behavior at different stages.
  • Application Structure: Breaking an application into smaller components simplifies development.
  • Scalability: Using components improves the scalability of an application, making it easier to manage and grow.

Related Posts