Unlocking React's Secret Sauce: Props, PropTypes, and More!

Default Export vs Named Export

In JavaScript, module exports play a crucial role in organizing and reusing code. Let's explore the difference between default exports and named exports.

Consider the following module1.mjs file:

// module1.mjs
import ui, {a,b} from './module2.mjs';
console.log(ui);
console.log(a);
console.log(b);

And the corresponding module2.mjs file:

// module2.mjs

const a = "Puja";
const b = "Annu";
const c = "aaaa";

export default c;
export {a};
export {b};

Here, c is exported by default. When importing in another file, you can choose a different variable name for it. However, for named exports like a and b, you must use the same variable names during import.

Now if we execute in terminal, we get results as:

Props in React Components

Props (short for properties) are essential in React components, allowing the passing of variables to determine their values. Let's look at an example with a Navbar component.

NavbarComponent

// NavbarComponent.js
import React from 'react'
import PropTypes from 'prop-types';

export default function Navbar(props) {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
    <a className="navbar-brand" href="/">{props.title}</a>
    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>

    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav mr-auto">
        <li className="nav-item active">
          <a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="/">{props.aboutText}</a>
        </li>

      </ul>
      <form className="form-inline my-2 my-lg-0">
        <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
          <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  )
}

In App.js we can pass values

import './App.css';
import Navbar from './components/Navbar';


function App() {
  return (
    <>
      <Navbar title="textUtils2" aboutText="aboutText"/>
    </>
  );
}

export default App;

Here instead of hard coding the title and aboutText we have used props.

PropTypes

PropTypes are crucial for defining types for properties in React components. It helps catch potential bugs by ensuring that the correct data types are passed.

Example
here we have a title we want to send always in string, so we must define the type for it.

we should also import proptypes in our component
Syntax:

Navbar.propTypes = {
  title : PropTypes.string,
  aboutText: PropTypes.string
}

Now if I pass an integer then we will get the error:

   <Navbar title={3} aboutText="aboutText"/>

Default PropTypes

If we don't want to get undefined then we should define the default proptypes

suppose we have the prop values required but forget to pass the value then we get undefined. Eg

Navbar.propTypes = {
  title : PropTypes.string.isRequired,
  aboutText: PropTypes.string.isRequired
}

import './App.css';
import Navbar from './components/Navbar';


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

In this case, we will get an error

We can define default prop values to avoid this

Navbar.defaultProps= {
  title : "title is here",
  aboutText: "about is here"
}

now we can see output without errors

By gaining a solid understanding of module exports and leveraging the power of props and PropTypes in React, we can build applications that are not only modular but also resilient to potential bugs. The flexibility of default exports and the structure provided by named exports in JavaScript, combined with the robust type-checking capabilities of PropTypes, contribute to the creation of modular and error-resistant React components.

Stay tuned for more insights in my next blog! Thank you for reading, and feel free to share your feedback or ask questions in the comments