Ciclo de vida de React

Esta introducción a React me parece totalmente desaprovechada, primero porque entraria a un curso de redux si no se lo basico de React( u otro framework)?, me parece que en toda esta seccion se pudo profundizar mucho mas en redux o agregar otros temas mas complejos.

En lo posible, no utilizar los siguientes métodos del ciclo de vida

• componentWillMount
• componentWillRecieveProps
• componentWillUpdate

porque desde la version v16.3.0 en adelante, estos métodos están deprecados. https://reactjs.org/docs/react-component.html

Fetch vs axios.js. Una buena lectura para los que se estén preguntando las diferencias: https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5

A partir de la versión 16 de React, dentro del ciclo de vida de un componente también existe una opción para el manejo de errores que se llama: componentDidCatch. Esta etapa se ejecuta al detectar un error al hacer render de los componentes hijos.

I know is not relevant to the important thing in the course but the word updation does not exist.

Les dejo por acá el ejemplo usando Hooks

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(resp => {
        setUsers(resp.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, [])

  return (
    <div className="margin">
      <table className="table">
        <thead>
          <tr>
            <th>
              Name
            </th>
            <th>
              Email
            </th>
            <th>
              Link
            </th>
          </tr>
        </thead>
        <tbody>
          {users.map(user => {
            return (
              <tr key={user.id}>
                <td>{user.name}</td>
                <td>{user.email}</td>
                <td>{user.link}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  );
}

Algo de feedback completamente en buena onda. Si tienen un curso de react y otro aparte de redux, no creen que seria mejor que en este curso no se hablara de conceptos basicos de reacty fuera unicamente redux?

El segundo mejor profesor💯 (Freddy, ocupa le primer puesto🙊) . Que forma de explicar tan detallada. Me encanta💘

Me encanta como enseña este profesor!
Una paciencia, detallista, lenguaje técnico pero a la vez super entendible.

Genial para forzar conocimientos captados de cursos anteriores

cada vez me quedan mas claras las cosas que no entendi del curso de React 😄

Hola tambien es posible hacerlo con el metodo fetch sin axios

  componentDidMount(){
    this.fetchUsers();
  }

  fetchUsers = async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/users`
    );
    let data = await response.json();
    this.setState({users: data});
  }

Yo uso trae en lugar de axios.
La diferencia es que trae esta basado en fetch y axios en XMLHttpRequests.

el mejor profesor!!! una maravilla como explica!

https://jsonplaceholder.typicode.com/users el link a la api

Este post explica de manera simple la diferencia entre Axios y Fetch. Parece que Axios es mucho más simple de utilizar.

¿Es normal sentirse bastante perdido con lo que pasa?, o sea el profesor si siento que explica bien, pero me parece son demasiados términos por clases 😕

Hola, comparto el código haciendo uso de los Hooks y de fetch en vez de Axios para que no debas instalar nada:

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

const API = 'https://jsonplaceholder.typicode.com/users'

const App = () => {
  const [usuarios, SetUsuarios] = useState([]);

  useEffect(() => {
    fetch(API)
    .then((response) => response.json())
    .then((data) => SetUsuarios(data))
    .catch((error) => console.error(error))
  }, [])

  return (
    <div className="margen">
      <table className="tabla">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          {usuarios.map((usuario) =>{ 
            return(
            <tr key={usuario.id}>
              <td>{usuario.name}</td>
              <td>{usuario.email}</td>
              <td>{usuario.website}</td>
            </tr>
          )})}
        </tbody>
      </table>
    </div>
  );
};

export default App;

Que genial explica este profesor… lo que no había entendido en cursos anteriores ahora lo entendí a la perfección con explicaciones mas cortas

import React,{useState, useEffect} from 'react'
import axios from 'axios'
import '../index.css'

const API = "https://jsonplaceholder.typicode.com/users"
const App = () =>{
  const [usuarios , setUsuarios] = useState([]);

  useEffect(() => {
    axios.get(API)
    .then(response => {
       setUsuarios(response.data)
    })
    .catch(e => {
        // Capturamos los errores
        console.log(e)
    })
  }, [])

  return (
    <div className="margen">
    <table className="tabla">
      <thead>
        <tr >
          <th>Nombre</th>
          <th>Correo</th>
          <th>Enlace</th>
          <th>Número</th>
        </tr>
      </thead>
    <tbody>
      {usuarios.map((item) =>(
         <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.email}</td>
            <td>{item.website}</td>

         </tr> 
      ))}
    </tbody>
    </table>

  </div>
  )
}
export default App;

Ejemplo tomado del curso de React para entender la fase de montaje.

  constructor(props){
    super(props)
    console.log('1. constructor()')
  }

  componentDidMount(){
    console.log('3. componentDidMount()');
  }

  render() {
    console.log('2. render()');
}

console.log

1. constructor()
2. render()
3. componentDidMount()

Tenemos 4 fases por los que un componente pasa:
1. Initialization
2. Mounting
3. Updation
4. Unmounting

Excelente clase. Me pareció muy buena la imagen del principio para entender los procesos que ocurren en los estados del mount. 🙂

Excelente el tema de Async Await

Mounting: Todo componente debe tener render. Es obligatorio.

Initialization: Declaramos nuestro estado o propiedades

Muchos se preguntaba, incluyéndome como se terminaba el proceso de npm run start y era tan sencillo como ctrl + c

Fases por las que un componente pasa
Inicialización se declara nuestro estado o nuestras propiedades (setup props and state)-aparece siempre en el constructor.
Montado tres métodos en las cuales 1 es obligatorio que es el RENDER. El componentWillMount siempre se ejecutará antes que el render y el componentDidMount se ejecutará después del render.
Actualización o editar hay varias funciones
Destrucción o desmontaje solo hay una función que se llama componentWillUnmount

Fases por las que un componente pasa
Inicialización se declara nuestro estado o nuestras propiedades (setup props and state)-aparece siempre en el constructor.
Montado tres métodos en las cuales 1 es obligatorio que es el RENDER. El componentWillMount siempre se ejecutará antes que el render y el componentDidMount se ejecutará después del render.
Actualización o editar hay varias funciones
Destrucción o desmontaje solo hay una función que se llama componentWillUnmount

Instalar axios no lo sabía, los cursos pasados no fueron tan explícitos con el tema. Mil gracias 😃

todo un capo el profesor

Updation donde se refresca todo el virtual Dom

Creo que estaria bien, que todos los cursos usaran las declaraciones de variables en ingles. No creen? Votemos por un SI para que cambie en el futuro por favor 🙏.

Ciclo de vida de un componente en React

vengo de dar los cursos de react en la escuela de desarollo web y se supondria que ya debo mas o menos conocer react, considero importante que se vuelvan a ver las cosas , cuando las vemos varias veces repetidas se nos queda mejor guardada la info ademas practicamos mas veces, me gusta el formato

Este curso por el momento va genial, es cierto, para el año que es, esta desactualizado, pero eso no quiere decir que no se pueda aprender de el. Claro siempre con el conocimiento de que ya hay cosas que cambiarión.

Estaba empezando bien el curso hasta que paso a “class component”, por lo general los proyectos que usan “class component” estan migrando a hooks por los proyectos que he visto ya no se usa, solo quería mejorar con lo redux hay conceptos que todavía no entiendo pero bueno a seguir con el curso =D

https://jsonplaceholder.typicode.com/users

Demasiado desactualizado este curso. No recomendable para el 2021

Para evitar el warning:

Warning: Each child in a list should have a unique "key" prop.

Basta con agregar un index en los parámetros del map, y llamarlo como Key en el TR (O el elemento que mapees) así:

 this.state.usuarios.map((usuario, index) => (
            <tr key={index}>

El curso necesita una actualización, y enseñar el reduc toolkit que es muchisimos mas amigable de implementar con los react hooks! GAME CHANGER

El curso tiene buena pinta, pero le daría una pequeña revisión. Ya apenas se usan los componentes de tipo clase y hay cosas que han cambiado. Aún así muy buen curso!

“Tenemos que decirle a nuestro componentDidMount que es una función asícnrona: que tiene algo adentro que va a realizar una promesa o una llamada asíncrona”

async componentDidMount() {
    const users = await axios.get(this.API_URL);
    console.log(`users`, users);
}

Que buen aporte de parte del profesor, creo que una excelente forma de definir una promesa o, dicho en otras palabras, una función asíncrona en React.

4 fases por las que un componente pasa:

1. Initialization -> setup props and state
2. Mounting -> componentWillMount -> render -> componentDidMount
3. Updation -> props -> componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate | states -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
4. Unmouting -> componentWillUnmount

Todo statefull component debe tener render.

 <tbody>
      {
        this.state.usuarios.map((usuario)=>(
          <tr key={usuario.id}>
          <td>
            {usuario.name}
          </td>
          <td>
          {usuario.email}
          </td>
          <td>
          {usuario.website}
          </td>
        </tr>
        ))
      }
    
    </tbody>

Ciclo de vida de los componentes:

1. Inicializacion
2. Mounting
3. Updation
4. Unmounting

Con hooks para los que no saben y desean ver por curiosidad 😁

El tema que utilizo se llama Tokio Night (Que me encanta 😍), el tipo de fuente se llama Cascadia Code y los iconos Material icons

Axios js es una librería de JavaScript desarrollada con el objetivo de gestionar la programación asíncrona con promesas.

alguien sabe cual es la diferencia entre el axios y el fetch

Excelente video, entendí cosas que anteriormente no había entendido, excelente trabajo, gracias 😄

Como se cuando se usa Render y cuando no?

ComponentWillMount esta deprecado

=)

alguien me puede decir que significa: ‘[HMR] Waiting for update signalfrom WDS…’ y como podría solucionarlo?

Otra forma de poder hacer peticiones es poder utilizar fetch

import React, {Component} from 'react';


export default class App extends Component {

  constructor(props){
    super(props)

    this.state = {
      users: [] 
    }
  }

  componentDidMount(){
    this.fetchData()
  }

  fetchData = async () => {
    try{
      let response = await  fetch('https://jsonplaceholder.typicode.com/users')
      let data = await  response.json()
      this.setState({users: data})
    }
    catch(error){
      console.log(error)
    }

  }
  render(){
    return (
      <React.Fragment >
        <div className="container-table">
          <table className="table">
            <tr>
              <th>Nombre</th>
              <th>Correo</th>
              <th>Enlace</th>
            </tr>
            <tbody>
              {this.state.users.map((item) => 
                <tr key={item.id} >
                  <td>{item.name}</td>
                  <td>{item.email}</td>
                  <td>{item.website}</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </React.Fragment>
    )
  }
}

un capo !

Unmounting: Solo hay una función en caso de que queramos hacer algo cuando se destruya un componente

Me esta gustando la forma en como va enseñando este profe!!!

Promesa es algo que se ejecuta asincronamente con el código, es decir primero se ejecuta todo el código que escribimos (y se inicia la promesa) y cuando al fin la promesa devuelve un valor este se devuelve a la funciona y la toma para devolver la respuesta que hayamos programado

Tengo una duda nos hablan de cuatro fases pero en cursos anteriores pusieron que son 3 e incluyeron la primera fase con la segunda 😕 algún guru
que pueda disipar mis dudas

Hola Devs:
-Aqui les presento mi solucion usando Hooks:

Les recomiendo usar una extenciónd del navegador llamada JSON Viwer, para que sea mas agradable leer los archivos JSON que abran en el mismo.
Se ve así:

La pueden descargar [aquí] para
Chrome (https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?utm_source=chrome-ntp-icon)

Aca dejo la función de App con hooks 😄

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

const App = () => {
  const [listUsers, setListUsers] = useState({ users: [] });

  const setRows = () =>
    listUsers.users.map((user, i) => (
      <tr key={i}>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.url}</td>
      </tr>
    ));

  const getAllUsers = async () => {
    try {
      const users = await axios.get(
        'https://jsonplaceholder.typicode.com/users'
      );
      console.log(users);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getAllUsers();
    setListUsers({
      users: [
        {
          name: 'Juan',
          email: '[email protected]',
          url: 'Juan.com',
        },
        {
          name: 'Platzi',
          email: '[email protected]',
          url: 'Platzi.com',
        },
      ],
    });
  }, []);

  console.log(listUsers);

  return (
    <div className="container">
      <table className="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Url</th>
          </tr>
        </thead>
        <tbody>{setRows()}</tbody>
      </table>
    </div>
  );
};

export default App;

Aqui esta con el uso de Hooks, que es lo nuevo de react.

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

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(resp => {
        setUsers(resp.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, [])

  return (
    <div className="margen">
      <table className="tabla">
        <thead>
          <tr>
            <th>
              Name
            </th>
            <th>
              Email
            </th>
            <th>
              Link
            </th>
          </tr>
        </thead>
        <tbody>
          {users.map(user => {
            return (
              <tr key={user.id}>
                <td>{user.name}</td>
                <td>{user.email}</td>
                <td>{user.link}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  );
}
export default App;

No se de hace cuanto sea este curso, pero a mi parecer debieron hablar no tanto de la parte beginner de React, sino más bien de Hooks. Para hacer poder hacer una comparacion de Hooks con Redux (Según he oido se puede evitar usar Redux usando Hooks).
Ustedes que creen?

Aprendí a programar con Java, un lenguaje totalmente orientado a objetos y clases y no termino de entender por qué muchos hablan de que trabajar con Hooks es mejor y “odian” las clases. Personalmente me gusta más la estructura de clases, y métodos propios de estas que hace que todo se vea un poco más ordenado. Pero me gustaría saber la opinión de alguien respecto a las diferencias fundamentales entre usar clases y hooks