React JS Tutorial: Generic Components 🎯

Welcome to our in-depth tutorial on Generic Components in React JS! This lesson is designed for beginners and intermediate learners. By the end of this tutorial, you'll have a solid understanding of how to create, use, and optimize generic components in your React applications. 📝 Note: We'll cover the basics first, then gradually introduce more complex concepts.

What are Generic Components? 📝

In React, generic components are reusable pieces of code that can accept various properties and render different UI based on those properties. They allow us to write less code and create more flexible, maintainable applications.

Creating a Generic Component 🎯

To create a generic component, we'll follow these steps:

Create a new React component file.
Define the component with a functional or class-based structure.
Accept properties and use them to render the UI.

Here's a simple example of a generic component that accepts a title property and renders a heading based on the provided title:

jsx

// CustomHeader.js
import React from 'react';

const CustomHeader = ({ title }) => {
  return <h1>{title}</h1>;
};

export default CustomHeader;

Now, you can use this component in another file like so:

jsx

// App.js
import React from 'react';
import CustomHeader from './CustomHeader';

const App = () => {
  return (
    <div>
      <CustomHeader title="Welcome to React!" />
    </div>
  );
};

export default App;

💡 Pro Tip: Make sure to import the component at the top of your file and wrap it with React.createElement or React.Fragment when using class-based components.

Props in Generic Components 💡

In the previous example, the title prop is a simple string. However, props can also be objects, arrays, or even functions. Here's an example of a generic component that accepts a function prop and executes it:

jsx

// CustomFunction.js
import React from 'react';

const CustomFunction = ({ functionToRun }) => {
  functionToRun();
  return <div>This text is not affected by the function</div>;
};

export default CustomFunction;

Now, you can use this component in your app and pass a function as a prop:

jsx

// App.js
import React, { useEffect } from 'react';
import CustomFunction from './CustomFunction';

const App = () => {
  useEffect(() => {
    console.log('Hello from useEffect!');
  }, []);

  return (
    <div>
      <CustomFunction functionToRun={() => console.log('Hello from CustomFunction!')} />
    </div>
  );
};

export default App;

Default Props 💡

In some cases, you might want to provide default values for props. To achieve this, you can create a defaultProps object:

jsx

// CustomHeader.js
import React from 'react';

const CustomHeader = ({ title = 'Default Title' }) => {
  return <h1>{title}</h1>;
};

CustomHeader.defaultProps = {
  title: 'Default Title',
};

export default CustomHeader;

Now, when you use this component without providing a title prop, it will default to 'Default Title'.

Quiz: Generic Components 💡

Conclusion 📝

In this tutorial, we learned about generic components and how to create them in React. We discussed props and their various types, as well as how to provide default props. By the end of this lesson, you should have a solid foundation for creating reusable, flexible components in your React applications.

We hope you enjoyed learning with us! In our next tutorial, we'll delve deeper into React by discussing state management and lifecycle methods. Stay tuned! 🎯