Crea una app con React usando create-react-app
Ahora que ya sabemos qué es React ⚛️, vamos a crear una pequeña aplicación desde cero para poner en práctica lo que sabemos, hacer un fetching de datos, tener un entorno de desarrollo y añadirle rutas.
Repositorio con el código:
https://github.com/midudev/react-live-coding
Mi curso gratuito de React en Udemy:
https://www.udemy.com/course/aprendiendo-react/
No está actualizado, pero hablo de muchos conceptos que siguen vigentes. Y bueno, ¡es gratis! 😜
¡Si te gusta dale LIKE 👍 y SUSCRÍBETE! 👇
https://www.youtube.com/c/midudev?sub_confirmation=1
SEGMENTOS 📹
00:00 - Bienvenida y presentación
01:42 - Qué es create-react-app
05:45 - npx create-react-app giffy
09:30 - Repasando la estructura de directorios y dependencias
14:20 - Ventajas de create-react-app
15:09 - Giphy API
18:48 - Utilizando useState
28:17 - Utilizando useEffect
36:35 - Llamada a API en React con fetch
39:33 - Mostrando un montón de gifs de pandas 🐼
42:08 - Extrayendo lógica a un servicio
49:37 - Creando nuestros primeros componentes
51:33 - Usando key para lista de elementos
54:43 - Creando componente ListOfGifs
59:05 - Las dependencias del useEffect
01:04:05 - Añadiendo algo de estilos
01:07:40 - Añadiendo rutas con wouter
01:18:35 - Conseguir que sea una SPA sin recargas
01:22:48 - Usando state de loading
01:25:11 - Guardando un objeto en el state del componente
01:30:09 - Scripts de nuestro proyecto: build
01:34:23 - Despedida y cierre 👋
#aprenderReactJS #reactjs #frontend #midudev
-~-~~-~~~-~~-~-
¡No te pierdas mi último vídeo! "Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore"
https://www.youtube.com/watch?v=8ZA2p1SBssk
-~-~~-~~~-~~-~-
Видео Crea una app con React usando create-react-app канала midudev
Repositorio con el código:
https://github.com/midudev/react-live-coding
Mi curso gratuito de React en Udemy:
https://www.udemy.com/course/aprendiendo-react/
No está actualizado, pero hablo de muchos conceptos que siguen vigentes. Y bueno, ¡es gratis! 😜
¡Si te gusta dale LIKE 👍 y SUSCRÍBETE! 👇
https://www.youtube.com/c/midudev?sub_confirmation=1
SEGMENTOS 📹
00:00 - Bienvenida y presentación
01:42 - Qué es create-react-app
05:45 - npx create-react-app giffy
09:30 - Repasando la estructura de directorios y dependencias
14:20 - Ventajas de create-react-app
15:09 - Giphy API
18:48 - Utilizando useState
28:17 - Utilizando useEffect
36:35 - Llamada a API en React con fetch
39:33 - Mostrando un montón de gifs de pandas 🐼
42:08 - Extrayendo lógica a un servicio
49:37 - Creando nuestros primeros componentes
51:33 - Usando key para lista de elementos
54:43 - Creando componente ListOfGifs
59:05 - Las dependencias del useEffect
01:04:05 - Añadiendo algo de estilos
01:07:40 - Añadiendo rutas con wouter
01:18:35 - Conseguir que sea una SPA sin recargas
01:22:48 - Usando state de loading
01:25:11 - Guardando un objeto en el state del componente
01:30:09 - Scripts de nuestro proyecto: build
01:34:23 - Despedida y cierre 👋
#aprenderReactJS #reactjs #frontend #midudev
-~-~~-~~~-~~-~-
¡No te pierdas mi último vídeo! "Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore"
https://www.youtube.com/watch?v=8ZA2p1SBssk
-~-~~-~~~-~~-~-
Видео Crea una app con React usando create-react-app канала midudev
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Creando Custom Hooks y usando Context para conseguir un estado global en ReactJS](https://i.ytimg.com/vi/2qgs7buSnHQ/default.jpg)
![Curso REACT JS ⚛️ - Aprende desde CERO 📈 Componentes, State, JSX (Tutorial Desde Cero en Español)](https://i.ytimg.com/vi/T_j60n1zgu0/default.jpg)
![](https://i.ytimg.com/vi/QOFDFLA_aQ0/default.jpg)
![Creando la página Home y configurando ESLINT y PRETTIER en nuestro proyecto](https://i.ytimg.com/vi/EEDRcolSHms/default.jpg)
![¿Qué es React.js y cómo funciona?](https://i.ytimg.com/vi/lWQ69WX7-hA/default.jpg)
![NextJS: Login en GitHub con Firebase y más Styled JSX](https://i.ytimg.com/vi/UlYGGCNFcWo/default.jpg)
![Crea tu primera app en React.js](https://i.ytimg.com/vi/eXSP524SBgw/default.jpg)
![Un SUPERORDENADOR con 165.888 NÚCLEOS](https://i.ytimg.com/vi/nctTZplQY-o/default.jpg)
![Arquitectura frontend y productividad - Entrevista con Jason Lengstorf (JavaScript)](https://i.ytimg.com/vi/pqSZ5en1BQ8/default.jpg)
![💯 Aprendiendo Node.JS y Express para crear una API 📶 - Bootcamp FullStack Gratuito](https://i.ytimg.com/vi/o85OkeVtm7k/default.jpg)
![Crea un NUEVO PROYECTO con Svelte 3 desde cero 🚀 - CURSO de SVELTE 🔶](https://i.ytimg.com/vi/VTkDuQ9RLVU/default.jpg)
![Aprendiendo NextJS, el framework de React con Server Side Rendering](https://i.ytimg.com/vi/2jxc8DMzt0I/default.jpg)
![React ⚛️: Estado del componente, Renderizado Condicional y Eventos - Bootcamp FullStack Gratuito](https://i.ytimg.com/vi/5KvlQDYDZwY/default.jpg)
![React Native, Curso para Principiantes (usando Expo)](https://i.ytimg.com/vi/hXDMWeD0ERM/default.jpg)
![Aprende Webpack paso a paso](https://i.ytimg.com/vi/ansUGkcrhwY/default.jpg)
![CSS en JS y Styled Components con Emotion y React](https://i.ytimg.com/vi/DjVGdUM1dHQ/default.jpg)
![React 16 - Crea tu Primera Aplicación Web en 1 hora](https://i.ytimg.com/vi/hScR513gvNo/default.jpg)
![React Hooks Tutorial](https://i.ytimg.com/vi/f687hBjwFcM/default.jpg)
![🧑⚖️ ¡Tu web a juicio! - Revisando proyectos y portfolios de la comunidad](https://i.ytimg.com/vi/Qd4NDPbv8mo/default.jpg)
![React Navbar Tutorial - Beginner React JS Project](https://i.ytimg.com/vi/fL8cFqhTHwA/default.jpg)