Chapter 2: Components - The Building Blocks

Welcome back to "React Revolution"! In Chapter 1, I introduced you to React and helped you set up your first React application. Now, it's time to dive deeper into the heart of React – components. Understanding components is crucial because they are the building blocks of any React application.

2.1 What are React Components?

Think of components as JavaScript functions that return HTML (or more accurately, JSX). They help you break down your UI into reusable, self-contained pieces. This modularity makes your code more maintainable and easier to understand.

There are two main types of components in React: Functional Components and Class Components.

2.2 Functional Components

Functional components are simply JavaScript functions that return JSX. They are the simplest way to create a component in React.

Let's create a simple functional component called WelcomeMessage:

import React from 'react';

function WelcomeMessage() {
  return (
    <div>
      <h2>Welcome to React Revolution!</h2>
      <p>Let's build something amazing together.</p>
    </div>
  );
}

export default WelcomeMessage;

Here, we define a function WelcomeMessage that returns some JSX. We then export it so we can use it in other parts of our application.

To use this component in our App component, we import and include it:

import React from 'react';
import './App.css';
import WelcomeMessage from './WelcomeMessage';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>React Revolution</h1>
        <WelcomeMessage />
      </header>
    </div>
  );
}

export default App;

When you save and refresh your browser, you should see the welcome message displayed on your screen.

2.3 Class Components

Before hooks were introduced in React 16.8, class components were the only way to manage state and lifecycle methods. They are still relevant and useful for understanding the evolution of React.

Here's how you can convert the WelcomeMessage component into a class component:

import React, { Component } from 'react';

class WelcomeMessage extends Component {
  render() {
    return (
      <div>
        <h2>Welcome to React Revolution!</h2>
        <p>Let's build something amazing together.</p>
      </div>
    );
  }
}

export default WelcomeMessage;

In this example, WelcomeMessage extends Component, and we define a render method that returns JSX. The usage in App remains the same.

2.4 Props - Passing Data to Components

Props (short for properties) allow you to pass data from one component to another. This is similar to how function arguments work in JavaScript.

Let's modify our WelcomeMessage component to accept a name prop:

import React from 'react';

function WelcomeMessage(props) {
  return (
    <div>
      <h2>Welcome, {props.name}!</h2>
      <p>Let's build something amazing together.</p>
    </div>
  );
}

export default WelcomeMessage;

Now, let's pass the name prop from the App component:

import React from 'react';
import './App.css';
import WelcomeMessage from './WelcomeMessage';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>React Revolution</h1>
        <WelcomeMessage name="Vashishth" />
      </header>
    </div>
  );
}

export default App;

Bypassing the name prop to WelcomeMessage, it now displays a personalized message. Props make your components dynamic and reusable.

Congratulations! You've just learned the basics of React components. We covered:

• What React components are

• How to create functional and class components

• How to pass data to components using props

In the next chapter, we'll dive into state management and how to handle dynamic data within your components. Understanding the state is crucial for building interactive applications.

Feel free to experiment with the code and try creating your components. The more you practice, the more comfortable you'll become with React.

Happy Coding!