Creación de la app con React

Michel Roberto Traña Tablada

student•

Se le escapó al profesor que para usar:

create-react-app nombre_proyecto

No solo debe tener instalado NodeJS, sino también el paquete create-react-app. Este se instala con el comando:

npm install -g create-react-app

Rodolfo Saldivar

teacher•

Excelente observación, muchas gracias por el mensaje.

Francisco Javier Rodriguez

student•

Solo es necesario Node JS, cuando haces npx bajas la ultima version del paquete, saludos.

npx create-react-app my-app

Manuel Rivera

student•

Para que les sea mucho más fácil escribir código en JSX en VSCode y se auto-complete, pueden ir a archivos, preferencias, configuraciones, ahí buscan settings.json abren ese archivo y colocan lo que esta en la siguiente imágen, yo lo realice en área de trabajo, lo pueden hacer en ususario también

Marco Antonio Macedo Preciado

student•

El clásico "Yo no lo descargo porque ya lo tengo" 😁

Carlos Eduardo Magallon Zepeda

student•

Me ganaste el comentario, como por 20 días :(

Wilson Delgado

student•

Carlos Gómez Mont

student•

Para los amigos que están utilizando Visual Studio Code y desean autocompletar código JSX vayan a File - Preferences - Settings y busquen el archivo settings.json y agreguen lo siguiente: JSX

Carlos Enrique Gonzalez Peña

student•

Si quieren hacerlo todo desde la linea de comando seria nos movemos a la carpeta de blog-platzi ya que halla terminando create-react-app con cd blog-platzi Después eliminar los archivos

rm App.css App.test.js logo.svg serviceWorker.js

Creamos la carpeta de components

mkdir components

Movemos App.js a components

mv App.js components

Te regresar a la raíz con cd .. x2 y corres tu editor favorito, en mi caso el comando es code para VScode

Happy Hacking!

Daniel Hurtado

student•

Primer (o tal vez segundo) profesor que veo que usa Windows xD

Juan Jose Vega

student•

Y trabajan con backend o.O

Luis Davaria

student•

Generalemente cuando eres profesor a tu cargo estan personas que no conocen mas que windows y no dominan la terminal. Yo lo veo logico el porque su uso de Windows. Peace

Victor Hugo Cortés Posada

student•

Recomiendo instalar Node.js con NVM. Esta pequeña utilidad nos permite mantener múltiples versiones de Node https://github.com/nvm-sh/nvm

Roberto Cortés Monroy

student•

¿CUÁNTO TIEMPO TENÍAS SIN HACER UNA TABLA EN HTML?

Nahuel Castro

student•

Recomiendo usar VS con Prettier para que se ordenen las líneas de código más fácilmente. Gracias por el curso :D

Michel Roberto Traña Tablada

student•

Algunos aspectos sobre la clase de hoy de React:

Los componentes de React empiezan por una letra mayúscula.
Las etiquetas html siempre van en minúscula.
El componente app, escrito por el profesor, usa un arrow function pero también se puede usar las sentencias de función y funciones anónimas.
El componente app, escrito por el profesor, se declara como constante pero también se puede declarar como variable (no recomendado).

Robert Romero Medina

student•

Autocompletado => https://stackoverflow.com/questions/39320393/jsx-or-html-autocompletion-in-visual-studio-code

Rubén Padilla

student•

👋 Si previamente habias instalado create-react-app de forma global, se recomienda desinstalar esta versión. De no hacerlo, create-react-app no creara toda la estructura del proyecto.

Después de esto puedes hacer la creación de tu proyecto con el siguiente comando:

npx create-react-app app_name

Esto garantiza que siempre estemos usando la ultima versión de CRA.

Saludos.

Maria Alejandra Luna Tito

student•

A mi me paso lo mismo pero actualice la version de create-react-app y listo

npm i -g create-react-app
create-react-app app-demo

Samuel Miranda Martínez

student•

También se eliminan el reportWebVitals.js y el setupTests.js?

Juan David González Rodríguez

student•

si, todos esos se eliminan algunos son para hacer pruebas unitarias a nuestro código , pero ya eso es otro tema por aparte !! :D

solo necesitamos el index.js y el App.js que son las carpetas en donde empieza toda nuestra aplicación de react.

Saludos....

Platzi Team

student•

Tables in HTML5? Real question

Diego Alejandro Cifuentes Arango

student•

Literalmente comente lo mismo, osea, para eso usa grid entonces lol

Jeith S Carrillo A

student•

las tablas siguen siendo muy utilizadas. ya no se usan para maquetar, pero para mostrar información que por practicidad debe ser mostrada en ellas no hay mejor. no hay que hacer mas de lo que se necesita mostrar

diego andres guzman

student•

les dejo el repo de mi proyecto, lo estoy desarrollando cambiando las clases por componentes funcionales y hooks https://github.com/guzmandiegoandres12/react_redux_course_platzi

Jesus Aguilera

student•

Me sale este errror al crear la app

Creating a new React app in D:\CODE\Platzi\Redux\blog_platzi.

Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template...

npm ERR! Unexpected end of JSON input while parsing near '...4tSoKORyD91W5q\n9ax Gh'

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\jesus\AppData\Roaming\npm-cache_logs\2019-12-16T21_02_28_ 201Z-debug.log

Aborting installation. npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.

Deleting generated file... package.json Deleting blog_platzi/ from D:\CODE\Platzi\Redux Done.

Gabriel De Andrade

student•

Hola! Parece que create-react-app deprecó sus paquetes globales o están en proceso de, por lo cual ya no es recomendable usar npm i -g create-react-app y después correr el comando create-react-app. La solución a esto es correr: npm uninstall -g create-react-app para desinstalar la dependencia global de create-react-app y así evitar conflictors y luego crear la aplicación con: npx create-react-app. Nota: Para usar npx debes tener instalado npm 5.2 o mayor, puedes ver que versión de npm tienes con npm -v, si no la tienes, puedes correr el comando npm install npm@latest -g para actualizar npm :D

Leonardo Castro Mestra

student•

Genial Gracias...

si alguien le pasa este error:

You are running create-react-app 4.0.1, which is behind the latest release (4.0.2).
We no longer support global installation of Create React App.

recomiendo que ejecuten este comando que a mi me lo resolvió:

npm uninstall -g create-react-app && npm i -g npm@latest && sudo npm cache clean -f

Nicolas ortiz suarez

student•

A los que les aparezca que la version de create-react-app ya no es soportada pueden crearlo asi:

npx create-react-app@5.0.0 my-app

o ya sea que esten dentro de la carpeta que quieren crear el proyecto pues solo colocan:

npx create-react-app@5.0.0 ./

Pablo Coto

student•

Nice!

Alejandro Miguel

student•

Creación de la app con React

Bienvenido al curso

Conoce a tu profesor y todo lo que aprenderás sobre Redux

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación