DEV Community: Esmatullah Niazi. ོོ

Building Blocks of Success: Mastering Reusable Components in ReactJS with Props, State, and Testing

Esmatullah Niazi. ོོ — Thu, 02 Feb 2023 17:06:58 +0000

Welcome to the world of reusable components! In this blog post, we’ll be discussing the benefits of using reusable components in ReactJS and how they can be created and managed. So, put on your favorite stickers, grab a snack, and let’s dive in!

First things first, what are reusable components? Simply put, reusable components are pieces of code that can be used multiple times throughout an application. They’re like the ultimate Lego pieces for your code. They save you time, make your code more modular, and make it easier to maintain.

Reusable components are like the ultimate Lego pieces for your code. They save you time, make your code more modular, and make it easier to maintain.

Using reusable components has many benefits. For one, it makes your code more modular, which means that it’s easier to understand and maintain. Each component only has to worry about its own functionality, which makes it easier to make changes or add new features. It also helps to keep your code DRY (Don’t Repeat Yourself), which reduces the chances of bugs and makes it easier to update your application.

Here’s an example of a reusable button component:

import React from 'react';

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

export default Button;

In this example, we have a simple button component that takes in a label prop and displays that label on the button. Now, we can use this button component anywhere in our application, making it easy to reuse and maintain.

Reusable components can also be managed using props and state. Props are used to pass data from a parent component to a child component, and state is used to manage the data and behavior of a component. Here’s an example of a reusable text input component that uses props and state:

import React, { useState } from 'react';

const TextInput = ({ label }) => {
  const [value, setValue] = useState('');

  return (
    <div>
      <label>{label}</label>
      <input
        type="text"
        value={value}
        onChange={event => setValue(event.target.value)}
      />
    </div>
  );
}

export default TextInput;

In this example, we have a text input component that takes in a label prop and displays that label as the input’s label. We also use the useState hook to manage the value state of the input, which allows the component to update its own value as the user types.

Another great thing about reusable components is that they can be composed to create more complex components. For example, you can use a reusable button component and a reusable text input component to create a reusable form component. This allows you to break down your application into smaller, more manageable pieces, making it easier to understand and maintain.

Here’s an example of a reusable form component that uses the button and text input components from the previous examples:

import React, { useState } from 'react';
import Button from './Button';
import TextInput from './TextInput';

const Form = () => {
  const [formData, setFormData] = useState({});

  const handleSubmit = () => {
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <TextInput
        label="Name"
        value={formData.name}
        onChange={value => setFormData({ ...formData, name: value })}
      />
      <TextInput
        label="Email"
        value={formData.email}
        onChange={value => setFormData({ ...formData, email: value })}
      />
      <Button label="Submit" onClick={handleSubmit} />
    </form>
  );
}

export default Form;

In this example, we have a form component that uses the reusable button and text input components. We also use the useState hook to manage the formData state, which allows the component to update its own form data as the user interacts with the form. We also added a submit button and handleSubmit function that logs the form data when the form is submitted.

Another way to manage reusable components is to use component libraries. There are many popular component libraries such as Material-UI, Ant Design, and Semantic UI React that provide a wide range of pre-built, reusable components. These libraries can save you a lot of time, as you don’t have to build all the components from scratch. They also follow design guidelines, which makes it easy to make your application look polished and professional.

Another advantage of using reusable components is that it helps with testing. By breaking down your application into smaller, reusable components, you can more easily test each component individually. This makes it easier to identify and fix bugs, and also helps to ensure that new changes don’t break existing functionality. React also has a great testing library called Jest that makes it easy to write and run tests for your components.

Here’s an example of a test for the reusable button component:

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('Button component should display the label text', () => {
  const label = 'Click me';
  const { getByText } = render(<Button label={label} />);
  const button = getByText(label);

  expect(button).toBeInTheDocument();
});

test('Button component should call onClick function when clicked', () => {
  const onClick = jest.fn();
  const { getByText } = render(<Button label="Click me" onClick={onClick} />);
  const button = getByText('Click me');

  fireEvent.click(button);
  expect(onClick).toHaveBeenCalled();
});

In this example, we use @testing-library/react to render our button component and test that it displays the correct label text and calls the onClick function when clicked. By writing tests for each reusable component, you can ensure that each component is functioning correctly and that changes to one component do not break the functionality of the other components.

In addition to the benefits of reusable components for development, it also has a positive impact on design. By creating reusable components, you can ensure that your application has a consistent look and feel. This makes it easier for users to understand and navigate your application, and also helps to create a more professional and polished look.

In conclusion, reusable components are a powerful tool in ReactJS that can help you build more maintainable, modular, efficient and consistent code. By breaking down your application into smaller, reusable components, you can easily test each component individually and ensure that your application has a consistent look and feel. Reusable components can also be managed with the help of props and state, and component libraries can save development time and provide a polished and professional look. Additionally, testing libraries like Jest can aid in catching bugs and ensuring the functionality of your reusable components. By mastering reusable components, you can take your coding skills to the next level and build successful applications.

ReactJS 101: A Beginner’s Guide to Building Reusable Components, Managing State, and Creating Real-World Applications

Esmatullah Niazi. ོོ — Wed, 01 Feb 2023 21:52:53 +0000

Welcome to the exciting world of ReactJS! If you’re new to the world of JavaScript frameworks, ReactJS is a great place to start. In this blog post, we’ll be introducing you to what ReactJS is, its main features, and how it differs from other JavaScript frameworks. So, grab a cup of coffee, sit back, and let’s dive in!

First things first, what is ReactJS? Simply put, ReactJS is a JavaScript library for building user interfaces. It’s used for building reusable UI components and managing the state of those components. ReactJS was developed and is maintained by Facebook, and it’s now widely used by companies such as Netflix, Airbnb, and Instagram.

One of the main features of ReactJS is that it allows you to build reusable components. Instead of building a new component for each page or feature, you can create a reusable component that can be used across multiple pages or features. This makes your code more modular and maintainable. Here’s an example of a reusable button component:

import React from 'react';

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

export default Button;

Another key feature of ReactJS is its approach to state management. In ReactJS, each component has its own state, which is an object that holds the data and behavior of that component. This allows for a more efficient way of managing the data and behavior of components, as opposed to managing it all in one global state. Here’s an example of a component that manages its own state:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

In this example, we have a simple counter component that uses the useState hook to manage its own count state. The count state is displayed on the page, and we also have a button that increments the count when clicked.

Now, you may be wondering how ReactJS differs from other JavaScript frameworks. One of the main differences is that ReactJS focuses solely on building user interfaces, whereas other frameworks such as Angular and Vue also include features for building the overall structure of the application. ReactJS also emphasizes the use of reusable components, whereas other frameworks may have a more rigid component structure. Additionally, ReactJS has a more efficient approach to state management with its use of hooks.

Another great feature of ReactJS is its ability to handle events. In ReactJS, you can attach event handlers to components, which allows you to handle events such as clicks, mouseovers, and more. Here’s an example of a component that handles a click event:

import React from 'react';

const ClickHandler = () => {
  const handleClick = () => {
    console.log("Button was clicked!");
  }

  return (
    <button onClick={handleClick}>Click Me!</button>
  );
}

export default ClickHandler;

In this example, we have a simple component that displays a button, and when the button is clicked, it will log a message to the console. This is just one example of how ReactJS makes it easy to handle events in a clear and concise way.

Another great thing about ReactJS is that it can be used to build real-world applications. From simple to-do lists to complex e-commerce platforms, ReactJS is a great choice for any type of project. Here’s an example of a simple weather app built with ReactJS:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const WeatherApp = () => {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    axios.get('https://api.openweathermap.org/data/2.5/weather?q=New+York&appid=YOUR_API_KEY')
      .then(response => {
        setWeather(response.data);
      });
  }, []);

  if (!weather) {
    return <p>Loading weather...</p>;
  }

  return (
    <div>
      <p>Temperature: {weather.main.temp}</p>
      <p>Weather: {weather.weather[0].main}</p>
    </div>
  );
}

export default WeatherApp;

In this example, we have a weather app that uses the useEffect hook to fetch data from an API and display the temperature and current weather for a specific location (in this case, New York). This is just one example of the many possibilities that ReactJS offers for building real-world applications.

In conclusion, ReactJS is a powerful and popular JavaScript library for building user interfaces. Its main features include reusable components and efficient state management, which make it a great choice for building maintainable and performant applications. If you’re new to the world of JavaScript frameworks, ReactJS is a great place to start!

Slide into Your Users’ Hearts ️ with Tailwind CSS and Headless UI in ReactJS

Esmatullah Niazi. ོོ — Mon, 23 Jan 2023 11:49:16 +0000

Are you tired of boring and static user interfaces? Want to add some flair and interactivity to your ReactJS app? Look no further than using Tailwind CSS and Headless UI to create slide-over components!

First, let’s install the necessary packages:

npm install @headlessui/react @tailwindcss/base

Next, we'll create a new component called SlideOver that will contain the content we want to slide in and out. We'll use the HeadlessButton component from Headless UI for the toggle button and apply some Tailwind classes for styling.

import { HeadlessButton } from '@headlessui/react'

const SlideOver = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="relative">
      <HeadlessButton
        className="absolute top-0 right-0 m-4"
        onClick={() => setIsOpen(!isOpen)}
      >
        {isOpen ? 'Close' : 'Open'}
      </HeadlessButton>

      <div
        className={`absolute top-0 left-0 w-3/4 h-full bg-white p-4 rounded-lg shadow-lg transform transition-transform duration-300 ${
          isOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        {/* Content goes here */}
      </div>
    </div>
  )
}

Notice that we’re using React’s useState hook to keep track of whether the slide-over is open or closed and toggle the state with the button. We're also using the transform and transition-transform classes from Tailwind CSS to animate the slide-over in and out.

Finally, let’s add some Tailwind classes to spice up the slide-over content and make it look great:

import { HeadlessButton } from '@headlessui/react'

const SlideOver = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="relative">
      <HeadlessButton
        className="absolute top-0 right-0 m-4"
        onClick={() => setIsOpen(!isOpen)}
      >
        {isOpen ? 'Close' : 'Open'}
      </HeadlessButton>

      <div
        className={`absolute top-0 left-0 w-3/4 h-full bg-white p-4 rounded-lg shadow-lg transform transition-transform duration-300 ${
          isOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        <h2 className="text-xl font-medium mb-4">
          Welcome to the Slide-Over
        </h2>
        <p className="text-gray-700 mb-4">
          This is where you can put all your exciting content!
        </p>
        <HeadlessButton className="bg-blue-500 text-white p-2 rounded-full">
          Click me!
        </HeadlessButton>
       </div>
    </div>
)
}

And there you have it! A fully functional slide-over component using Tailwind CSS and Headless UI in ReactJS. The possibilities are endless with this combination of tools — you can customize the animation, layout, and design to make your slide-over truly unique.

Don’t be afraid to get creative and have fun with it! And remember, always slide responsibly.

Note: In a real-world scenario, you would want to make sure to handle the state of your component and also add some kind of overlay when the slideover is open to close it when clicked outside the slideover.