¿Qué necesitas para aprender React.js?

🔵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 😛).
.
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.

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

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 😉

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

1. Ingresamos a la carpeta

 cd curso-react-intro

1. Instalamos las dependencias

sudo npm i 

1. Corremos el programa

sudo npm run start

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.

Nunca pares de aprender. 💚

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

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

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

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

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

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

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_modulesy 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

viva react!

a darle duro.

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.

Mi profesor FA VO RI TOOOOO!!! ^^

suma mucho que el curso sea con react 18

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

Curso de ReactJS

• Te doy la bienvenida al curso de ReactJS, una de las herramientas más populares y con mayor demanda laboral en el entorno de JavaScript.

¿Cómo ReactJS se destacó?

• ReactJS permite la creación de aplicaciones altamente escalables y extremadamente interactivas.
• Es multiplataforma, declarativo y basado en componentes, conceptos que exploraremos a lo largo del curso.
• Construiremos un proyecto llamado Todo Machine, aprovechando todo el poder de ReactJS para crear una experiencia espectacular y viva para los usuarios.

Requisitos para el Curso

• Este curso no es de programación básica, sino de introducción a React. Si eres principiante, asegúrate de tomar cursos básicos antes.
• Se espera que tengas conocimientos fundamentales en HTML, CSS y JavaScript, incluyendo conceptos como ECMAScript, programación orientada a objetos, manipulación del DOM y asincronismo.
• Es esencial conocer Git y GitHub para gestionar el control de versiones de nuestro proyecto.
• NPM será utilizado para instalar y manejar dependencias, aunque otras herramientas como Yarn o PMPM son igualmente válidas.

Proyecto: Todo Machine

• Desarrollaremos un proyecto práctico llamado Todo Machine, una aplicación interactiva que permitirá buscar, filtrar, marcar como completados y borrar elementos.
• La aplicación reaccionará a las interacciones del usuario, brindando una experiencia viva.
• Se proporcionará un repositorio en la cuenta de Platzi para clonar, instalar dependencias con npm install y ejecutar con npm start.

Próximos Pasos y Compromiso del Profesor

• Configura tu entorno siguiendo las instrucciones proporcionadas en el repositorio.
• Explora el diseño y funcionalidades de Todo Machine para tener una vista previa del proyecto final.
• Aprenderemos sobre componentes en la siguiente clase, el fundamento fundamental de ReactJS.
• Soy Juan DC, Core Director y profesor de Desarrollo Web en Platzi. Mi compromiso es asegurar que este curso aporte a tu crecimiento profesional como frontend developer con ReactJS.
• Al finalizar el curso, habrás desarrollado un proyecto interactivo y funcional para tu portafolio profesional. ¡Nos vemos en la siguiente clase para crear componentes con ReactJS!

✨ Apuntes / Notas / Resumen

Te dejo alguno apuntes hechos en Obsidian y alojados en GitHub que quizá te puedan servir para ir sin tanto lío si eres principiante como yo. 🦄 Apuntes React en GitHub

Waoooo super buenisimo el estilo de esta primera clase! Juan ya es un grande y con este estilo dark le da un plus +

🥹 Al fin! luego de conocer todo CSS y HTML. Estoy listo para empezar con React! Vamonooooos!

Que bueno que es tomar cursos con JuanDC

Que profesor tan bacano!

Luego de la trilogía de cursos de API REST vamos a aprender este…recién salidito del horno 😄

Estaba al 50% del curso pasado. Y ¡PUM! se actualizo el curso… Que buens servicio jeje…

Bueno volver a empezar. Ahora hay más por aprender… Gracias Profe.

Eso explica porque no encontraba el anterior en la ruta de Backend. Justo a tiempo

Me hubiera gustado que comencemos completamente de 0

Quien en marzo de 2024? ✋🏻👩🏻‍💻

Justo al pelo! Hoy tenía que comenzar a aprender React y hoy sale el curso 😄

Súper genial la calidad de los cursos nuevos de Platzi 💚
btw, Juan DC es fácilmente de los mejores profes Platzi

Gracias a Dios por finnn

20/05/2023 let’s do it

porque veo el mismo proyecto 😒

😄 React no actualiza automaticamente los cambios;
solucion habrirlo lo mas cerca de ~/ (origen de linux)
otra posible solucion correr react dentro de visual studio code.

Para los que tienen problemas con UBUNTU que es muy lento cuando se ejecuta NPM START la solución es usar la terminal de powershell. Dure varios días tratando de solucionar el problema y no me quedó mas opción que hacer eso.

Yo dirigí este curso y apenas lo voy a empezar. A ver qué tal nos quedó. Que emoción

Eres el mejor Profesor JDCG

Deseo compartirles mis apuntes que hice en Notion respecto a los conceptos teóricos de este curso, espero les sea de utilidad 😄😄

121 vulnerabilidades a arreglar después del primer fix. VÁLGAME DIOS!!! 75 después del segundo… OK esto tomará tiempo.

Bueno ya trabaje con Angular mucho tiempo, ahora migremos a react 😄 !

🤘🏻

❤️

Esto porque me ha pasado, si van al archivo css van a ver algo que dice: “prefers-reduced-motion: no-preference” esto indica que si en el navegador/sistema que tienen esta desactivado el uso de animaciones…que lo ignore.

Si estan en windows esto se “soluciona” (en verdad es un tema de configuración) activando las animaciones en su sistema (yo en notebooks viejas suelo desactivarselo porque utiliza un poquito mas de RAM y procesador, muy poco pero a algunos les molesta también ajaj)

Dejo un recurso que es muy útil para poder verificar la responsabilidad de nuestro sitio, según qué dispositivos.

Responsively App

Vine con muchas expectativas de aprender y me encontré a un profesor super motivador que las supero totalmente. ¡Vamos por este curso!

Suena bien este curso, ánimo a todos.

Buena Introduccion Juan. Gracias platzi

React: (también llamada React. js o ReactJS) es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página.

Soy totalmente nuevo en React, viniendo de Angular, veo como esa mezcla de html con javascript que se ve super fea, parece PHP, lo aprendo por la demanda laboral que tiene, pero la verdad mil veces mejor un framework bien estructurado y con buenas practicas como Angular.

Acabo de etrminar el anterior curso. nose como sentirme al respecto

Dando mis primeros pasos!!!

justamente termine este curso hace unos meses, y ahorita voy a tomar la actualizacion del mismo para que no se me vaya a ir este asunto.

Recomiendo mucho el nuevo curso sobre Vite con la profesora Diana Martínez (antes o después, de éste curso).
Vite Js : https://platzi.com/cursos/vitejs/

Los que no saben como finalizar el proceso de ‘npm start’.

CTRL + C.

Que bello que hayan actualizado este curso, vamos con todo!

También podías haber hecho un Fork del proyecto??

Más de 3 años que dejé de codear. Retomando. Espero no haberme olvidado de muchas cosas.

Instalé Node en Windows y no me dejaba ejecutar npm ni en vsc ni en cmder. Apagué la compu,me fui a dormir ,me levanté y haciendo node -v y npm -v me aparecieron las versiones y como reconoció los comandos pude ejecutar npm i y npm start sin problemas como el video

La calidad visual de los cursos mejora constantemente. Gran trabajo. Gracias, Platzi.

Wow, que gran energía de Juan David, vamos con toda en este nuevo curso.

Ya me iba a dormir y vi este curso de introducción a React mejorado, y bueno, aquí estoy y aquí me quedo(/ω＼)

Estaba por terminar el anterior “Curso de Introducción a React.js” y me salta la notificación de este curso actualizado…
Bueno, tendré que repasar conceptos de 0 nuevamente…

Me encanta este nuevo formato. Claro y bien fluido

Wow! Justo empecé el antiguo curso de react hace 2 dias y me encuentro con la sorpresa de que voy a poder hacer uno super actualizado!

Bon appétit!

! empecemos !

🚀 ¿Empezando en React? 😃

Si quieres ver los conceptos básicos de React puedes revisar este
Curso de React y leer los apuntes Curso React freeCodeCamp. En ese curso hacen 4 proyectos, desde el más básico hasta algo más avanzado (ToDo).

Otros apuntes sobre React

Apuntes en GitHub

Recomendación 🚀

Les comparto y recomiendo un curso donde pueden reforzar algunos temas vistos o no vistos en este curso, además les dejo los apuntes que fui agregando conforme fueron pasando los días.

Enlaces 👇

• REACT JS desde cero
• Apuntes en GitHub 🐱

Empecemos esto!