¿Qué necesitas para aprender React.js?

Christopher Andrés Guano Valencia

student•

🔵La instalación de React como pregunta de entrevistas

Yo recomiendo iniciar un nuevo proyecto con Vite (npm create vite) con la opción de JavaScript Vanilla y MEMORIZAR todo el proceso para iniciar una aplicación de React, desde la instalación de paquetes (react, react-dom y el plugin de Vite para React), la configuración del plugin de Vite para React (está en internet y son pocas líneas de código) y el contennido del archivo inicial del proyecto (App.jsx, createRoot(), render()). . ¿Por qué debo aprender esto? En muchas entrevistas, es la primera pregunta, empezar una aplicación de React sin la ayuda de terceros. He visto varios simulacros donde se demoran más de 30minutos entre buscar la documentación y configurar todo, siendo solamente 3 pasos como mucho. . ¿Por qué Vite? Porque es rápido de configurar, y el resto del tiempo te enfocas en los siguientes retos de la entrevista. Y porque la pregunta está si sabes empezar una aplicación de React, no si sabes configurar webpack y Babel (pero si puedes hacerlo rápidamente, quién soy yo para decirte que hacer :P). . Nota: Si encuentras archivos .jsx es simplemente que el archivo contiene JSX. En Vite es obligatorio, ya que de esta manera puede compilar el código sin errores.

Andrés Camilo Salgado

student•

Muy buen aporte

JOSE FABIAN BONILLA GUZMAN

student•

es lo mismo hacerlo como idnicas que clonarlo?

byron xicara

student•

Estaba en el curso anterior porque estoy iniciando en React, y ya llevaba como la mitad del otro y hoy entro Pufffff, todas las miniaturas cambiaron y entro y esta actualizado, Gracias por eso, Platzi vale cada centavo invertido Gracias Profe Juan Castro

Daniel Carpio Robles

student•

Me pasó lo mismo jajaj Pero es bueno tener el actualizado :)

Josue Quevedo Portas

student•

Yo tambien estaba en el curso anterior, no estaba muy cómodo porque era muy confuso, lo dejo por días y justo ahorita decido volver a continuar y me encuentro con esta grata sorpresa!!! 😁

Jonathan Guidi

student•

Me parece clave destacar que los "Cursos de API REST con JavaScript" son un excelente entrenamiento previo a aprender React.js.

En esa saga de cursos se desarrolla una APP de tipo SPA llamada PlatziMovies donde ponemos en practica muchos conceptos claves de JS..

Ami particularmente me afianzo bastante a la hora de aprender un framework/libreria.. Además los da el crack de Juan DC ;)

Jesus Velasco

student•

Igual, pienso que el orden correcto para aprender react es aprender los básicos como html, css y js y después haber creado una app completamente con ellos para después notar las diferencias de hacerlo asi o con react.

Siento que esl forma de en verdad ver el valor de react y los frameworks en general

Mauricio Combariza

student•

Pasos:

1- Ve con la terminal hasta la carpeta donde vas a guardar tu codigo. 2. Clonar el repositorio, sudo se usa en linux, si no el comando es sin sudo

sudo git clone https://github.com/platzi/curso-react-intro.git

Ingresamos a la carpeta

 cd curso-react-intro

Instalamos las dependencias

sudo npm i

Corremos el programa

sudo npm run start

Jose Luis Bedoya

student•

no es necesario correrlo con sudo!

Luis Alfredo Suarez

student•

Primeros pasos en React.js

Para aprender React.js, necesitas tener una comprensión sólida de ciertos conceptos y herramientas. Aquí hay una lista de lo que necesitas:
1 - Fundamentos de JavaScript: React.js es una biblioteca de JavaScript, por lo que es esencial que tengas un conocimiento sólido de JavaScript. Debes estar cómodo con conceptos como variables, funciones, objetos, arrays, bucles y eventos.
2 - HTML y CSS: React se utiliza para construir interfaces de usuario, por lo que debes estar familiarizado con HTML para crear la estructura de tus componentes y CSS para darles estilo.
3 - Node.js y npm: React.js generalmente se desarrolla y se administra con Node.js, por lo que es útil tener una comprensión básica de cómo funciona Node.js y cómo utilizar npm (Node Package Manager) para instalar y administrar paquetes.
4 - Conceptos de programación orientada a objetos: React se basa en la programación orientada a objetos, por lo que es útil tener una comprensión de los conceptos fundamentales de la POO, como clases y objetos.
5 - Git y control de versiones: Git es una herramienta esencial para colaborar en proyectos de desarrollo de software. Deberías saber cómo usar Git para realizar seguimiento de cambios, clonar repositorios y colaborar con otros desarrolladores.
6 - Conceptos de desarrollo web: Comprender los conceptos básicos de desarrollo web, como el modelo de caja de CSS, el ciclo de vida del navegador y las solicitudes HTTP, te ayudará a comprender mejor cómo React interactúa con el navegador y los servidores.
7 - Conceptos de desarrollo de una sola página (SPA): React es especialmente adecuado para el desarrollo de aplicaciones de una sola página, por lo que debes comprender los conceptos relacionados con las SPAs, como la navegación entre rutas, el enrutamiento y la gestión del estado de la aplicación.
8 - React y su ecosistema: Por supuesto, necesitas aprender React en sí mismo. Esto incluye comprender los conceptos clave de React, como componentes, props, state, eventos y ciclo de vida. También debes estar familiarizado con otras bibliotecas y herramientas del ecosistema de React, como React Router para el enrutamiento y Redux para la gestión del estado.
9 - Herramientas de desarrollo: Aprende a utilizar herramientas de desarrollo como React DevTools y las extensiones del navegador que facilitan la depuración y el diagnóstico de problemas en tus aplicaciones React.
10 - Práctica y proyectos: La mejor manera de aprender React es construyendo proyectos reales. Empieza con proyectos pequeños y aumenta gradualmente la complejidad a medida que adquieras más experiencia.
11 - Recursos de aprendizaje: Hay una amplia gama de recursos disponibles para aprender React, como tutoriales en línea, cursos en plataformas de aprendizaje, documentación oficial de React y libros. Encuentra los recursos que mejor se adapten a tu estilo de aprendizaje.
Recuerda que aprender React.js lleva tiempo y práctica. No te preocupes si al principio encuentras ciertos conceptos confusos; con la práctica, todo se volverá más claro. También es importante mantenerse actualizado, ya que React y su ecosistema están en constante evolución.

!Imgur

Nunca pares de aprender. 💚

Ernesto Dario Cassino Crespo

student•

Les recomiendo que utilicen Vite.js para iniciar un proyecto de React, es mucho mas rapido que create-react-app y ahorra tiempo en el levantamiento del proyecto. Yo utilizo la opcion de JAvascript+SWC Aqui dejo la documentacion oficial de como hacerlo: Vite

Juan Castro

teacher•

My recomendado :ok_hand: Lo vemos en esa clase: https://platzi.com/clases/7395-react/62359-react-con-vite/

Luis Enrique Andrino Duque

student•

Que emoción, me estoy adentrando en el front end y react es mi principal opción. Espero aprender mucho con el profe Juan 👏

Santiago Quintero

student•

ufff se nota el incremento en la calidad de los videos, (y en la edad de juan jaja) pero ese no es el tema.

Hace poco acebé la ruta de js a profundidad y venía listo a iniciar con React, memotiva mil veces más saber que este curso está actualizado.

Santiago Quintero

student•

Por cierto, verlos cursos de Juan a 1.5 de velocidad es muy divertido y se entiende tambien de una manera muy genial jajaj

Yo lo hago así y se incrementa la emoción que ya de por sí el transmite por 1000

JUAN SILVA

student•

que tiene la edad de juan, si lo dices por lo joven, creo que los mejores siempre son los que mas años de experiencia tienen

Santiago López Alarcón

student•

Definitivamente la energí que tien JuanDc es algo que inspira a cada vez aprender más!!! Gracias profe! 💚

Enzo Ulloa

student•

Hola, me gustaría que tengan en cuenta agregarle la fecha de lanzamiento a los cursos. Ya que las librerías, frameworks y todo lo relacionado a eso cambia y se esta actualizando constantemente. Saber la fecha de lanzamiento nos ayudaría a saber si estamos estudiando algo viejo o algo nuevo

Juan Castro

teacher•

En este curso te garantizamos que sin importar la versión de React este curso te seguirá funcionando. Si alguna de las nuevas versiones de React cambia radicalmente y los fundamentos de este curso dejan de servir, rehacemos el curso desde cero. Hablamos más sobre eso en esta clase: https://platzi.com/clases/7395-react/62355-diferencias-entre-versiones-de-reactjs/

Dave Juanes

student•

Apuntes de la clase

Hola que tal?, un resumen de la clase (con algunas aclaraciones).

Para clonar el repositorio:

git clone https://github.com/platzi/curso-react-intro.git

Luego seguimos con la instalación de las dependencias:

npm i

Aquí una aclaración, en mi caso uso node 18 y me presento el siguiente error:

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',

Para solucionar esto elimine la carpeta node_modules y package-lock.json aunque no solucionó el error pude encontrar unos cambios en los scripts de packge.json:

"start": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",

Con esto ya se soluciono el primer problema que tuvé. Continuando con la ejecución de la aplicación tuve el siguiente mensaje:

Line X: 'React' must be in scope when using JSX

Este mensaje nos dice que no React debe estar dentro del scope cuando usamos JSX, (aún no entiendo porque pasa esto si las extensiones estan con .js), pero bueno al final solucioné esta alerta importando React en App.js:

import React from 'react';

Luego de esto todo bien.

Espero le sirva a alguien

Belén Cerrotti

student•

GRACIAS!! Me salvaste

Jorge Morales Pérez

student•

Me faltaban 4 clases para terminar el curso viejo de intro a react y ahora a empezar de nuevo. Gracias Juan!

Facundo Daniel Zogbe

student•

https://platzi.com/clases/2444-react-2021/40312-persistencia-de-datos-con-local-storage/ puedes terminar el viejo y arrancar el nuevo . todavia sirve todavia sirve jaja

Gaston Corbalan

student•

Para los que ya hicieron el curso anterior y necesitan como todo buen toc tenerlo completado, tomen directo el examen sin miedo a desaprobar. Úsenlo pensando que son preguntas de entrevista

Brayan Niño

student•

Hola, para los chicos que empiezan el curso y a la primera no les corre el localhost:3000, no se den por vencidos, yo me tardé 1 dia pero finalmente lo resolvi, ¿Cómo?, googleando los errores que iba obteniendo de la consola, al final, fue, eliminar la carpeta de node_modules y volviendola a instalar. Saludos.

Frandel Corporan Rodríguez

student•

viva react!

Frandel Corporan Rodríguez

student•

y viva juandcGod!

Ruben Dario Antia Sanchez

student•

a darle duro.

Willie David Roa Hidalgo

student•

Primera vez que veo a JuanDa abrir los ojos tan grandes!!! 🤣😂🤣🤣😂🤣🤣😂🤣🤣😂🤣🤣😂

Hugo Roberto Gutiérrez Valentín

student•

Y esas 7 VULNERABILIDADES DE ALTA SEVERIDAD?

(se transforman en 79 si uso el --force)

Juan Carlos Montilla Sánchez

student•

Hola, Hugo.

Eso sucede debido a algún paquete de NPM que a lo mejor ya no tiene soporte y te advierte para que sepas, pero te aseguro que eso no va a afectar en nada con el curso

David Mendoza Erazo

student•

Hola tengo una duda, he estado estudiando react un tiempito sin embargo no tengo la experiencia para entender una cosa. He leído noticias que npx react-create-app ya no funciona, yo interprete que react ya no funcionaba y me confundí, sin embargo seguí investigando y descubrí que era el comando con todos los requerimientos que habían creado los de react para usar su propia libreria, lo que no entiendo, es que cambia por ejemplo con la libreria que acabo de instalar aqui en el curso con ese comando creado por los propios de react como puedo usarlo en mis proyectos. puedo realmente usa react o next ? como es ahi gracias

Juan Castro

teacher•

Es una duda completamente válida, David, no te preocupes

React se puede instalar de muchas formas Puede ser "tan fácil" como agregar un script a tu HTML O puede ser "tan complejo" como crear todo un entorno de desarrollo personalizado con empaquetamiento, transpilación, Hot Module Replacement... Independiente de cómo lo instales, React sigue funcionando igual

Hay muchas herramientas que intentar agilizar ese proceso, sobre todo para aplicaciones que no requieren taaaaanta optimización Esas herramientas son Create React App, Vite.js, Next.js, entre otras

En este curso les preparé un repositorio que solo deben clonar, instalar y ejecutar para poder tomar el curso sin preocuparse por instalaciones o qué herramientas vamos a usar Aún así al final del curso y también en los siguientes cursos de la ruta explicamos cómo usar las herramientas más importantes para iniciar proyectos desde cero sin tener que depender de ese repositorio para el curso

Cuéntame sin con esto la información te queda más clara :D

Alvaro Castellanos

student•

Muy buena pregunta, también tenia la misma duda.

Yenny Paola Porras Rueda

student•

Vengo del otro curso, el de intro pero me confundia demasiado en las primeras clases... mi pregunta es similar? es mas facil o primero termino el intro?

Francisco Ponce

student•

Entiendo que podría ser un sustituto del curso pasado. Pero que mejor el profe nos lo aclare :D.

José Fabián Beltrán Meza

student•

A mi parecer, este curso fue diseñado para suplir algunas falencias del anterior. Tambien veo que dieron un enfoque más explicativos a los conceptos.

¿Qué necesitas para aprender React.js?

Introducción y requisitos

¿Qué necesitas para aprender React.js?

Maquetación con React.js

¿Qué es un componente?

Componentes de TODO Machine

¿Cómo se comunican los componentes? Props y atributos

Estilos CSS en React

Interacción con React.js

Eventos en React: onClick, onChange

¿Qué es el estado?

Contando TODOs

Buscando TODOs

Completando y eliminando TODOs

Librería de Iconos Personalizados

Iconos en React: librerías y SVG

Iconos con colores dinámicos

Herramientas avanzadas: escalabilidad, organización y persistencia

Local Storage con React.js

Custom Hooks

Organización de archivos y carpetas

Feature-First Directories en React

Tips para naming y abstracción de componentes React

¿Qué son los efectos en React?

Estados de carga y error

Actualizando estados desde useEffect

Reto: loading skeletons

¿Qué es React Context?

useContext

¿Qué son los React Portals?

Reto: estados para abrir y cerrar un modal

Maquetando formularios en React

Crear TODOs: React Context dentro de React Portals

Deploy

Despliegue de TODO Machine en GitHub Pages

Presentación de proyectos para tu portafolio

Próximos pasos: React #UnderTheHood

Diferencias entre versiones de React.js

¿Cuándo realmente necesitas React.js?

Bonus: creando proyectos en React desde cero

React con Create React App

React con Next.js

React con Vite