📘 CURSO REACT NATIVE desde CERO - Creamos una app paso a paso

React Native te permite desarrollar una aplicación para iOS, Android y Web, compartiendo el código entre los diferentes dispositivos. Lo mejor ese que si ya sabes React, no tienes que aprender mucho más.

En este curso de 4 horas vamos a crear una aplicación de React Native desde cero para iOS, aunque el código podría funcionar para diferentes dispositivos.

00:00 Intro React-Native
03:10 Expo
05:10 Creando la app
10:07 Configurando iOS simulator
12:26 react-native-debugger
15:40 Linter
17:30 Text, View, Touchable
25:00 StatusBar y expo-constants
29:30 Mostrando los repositorios
32:37 ScrollView y FlatList
40:15 Desactivando reglas linter
41:00 StyleSheet, theme y estilos
54:38 FlexBox. Alineando texto y stats
01:02:00 ParseThousands
01:04:19 Estilando language
01:07:05 alignSelf: flex-start
01:08:10 BorderRadius y overflow
01:08:40 Image. Mostrando repo image
01:11:00 FlexBox. Mostrando image side by side
01:18:20 MarginHorizontal y MarginVertical
01:19:20 AppBar
01:25:00 react-router-native
01:28:30 Problemas con react-router-native
01:29:30 Solucion: webpack-config
01:34:50 Ruteando
01:40:50 Scroll para las tabs
01:49:00 Preguntas
02:07:40 Inicio clase 2
02:11:30 StatusBar
02:26:00 Sign in con Formik
02:40:25 Formik: useField
02:45:15 Masking the password
02:46:15 Preguntas
02:50:30 Validacion de formulario
02:57:40 Validación con yup
03:04:00 Configurando el backend
03:09:15 Queries a la REST API
03:14:30 custom hook useRepositories
03:17:50 Arreglando errores por localhost
03:20:20 ApolloClient
03:23:35 GraphQL
03:26:45 Usando graphQL en el custom hook
03:30:00 Preguntas

[lbarbosa]

Excelente Video!
Dejo la linea de instalación del eslint ;)

npm install --save-dev babel-eslint eslint-config-standard eslint-config-standard-jsx eslint-config-standard-react eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react

[wolfdog]

Gracias 🙏 soy un señor mayor que se embarcó en esta locura hace 2 años, y me ayudas un montón 😂😂😂😂😂🎉🎉

[soy-luisarrieta]

☑ *Quienes tengan problemas con el Router:* que sepan que este curso está envejeciendo y ya es un poco diferente la forma de enrutar.
Ya no existe Switch, dejaré un ejemplo de como lo hice para el minuto 1:36:05:
<Routes>
<Route path='/' element={<RepositoryList />} />
<Route path='/signin' element={<Text>Sign In</Text>} />
<Route path='*' element={<Navigate to='/' />} />
</Routes>

[miguelsalazar]

Que emoción, esa sensación de aprender cosas nuevas en este mundo, recuerden seguir y nunca rendirse!
Gracias MIdu, un abrazo.

[MrPocojoy]

Por si alguien más se lía con esto... Ha cambiado el puerto del GraphQL al 4000, ahora en el fichero "apolloClient.js" hay que poner uri: 'TU_IP_AQUI:4000/graphql' para que funcione. Sino da error 404...

[luisgranados]

3:11:25 Para los que le den error "Network request failed" del fetch y están usando el expo desde su celular físico, es porque el teléfono físico no tiene ni idea de que es el "localhost:5000", por lo tanto, deben de colocar la dirección ip en el fetch para que les funciones en el teléfono físico. Para saber cual es, solo abran su consola e ingresan "ipconfig". Creo que en Linux es "ifconfig"

[JorgeDev]

Comento esto porque veo que varios preguntan cosas de Flutter en el video.

Nosotros tenemos todo el stack con Typescript (salvo el legacy en PHP), Node en el servidor, Angular en la app interna y previsiblemente para la web cuando empecemos ese proyecto lo haremos en React, pero para una aplicación de almacen que tiene que ser nativa hemos optado por usar Flutter, la aplicación es relativamente sencillita y React ya lo conocemos bastantes en el equipo, si la experiencia nos convence ya podríamos portar otras aplicaciónes con más chicha como la app del ecommerce)

Los motivos principalmente han sido:
* El patron bloc (nos ha parecido una forma más limpia de implementar Flux que la que propone Redux, principalmente para Streams y funciones asincronas),
* Los componentes son clases con sus propios "hooks" (en react también se puede, pero no es el estandar, todo se va encarando a funciones)
* El ser un lenguaje relativamente similar a otros lenguajes que usamos como Typescript o C# (si fuese un salto como con Go seguramente no lo hubiesemos planteado nunca, este posiblemente es el motivo de peso más grande)
* Flutter en 2021 ha pasado de 39 a 41% del mercado, mientras que react native tras dos años consecutivos en 42% ha pasado a 38%
* Si vemos Google Trends la diferencia es de más del doble de interes en los ultimos 12 meses, seguramente sea hype pero, esto cruzandolo con lo anterior quiere decir, que al menos, escojas la que escojas tienes garantizado que no va a ser mala y vas a encontrar gente para trabajar.



Datos extra:
React nativo compila a nativo pero sigue haciendo uso de bastantes funcionalidades de js, no es nativo 100%, por lo que en bastantes casos es más lento que Flutter.
Flutter en cambio si que es nativo y da en la mayoría de casos un rendimiento muy similar al de un programa directamente hecho para la plataforma en cuestion.

Flutter 1.0 fue lanzado hace poco más de 2 años, React Native (no pasa de la 0.x pero es estable) hace 7 años, por lo que podríamos decir que React Native en teoría debería ser más maduro que Flutter, visto desde otro prisma, flutter es más nuevo y tiene más potencial para mejorar.
Flutter usa dart, un lenguaje que practicamente solo lo usan en combinación con Flutter mientras que React Nativo usa JS (o Typescript) uno de los lenguajes más usados (para mi typescript es God Tier), por lo que he leido el encargado del proyecto de Flutter es el mismo que el de Dart, asi que si encuentran una limitacion por lenguaje en Flutter seguramente podrán plantearse implementarlo en el lenguaje en lugar de buscar una solución más compleja a nivel de framework.
Flutter no usa lo componentes de interfaz nativos como si hace react, por lo que no deberían haber peculiaridades a nivel visual entre plataformas (no se como de comun es esto),

[mkoi]

No puedo creer que este curso sea gratuito. Gracias a vos aprendi react native

[gabrielhidalgo]

Me gusto mucho el video :)
Recomendación: Personalmente a la hora de hacer el npm install de (linter) "--save-dev babel-eslint eslint-config-standard eslint-config-standard-jsx eslint-config-standard-react eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react"
16:25

[briancamelo]

Hola muy buenas noches el contenido que sube a YouTube es de muy gran ayuda pero quiero dar una sugerencia Sería bueno que también realizará videos con el uso de lector de pantalla jaws para que la información que suba sea accesible para las personas con discapacidad visual Y así también podemos aprender de tecnología gracias

[jheromchacon]

Me dio error el Switch. Lo arreglé reemplazando el Switch con Routes. import {Routes, Route} from 'react-router-native'

const Main = () =>{
return (
<View style={{flex: 1}}>
<AppBar />
<Routes>
<Route path='/'
element={
<RepositoryList/>
}
/>
<Route path='/signin'
element={
<Text>Sign in</Text>
}
/>
</Routes>
</View>
)
}

[armandocastro]

Niceee, justo a tiempo e impresionante jejeje siempre tienes el contenido que necesito a la mano y lo que me parece bien particular es que este fue a velocidad pensamiento, justo pensando en buscar este contenido y pops una notificación con este video jejejej, gracias por tus aportes en mi caso han sido de gran ayuda en mi carrera y se que en la de muchos éxito Bro.

[SantiagoSegovia-PH]

Para tener encuenta si les sale un error cuando intentan con el Router usar el Swich. En React Router Native v6, el componente Switch ha sido reemplazado por el componente Routes

[carlosalbertovegahernandez]

Hola! como alguien comento por ahi, el repo rate-repository-api esta super cambiado y el clone normal te manda una versión con apollo server, que no supe como hacerlo funcionar. Por lo que mi solucion fue:
1) Bajarme a la version del video del repo, que el commit es y con esa version, funciona como esta en el video.
2) probablemente les saldrá el error [Network error]: TypeError: Network request failed en ese caso tienen que poner el ip de su pc en vez de localhost, con eso funciona.
saludos!

[kevinpalma]

Esperando con ansias este curso gracias Crack..! complementando con el de el gran Nicolas Schurmann

[maadeval]

Habrán docs, artículos, videos, JavaScript en jeroglíficos, pero nada como esto! 🥵 SIEMPRE se aprende MUCHÍSIMO, excelente video!!!

[tomascoglia]

Excelente Curso. Mido como siempre, impecable. Faltaría la continuidad del curso, espero que salga en algun momento. Lo mísmo con el repositorio del proyecto que esta muy desactualizado. De cuqluier manera, gracias por lo dado hasta ahora que igual ayuda muchisimo en el desarrollo profesional

[juanfrangs]

Me vuela la cabeza la cantidad de contenido que tienes subido a la playlist del bootcamp... mil gracias!

[dvdjamc]

Simplemente genial! Muchas gracias por compartir tus conocimientos. Pulgares arriba. Saludos y bendiciones para todos desde México.

[marvf]

@miduved muchas gracias por este tutorial, bastante util! ojala puedas realizar y compartir nuevos proyectos con react native, veo que en un año han actualizado algunas maneras lo que me parece de gran valor para los que estamos empezando en este mundo del desarrollo! abrazos!