React Components and Props

Introduction

Component in React are the building blocks of an application. They are reusable code blocks that can be used to build pieces of the UI instead of putting everything under one single file. Also, a component can have other aspects such as states, props, etc.

There are two types of components in React:

1. Class Components
2. Functional Components

Let's look at each one now.

Class Components

As the name suggests, a class component is a JavaScript class extended to a React Component. It has a mandatory render() method that returns a JSX element. React was mostly class-based earlier on, so we needed class components for managing states.

This is how it looks:

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;

Class components aren't really used anymore with the introduction of React hooks. Most professionals recommend using functional components these days.

Functional Components

A functional component is just a regular JavaScript function that returns a JSX element as well but it doesn't use the render() method.

export default function App() {
  return (
   <h1>Hello World</h1>
   );
}

The code above is a functional component that returns a JSX element. Functional components are more easily readable than class components as you can see. It it also easier to work with functional components because class components can be more complex. With the introduction of React hooks, "state" could now be declared in functional components.

Props In React

An important concept of components is how they communicate. React has a special object called props, which means property. It is used to pass data from a parent component to a child component. Props only transport data in a one-way flow, from parent to child component.

Let's look at the use of props in class components, We'll look at a very simple example:

import React from "react";

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

In the code above, we are creating a Student Component that will return the following h1 tag with whatever name property that is passed to it. We will need to import the component into the parent component that is the App.js file and pass the data to it.

import React from "react";
import Student from "./Student"

export default class App extends React.Component {
 render() {
  return (
   <div className="App">
    <Student name="Rex" />
   </div>
  );
 }
}

This would return a simple h1 tag with the name property that was passed to the component as seen below.

Now let's look at how to use props in functional components.

import React from "react";

export default function Student({firstName, lastName}) {
  return (
    <div>
      <h1>First Name: {firstName}</h1>
      <h2>Last Name: {lastName}</h2>
    </div>
  );
} 

As you can see, we destructured the props that we want to pass from the parent component.

import React from "react";
import Student from "./Student";

function App() {
  return (
    <div className="App">
      <Student firstName="John" lastName="Doe" />
    </div>
  );
}

export default App;

After passing the props we want in our App.js file what would be rendered will look like this:

Conclusion

We've seen how to pass props between components and why functional components are preferred to class components. Props are useful for passing data but not for manipulating it.

Thank you for Reading!