carlosaore

import { useEffect, useState, useMemo, useCallback } from 'react';
const arrayOfNumbers = [1,4,6,2,7,3];

function App() {
  const [data, setData] = useState(arrayOfNumbers);
  const [multiplier, setMultiplier] = useState(2);
  const [resultState, setResultState] = useState([]);

  // bad (recreated on every render)
  const multiplierFunction = (array, m) => {

carlosaore

import "./App.css";
import React, { useContext } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import Home from "./Pages/Home";
import { AuthContext } from "./Context/UserAuthContext";
import LoginPage from "./Pages/LoginPage";
import Servicios from "./Pages/Servicios";
import Imagenes from "./Pages/Imagenes";
import Empleados from "./Pages/Empleados";
import PerfilPage from "./Pages/PerfilPage";

carlosaore

Getting more comfortable with async error handling in Express

Express docs: For errors returned from asynchronous functions invoked by route handlers and middleware, you must pass them to the next() function, where Express will catch and process them.

Express docs: Express comes with a built-in error handler that takes care of any errors that might be encountered in the app. This default error-handling middleware function is added at the end of the middleware function stack.

If you pass an error to next() and you do not handle it in a custom error handler, it will be handled by the built-in error handler; the error will be written to the client with the stack trace. The stack trace is not included in the production environment.

1. Implement a custom error handling middleware

carlosaore

// Simulating an async operation
const prepareTacosAsync = (quantity) => {
  return quantity;
};

// Simulating a sync operation
const serveHorchata = () => {
  return "Horchata glass";
};

carlosaore

const FilterData = [
    {
        dishType: "Breakfast",
        isSelected: false,
    },
    {
        dishType: "Lunch",
        isSelected: true,
    },
    {

carlosaore

// at the top: import axios from 'axios'

const url = ""    

useEffect(() => {
		const source = axios.CancelToken.source();
		axios
			.get(url, {
				cancelToken: source.token
			})

carlosaore

import { useEffect, useState } from "react";

const Clock = () => {
    const [date, setDate] = useState(new Date().toLocaleTimeString('us-US'));

    useEffect(() => {
        console.log("setting up interval");
        const intervalId = setInterval(() => setDate(new Date().toLocaleTimeString('us-US')), 1000);
        return () => {
            console.log("clearing interval");

carlosaore

React Giphy

Release / Update date

17/02/2020

Description

Create a page that will display a list of gifs and show the selected gif.

1. create the components according to the diagram:

carlosaore

import { useState } from "react";

function App() {
	const [information, setInformation] = useState([
		{text: "hey", active: false},
		{text: "bye", active: false},
		{text: "hello again", active: true},
	])

	const buttonHandler = (index) => {

carlosaore

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

/**
 * Performs a simple GET request and returns the data, the loading state, and any error
 * @param url {String}
 * @return {{isLoading: boolean, data: Object, error: Object}}
 */
const useFetch = (url) => {
	const [data, setData] = useState(null);