Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

¿Qué necesitas para aprender React.js?

1/34
Recursos
Transcripción

Aportes 94

Preguntas 25

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Que emoción!! 🤩

ReactWiki by: midudev: https://www.reactjs.wiki/

Es una documentación actualizada de React.js se las recomiendo. ⭐

Le di un giro a la aplicacion de este curso y la conecte con la API de Spotify, ahora te recomienda una cancion segun la tarea que vayas a realizar, estoy muy orgulloso de mi trabajo.
Nunca paren de aprender!!! 💚
Puedes usar mi app aqui
Pueder ver mi repositorio aqui

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

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

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

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

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. 💚

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! 💚

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

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

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

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

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.

✨ 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!

Mi profesor FA VO RI TOOOOO!!! ^^

Que bueno que es tomar cursos con JuanDC

Que profesor tan bacano!

suma mucho que el curso sea con react 18

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

como varias cosas en computación, lo que hice fue borrar todo e iniciar de nuevo desde cero, tal vez algo pasó en el camino, pero la segunda vez ya se pudo ejecutar, creo que todo debe de hacerse sin actualizar dependecias y dejar todo en modo automático

😄 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.

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!
Me da un *toc* el no ver la fecha de publicación de los comentarios 😟
chimba la energia de Juan le pone mucha emocion al curso

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.

Al fin me anime a llevar un curso de React JS

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!

no se que pase, pero siguiendo las instrucciones, da error y no puede verse en localhost:3000, así no puedo seguir nada del curso. Alguien mas menciona que es un tema de dependecias y si, veo que ya están depreciadas, pero no se que hacer con eso, como puedo continuar con el curso si no puedo seguirlo por estos errores
A pesar de repasar el curso de npm, no puedo resolver las dependencias de este proyecto, en lugar de reducirlas me aparecen mas jajjaa
No estoy de acuerdo con que cuando se vaya a a iniciar un proyecto no se haga desde cero sino desde un repo ya comenzado

🚀 ¿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 👇

si el logo si no gira puede ser por esto: <https://platzi.com/discusiones/1651-react-ejs/114765-el-logo-de-react-no-gira-a-que-puede-deberse/>
no puedo clonar me aparece error

Empecemos esto!

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

Qué emoción llegar a este curso sabiendo que ya tengo las bases que hace falta !!! Me costó mucho trabajo, muchos obstáculos, muchas vueltas, mucho tiempo, y por fin llegué !!!

De todos los profes de Platzi, al que nunca me cuesta entender es a Juan. gracias Juan
Les recomiendo crear un fork del repositorio para que puedan mantenerlo en su cuenta de github y poder subir todos sus experimentos y todo lo que se vaya a modificar en la clase.

Bueno, bueno, aquí vamos de nuevo. 😊

Pongo un aporte en caso que tal vez tengan problemas a la hora de seguir los pasos que están en este primer video. Para instalar y empezar y estamos en Windows ejecutamos lo siguiente 1. Instalar Node.js y npm 2. Instala **Create React App** npm install -g create-react-app 1. Crea un nuevo proyecto de React. Se lo puede hace ejecutando el siguiente comando en la terminal. create-reat-app my-app Aquí si les genera el siguiente mensaje de error create-react-app : File C:\\\Users\\\emore\\\AppData\\\Roaming\\\npm\\\create-react-app.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about\_Execution\_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170. Debemos realizar la siguiente acción: 1. Abrir PowerShell o ventana de comandos como **administrador.** 2. Ejecutar el siguiente comandoSet-ExecutionPolicy -ExecutionPolicy RemoteSigned Luego de eso si podremos ejecutar el comando **create-reat-app my-app** sin que nos genere algún error Esto creará una nueva carpeta/directorio llamado **my-app** con un nuevo proyecto de React básico 1. Para iniciar el servidor de desarrollo se hace ejecutando el siguiente comando en la terminal: cd my-app npm start Esto abrirá un navegador web con tu aplicación React en ejecución:
no aparecen los recursos..... eso dificulta mucho el aprendizaje. Donde puedo obtener esa info?
No aparece nada en la sección de recursos :/
No se muestra los recursos.
La sesión de recursos no sale nada de lo que indica en el video :(
creo que con la actualizacion no cargaron los recursos y no peudo acceder
\## ☘ ¿Empezando en React? 😃 Si quieres ver los conceptos básicos de React puedes revisar este \[Curso de React]\(https://www.youtube.com/watch?v=6Jfk8ic3KVk\&t=24870s) y leer los apuntes \[Curso React freeCodeCamp]\(https://github.com/aleroses/Platzi/blob/master/DW/3-avanzado/1.react.js/react.js-fcc.md). En ese curso hacen 4 proyectos, desde el más básico hasta algo más avanzado (ToDo).

Está más bronceado el profe?

Les recomiendo primero tomar este curso, explican muy bien haces 4 proyectos: pagina,contador de clicks,calculadora y todo gratis!
aqui
deberian hacer asi los videos Platzi, uno quiere ver mas el codigo que la cara del que habla

uff, no habia visto que se actualizo

a comenzar

Es una herramienta popular y de mayor demanda en el entorno de JS.
Permite construir aplicaciones escalables e interactivas. (multiplataforma, basado en componentes, etc.).

Requisitos:
• Programación básica
• HTML y CSS
• JavaScript
• Git y GitHub
• npm

porque veo el mismo proyecto 😒

20/05/2023 let’s do it

Gracias a Dios por finnn

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

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