React Episode 2: React Components

React components

Understanding React Components: A Beginner’s Guide:

React is a popular JavaScript library for building user interfaces, and at its heart lie components. Think of React components as the building blocks of your application — like the pieces of a puzzle that come together to form the complete picture.

What Are React Components?

In simple terms, a React component is a self-contained module that renders some output (usually HTML via JSX) and can manage its own data. They are reusable pieces of code that let you split your user interface into independent, manageable parts. Whether it’s a button, a form, or an entire page layout, each piece can be built as a component.

Types of React Components

There are two primary types of React components:

1. Functional Components

• What They Are:
  These are plain JavaScript functions that return JSX (a syntax extension that looks like HTML). They are easy to write and understand.
• Why Use Them:
  Functional components are straightforward. They are ideal for displaying data or for parts of your UI that do not require complex behavior.

2. Class Components

• What They Are:
  Class components are created using ES6 classes. They allow you to use additional features like internal state management and lifecycle methods.
• Why Use Them:
  While a bit more verbose, class components are useful when your component needs to hold data that changes over time or perform actions at specific moments (like when the component is first rendered).
  note: class components are not used by developers nowadays all react developer prefer functional components as recommended in react docs.

Key Concepts in React Components

Props (Properties)

• What They Are:
  Props are inputs to a component, much like arguments to a function. They let you pass data and configuration from one component to another.
• Example:
  If you have a component that displays a greeting, you can pass a name as a prop to customize the message.

State

• What It Is:
  State is data that a component manages and can change over time. It’s like a component’s memory.
• How It Works:
  When the state changes (for example, after a user interaction), React updates the component to reflect those changes.

Lifecycle Methods

• What They Are:
  In class components, there are special methods that run at different points in a component’s life (like when it’s created, updated, or removed from the screen).
• Why They Matter:
  These methods help you perform actions such as fetching data, setting up subscriptions, or cleaning up resources.

Get Sarfaraz Ali’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Reusability and Composition

• Reusability:
  One of the strengths of React is that you can use the same component in multiple places throughout your application. This avoids repetition and makes your code more organized.
• Composition:
  Just like building with Lego blocks, you can combine smaller components to create more complex user interfaces.

How Do React Components Work?

When you build an application with React, you design a hierarchy of components. Each component is responsible for rendering a part of the interface. When data (props or state) changes, React efficiently updates only the affected components rather than reloading the whole page. This makes your app faster and more responsive.

In Summary

• Modularity:
  React components allow you to break down your user interface into small, manageable pieces.
• Reusability:
  Once you create a component, you can reuse it wherever needed.
• Maintainability:
  By keeping your components small and focused, it’s easier to manage, test, and update your code.

Example: Greeting Components

1. Functional Component

This functional component receives a name via props and displays a greeting:

import React from 'react';

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

export default Greeting;

2. Class Component

This class component does the same thing using ES6 classes:

import React, { Component } from 'react';

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

export default Welcome;

3. Putting It All Together

Here’s how you can use these components within an application:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Greeting from './Greeting';
import Welcome from './Welcome';

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Explanation in Easy Language

• Functional Component:
  Think of it as a simple function that takes input (props) and returns what should be shown on the screen. In this case, it shows a greeting message.
• Class Component:
  This one uses a JavaScript class and has a special method called render which returns the content to be displayed. It works the same way as the functional component but is written differently.
• App Component:
  The App component combines both the Greeting and Welcome components. It tells React to display them on the page by rendering them inside a <div>.