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

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

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.

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, 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

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.