Stateful vs Stateless

La forma en que entendemos los componentes Stateful y Stateless cambia totalmente con los React Hooks: https://es.reactjs.org/docs/hooks-intro.html 😮
.
Ahora también tenemos estado y ciclos de vida en componentes creados como funciones o arrow functions.
.
Esto significa que al determinar qué componentes serán lógicos o presentacionales debemos guiarnos por convenciones y decisiones del equipo, no de que los componentes hayan sido creados como clases o funciones.
.
¿Cuándo crear un Componente?
Estructura, Organización y Tipos de Componentes en React

Sugiero seguir con el curso, realizando las implementaciones con Hooks, es mucho mas conciso. Hasta Aqui mi codigo :

import React, { useState } from "react";

const App = () => {
  const [usuarios, setUsuarios] = useState([
    { name: "Rodolfo", email: "[email protected]", enlace: "Rodolfo.com" },
    { name: "Platzi", email: "[email protected]", enlace: "platzi.com" }
  ]);

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

export default App;

Aclaro que soy bastante jr. pero recomiendo este ejercicio:

1- ver esta clase y tomar nota + hacer el código con el profe.
2- una vez terminada la clase y verificar que tu código funciona, borrar todo el archivo para intentar escribirlo solo (y encontrarte con tu propio “yo”).
3- no me salió hasta el 6to intento por lo que tuve que recurrir al archivo que hay en la pestaña de enlaces de esta clase y revisar mis errores hasta incorporar todos los detalles de la sintaxis.</h1>

Esto se me ocurrió xq cuando llegué a la mitad del curso donde ya se trabaja combinando reducers me costaba bastante entender la conectividad del código, y me dije “a repasar”.

Para aclarar un poco, desde la version de React 16.8 en adelante, los componentes funcionales si pueden manejar estado y el ciclo de vida, utilizando React Hooks
Otra cosa, es un curso de Redux no de React, parece mas clase de react que de Redux.
Espero que mejore, redux se puede utilizar con Vanilla.js y tambien se puede combinar con otros framework… da a entender que solo funciona con React.

Tambien puedes declarar el state afuera si dentro del constructor no vas a realizar ninguna otra operación o declarar los bind.

class App extends Component {
state = {
	usuarios : []
}

Recomiendo tambien tener el inspect abierto, esta generando un warning
Check the render method ofApp. See https://fb.me/react-warning-keys for more information.

se puede solucionar con algo tan sencillo como

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

Todo iba bien gasta que metieron clases🤮🤮🤮

const = stateless

• NO manejan estado
• solo manejan informacion
• solo manejan funciones

import React from 'react';

const App = () => {
	 return() 
}

class= statefull

• Manejan estado
• usa render
• usa estado = this this.state

import React, { Component } from 'react';
class App extends Component {
	 render() {
		return ()
	}

Acá encuentran el proyecto en Github: https://github.com/RodolfoSaldivar/BlogPlatzi

el codigo de la clase con componente funcional y hooks

import React, {useState} from 'react';
import './styles/App.css';

const App = () => {
  const initialState=[{
    nombre:'DIEGO ANDRES GUZMAN',
    correo:'[email protected]',
    enlace:'nova.com'
  },{
    nombre:'Marcos Manuel MOlano',
    correo:'[email protected]',
    enlace:'mmmS.com'
  }]
  const [state,changeState]=useState(initialState)

  return (
    <div className="margen">
      <table className="tabla">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          {state.map((usuario,index)=>( 
            <tr key={index}>
              <td>{usuario.nombre}</td>
              <td>{usuario.correo}</td>
              <td>{usuario.enlace}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

Hice el ejercicio con Hooks, es muchisimo mas facil de entender y manejar, lo recomiendo.
Por si preguntan, estoy consumiendo la data de un archivo .json y colocandolo en el estado del componente mediante Hooks.

Me encanta como explica, y te dice que hacer por favor borra lo que esta hasta la flecha. super didáctico y fácil de seguir. 👍

Excelente clase. 🙂 se sienten más frescos los conceptos vistos en el curso de react.

Si no imporatmos {Component} entoces se usa:
class App extends React.Component?

Que bien explica el profesor 👍

Para quien quiera probar el código en un componente funcional (Stateless)

import React, { useState } from "react";

const App = () => {
  const [users, setUsers] = useState([
    {
      name: "Marlon",
      email: "[email protected]",
      link: "marlon.com",
    },
    {
      name: "Platzi",
      email: "[email protected]",
      link: "platzi.com",
    },
  ]);

  const rows = () =>
    users.map((user) => (
      <tr>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.link}</td>
      </tr>
    ));

  return (
    <div className="margen">
      <table className="table">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>{rows()}</tbody>
      </table>
    </div>
  );
};

export default App;

talvez este curso deba volver a realizarse pues muchas cosas ya cambiaron, se que antes los componentes que requerían un estado se creaban por medio de clases, pero con la llegada de los hooks los componentes funcionales también pueden manejar estados, y decir que un componente es stateful solo por ser definido por una clase ya no es muy certero.

Me alegra que React haya evolucionado y dejado atrás esto de las Class components. Esta bien conocerlas de todas maneras, pero vamos, las functional components tienen mejor estilo y son más fluidas para trabajar XD

import React, { useState } from "react";
import db from "../db.json";

const App = () => {
  const [users] = useState(db);

  return (
    <div className="margin">
      <table className="table">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          {users.data === undefined || users.data.length === 0 ? (
            <tr>
              <td colSpan="3" className="no-data">
                No hay datos
              </td>
            </tr>
          ) : (
            users.data.map((user, i) => (
              <tr key={i}>
                <td>{user.name}</td>
                <td>{user.email}</td>
                <td>{user.domain}</td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

export default App;

El profesor me gusta mucho por que entiende que no a todos se les facilita mucho y va paso a paso y es claro.

No necesariamente un componente funcional empieza por const, pues puede ser resuelto devolviendo una función anónima, o creando una función a la antigua.

Funciones declaradas, y expresiones de función también son válidas para crear el componente.

Es un poco decepcionante que a estas alturas (refiriéndome a la actual versión de React) use Class Components en vez de Functions Components para este curso

Excelente clase. Mi archivo App.js

import React, { Component } from 'react';

class App extends Component {
	constructor() {
		super();
		this.state = {
			users: [
				{
					name: 'Andres',
					email: '[email protected]',
					webpage: 'andrescampuzano.com',
				},
				{
					name: 'Platzi',
					email: '[email protected]',
					webpage: 'platzi.com',
				},
			],
		};
	}

	setRows = () =>
		this.state.users.map((user) => (
			<tr>
				<td>{user.name}</td>
				<td>{user.email}</td>
				<td>{user.webpage}</td>
			</tr>
		));

	render() {
		return (
			<div className='margen'>
				<table className='table'>
					<thead>
						<tr>
							<th>Name</th>
							<th>Email</th>
							<th>Web Page</th>
						</tr>
					</thead>
					<tbody>{this.setRows()}</tbody>
				</table>
			</div>
		);
	}
}

export default App;

Un 10 Rodolfo!

o tambien puede ser

import React from 'react'

class App extends React.Component { ...}

Yo lo hice creando un componente que me genere esa lista de la data

Stateful son componentes clases(no funcionales).
Stateless son componentes funcionales.
Las funcionales: manejan estados.
Las no funcionales: no manejan estado solo manejan informacion.

excelente forma de enseñar paso a paso y la refactorización

ponerFilas = () => (
    this.state.usuarios.map((usuario)=> (
      <tr>
        <td>{ usuario.nombre }</td>
        <td>{ usuario.correo }</td>
        <td>{ usuario.enlace }</td>
      </tr>
    ))
  );

Todos los que empiecen con ```
const y nombre del componente

son stateless o componentes funcionales

Diferencia entre componentes funcionales y no funcionales: Funcionales: Manejan estados No funcionales: No manejan estados, sólo información

tal vez a alguien le guste asi directo con hooks

import { useState } from "react";
const initialState = [
  { name: "Carlos", email: "[email protected]", domain: "sonne.io" },
  { name: "Sol", email: "[email protected]", domain: "sonne.com" }
];
function App() {
const [users, setUsers] = useState(initialState)
 
  const renderRows = () => {
    return users.map((item) => {
      const {name,email,domain}= item;
      return (
        <tr>
          <td>{name}</td>
          <td>{email}</td>
          <td>{domain}</td>
        </tr>
      );
    });
  };
  return (
    <div className="container">
      <table className="container_table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Link</th>
          </tr>
        </thead>
        <tbody >
         {renderRows()}
        </tbody>
      </table>
    </div>
  );
}

export default App;

Componentes con estado y sin estado
Los componentes con estado y sin estado tienen muchos nombres diferentes.

También se les conoce como:

• Contenedor vs componentes de presentación

• Componentes inteligentes vs tontos

La diferencia literal es que uno tiene estado y el otro no. Eso significa que los componentes con estado realizan un seguimiento de los datos cambiantes, mientras que los componentes sin estado imprimen lo que se les da a través de accesorios, o siempre representan lo mismo.

Componente con estado / contenedor / inteligente:

class Main extends Component {
constructor() {
super()
this.state = {
books: []
}
}
render() {
<BooksList books={this.state.books} />
}
}
Componente sin estado / presentacional / tonto:

const BooksList = ({books}) => {
return (
<ul>
{books.map(book => {
return <li>book</li>
})}
</ul>
)
}
Observe que el componente sin estado se escribe como una función. Por muy interesante que sea el estado, siempre debe apuntar a hacer que sus componentes sean lo más simples y sin estado posible, de modo que los diferentes componentes se puedan reutilizar como piezas de Lego, incluso si no tiene planes inmediatos para reutilizar un componente. ¡Los con estado deberían sentirse afortunados de serlo!
https://programmingwithmosh.com/javascript/stateful-stateless-components-react/

ojo tome iniciativa de otro estudiante

Me habría gustado que esta clase la hubiese hecho usando Hooks 😦

No sabía que se podía utilizar paréntesis en vez de llaves para definir el alcance o entorno de la función 😅.

Que agradable sujeto

Prefiero trabajar con Functions Components, no hay problema de contexto con el this y el codigo es mal legrible 😃

porque el tab antes de cortar?

Que excelente curso para complementar y aclarar un poco las dudas del curso de React

¿Es necesario usar clases para trabajar con Redux?
Porque si es para tener componentes con estado yo uso Hooks en componentes funcionales, hacen que el código sea más limpio y son más fáciles de usar.

Muy buena la clase. Cada ves se pone mejor.

Genialmete explicado! Súper claro!

Excelente curso para complementar y aclarar un poco las dudas del curso de React

Excelente clase, aclaré inclusive conceptos de los cursos anteriores de React. 😄

Muy Practico

Cual es la diferencia entre useState y utilizar los estados de esa forma?

también podemos hacer class App extends React.Component {} sin la necesidad de importar { Component }

Los componentes no funcionales no manejan estado, solo manejan información y funciones.

Los componentes de clases manejan un estado interno, información y funciones, no hace falta definir las funciones con const simplemente con el nombre de la función ya lo detecta.

genial curso !! clse, voy comprendiendo conceptos que no termine de comprender en los cursos de react.

Según lo que entendí los componentes funcionales son los que declaramos como funciones y no manejan estado, pero al principio de la clase se explicó que los no funcionales son los que no manejan estado, solo manejan información y funciones.
Es decir, tengo una confusión entre si el funcional o no funcional son lo mismo, porque esa fue mi impresión.

Gracias por esta clase, la necesitaba

Excelente

Stateless es un componente de tipo funcion no maneja estado, Statefull es de tipo clase y si maneja estados y constructor

Super que explicado, buen profesor.
Pos si no sabían, para comentar en .jsx -> {/comentario/}. En cualquier parte del código pueden ponerlo.

aqui mi codigo usando hooks

import React, {useState} from 'react';

const App = () => {

const [usuarios, setUsuarios] = useState([
  
    
      {
        nombre: "camilo",
        correo: "[email protected]",
        blog: "camilo.com",
      },
      {
        nombre: "camilo",
        correo: "[email protected]",
        blog: "camilo.com",
      },
    
  
]);

  const ponerFilas = ()=>(
    usuarios.map((item)=>(
    <tr>
      <td>{item.nombre}</td>
      <td>{item.correo}</td>
      <td>{item.blog}</td>
    </tr>
    ))
  )

  return (
    <div className={'margen'}>
      <table className="tabla">
        <thead>
          <tr>
            <th>nombre</th>
            <th>correo</th>
            <th>enlace</th>
          </tr>
        </thead>
        <tbody>
          {ponerFilas()}
        </tbody>
      </table>
    </div>
  );
};

export default App;```

Parece magia pero es react.

gracias

interesante la forma de retornar un array e imprimir dentro de la tabla, imprimir una variable que contiene un array!!
que mas nos tienes escondido por ahi, enseñalo todo lo que sabes !! 😁