A React’s Cookbook: How to Write Reusable Components

A React’s Cookbook: How to Write Reusable Components

This article will show you how you can create more reusable and reable components in React sticking to just a few simple rules. I believe…

This article will show you how you can create more reusable and readable components in React by sticking to just a few simple rules.

I believe that the best way to learn is by example, so we’re gonna rely on a simple application that displays cars from API in a different way.

Application available here :

https://github.com/kwdowik/reusable-components

Ok, let’s start cooking!

In order to prepare a delicious dish we have to stick to the recipe, which includes:

  • Reusable logic
  • Reusable presentation
  • Separate concerns (logic and presentation)
  • Extensibility

Our starting point will be CarsList component onmain branch from this reusable-components repository.

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

const CarsList = () => {
  const [cars, setCars] = useState([]); 
  useEffect(() => {
    const fetchCars = async () => {
      const response = await fetch('http://localhost:4000/cars');
      setCars(await response.json())
    }
    fetchCars();
  }, [])
  return (
    <div>
      {cars.map((car, index) => <li key={index}>[{++index}]{car.name} - {car.price}$</li>)}
    </div>
  )
}

export default CarsList;

javascript react react-hook reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? Also, we will see the react hooks example.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

React Hooks Tutorial for Beginners: Getting Started With React Hooks

React hooks tutorial for beginners, learn React hooks step by step: Introduction, useState Hook, useState with previous state, useState with object, useState with array, useEffect Hook, useEffect after render, Conditionally run effects, Run effects only once, useEffect with cleanup, useEffect with incorrect dependency, Fetching data with useEffect, useContext Hook, useReducer Hook, useReducer, Multiple useReducers, useReducer with useContext, Fetching data with useReducer, useState vs useReducer, useCallback Hook, useMemo Hook, useRef Hook

How to Fetch Data from APIs using useEffect React Hook

In this article, we will take a look at useEffect React hook to fetch data from an API. We will create a sample React application to pull data from the provider and use it in our application.