Building Custom React Components from Scratch

Creating custom components is an essential skill for any React developer. Custom React components allow you to reuse code, maintain a consistent design, and simplify complex UI patterns. In this tutorial, we'll walk you through building custom React components from scratch.

Prerequisites

• Basic knowledge of JavaScript
• Familiarity with React and its concepts (components, state, and props)
• A development environment with Node.js and npm installed

Table of Contents

1. Setting Up the Development Environment
2. Creating a Basic Custom Component
3. Passing Props to a Custom Component
4. Managing State within a Custom Component
5. Handling Events in a Custom Component
6. Conclusion

Setting Up the Development Environment

To start, let's set up a new React project using Create React App:

npx create-react-app custom-react-components
cd custom-react-components
npm start

This will create a new React app and start the development server. You can now view your app in the browser at http://localhost:3000.

Creating a Basic Custom Component

Let's create a simple custom component called Button. In the src folder, create a new folder called components. Inside components, create a new file called Button.js.

Add the following code to Button.js:

import React from 'react';

const Button = () => {
  return (
    <button>
      Click me
    </button>
  );
};

export default Button;

Now, let's use our custom Button component in the App component. Open src/App.js and modify the code as follows:

import React from 'react';
import './App.css';
import Button from './components/Button';

function App() {
  return (
    <div className="App">
      <h1>Custom React Components</h1>
      <Button />
    </div>
  );
}

export default App;

You should now see a button with the label "Click me" in your browser.

Passing Props to a Custom Component

Let's make our Button component more versatile by allowing it to accept a label prop. Modify the Button.js file like this:

import React from 'react';

const Button = ({ label }) => {
  return (
    <button>
      {label}
    </button>
  );
};

export default Button;

Now, update the Button component in App.js to pass a label prop:

<Button label="Click me with props!" />

The button label should now display "Click me with props!".

Managing State within a Custom Component

We'll now add state management to our Button component. This will allow us to track the number of times the button has been clicked. Update the Button.js file as follows:

import React, { useState } from 'react';

const Button = ({ label }) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        {label}
      </button>
      <p>Clicked {count} times</p>
    </div>
  );
};

export default Button;

Now, our Button component displays the number of times it has been clicked.

Handling Events in a Custom Component

To make our Button component more reusable, let's allow it to accept an onClick prop. Update the Button.js file as follows:

import React from 'react';

const Button = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

Now, modify the App.js file to pass an onClick prop to the Button component:

<Button
  label="Click me with events!"
  onClick={() => alert('Button clicked!')}
/>

When you click the button, an alert with the message "Button clicked!" should appear.

Conclusion

In this tutorial, we've demonstrated how to create custom React components from scratch, pass props, manage state, and handle events. By building custom components, you can create modular and reusable code, making your web applications more maintainable and efficient. Happy coding!