React 02: React Components and Props 🚀

PREVIOUS BLOG:
JSX and Printing Value in JSX

In this blog, we’ll explore React components and props, providing examples to illustrate these concepts. Let’s dive in! 🎉

React Components 🧩

A React component is a reusable piece of UI that can be composed to build more complex interfaces. There are two types of components in React: functional components and class components. In this blog, we’ll focus on functional components, which are simpler and more commonly used in modern React development. 💻

Example of a Normal Component 📝

Here’s an example of a simple functional component in React:

import React from "react";

function Normal() {
  return (
    <div>
      <h4>This is a Normal Component</h4>
    </div>
  );
}

export default Normal;

This component, Normal, returns a div containing a heading. It's a self-contained piece of UI that can be reused in different parts of an application. 🏗️

React Props 📦

Props (short for “properties”) are a way to pass data from parent components to child components. They are read-only, meaning that a child component cannot modify the props it receives. 🚫✏️

Example of a Component with Props 🛠️

Let’s enhance our component to accept props:

import React from "react";

function PropsC({ title }) {
  return (
    <div>
      <h4>This is a Prop Component: Title is {title}</h4>
    </div>
  );
}

export default PropsC;

In this example, PropsC is a functional component that accepts a title prop. The prop is then used within the component to display a customized message. ✨

Comparison with Non-Destructured Props 🔄

Here’s a version of the same component without destructuring:

import React from "react";

function PropsComponent(prop) {
  return (
    <div>
      <h4>This is a Prop Component: Title is {prop.title}</h4>
    </div>
  );
}

In this version, we access the title prop through the prop object. Destructuring is a cleaner and more concise way to handle props in functional components. 🔍

Using Components and Props in an Application 🖥️

Now, let’s see how to use these components in a React application:

import React from "react";
import "./style.css";
import Normal from './components/normal';
import PropsComponent from './components/props-comp';

export default function App() {
  const text = "React Props";

  return (
    <div>
      <h1>Hello React</h1>
      <Normal />
      <PropsComponent title={text} />
    </div>
  );
}

In the App component, we import the Normal and PropsComponent components. We then use these components in the App component's JSX, passing a title prop to PropsComponent. 🌟

Note on Default Exports 📝

Because we have used export default in our component files, we can import these components with any name. For example, even if we named our component Normal, we could import it with a different name:

import CustomName from './components/normal';

This flexibility is one of the advantages of using default exports in JavaScript modules. 🎨

STACKBLITZ LINK
https://stackblitz.com/edit/react-components-prop

Conclusion 🏁

React components and props are fundamental concepts that allow developers to build reusable and dynamic user interfaces. By understanding how to create and use components, as well as how to pass and utilize props, you can create more modular and maintainable React applications. Happy coding! 💻✨

UP NEXT:
React 03: Passing Data from Child to Parent Component in React 🚀