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 :
Ok, let’s start cooking!
In order to prepare a delicious dish we have to stick to the recipe, which includes:
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;
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.