Aprender React con 100 ejercicios prácticos

Índice

¿Qué es React?…………………………………………………….. 14

Programación funcional y orientada a objetos ……….. 16

El editor de código ………………………………………………. 18

Profundizando en Visual Studio Code……………………. 20

Instalación de NodeJS y Git ………………………………….. 22

Creación de nuestra primera aplicación …………………. 24

Estructura de la aplicación recién creada………………… 26

Ejecutar nuestra aplicación …………………………………… 28

JSX …………………………………………………………………….. 30

Ejemplos de JSX ………………………………………………….. 32

Ejemplos de JSX. Eventos y arrays …………………………. 34

Recogida de datos………………………………………………… 36

Ejercicio useRef. Euros …………………………………………. 38

Ejercicio useRef. Grados ……………………………………….. 40

Ejercicio useRef. Superficie rectángulo …………………… 42

Estados ………………………………………………………………. 44

Ejercicios useState ……………………………………………….. 46

Ejercicio useState. Grados …………………………………….. 48

Ejercicio useState. Calcular superficie …………………….. 50

Recoger valor con estados en lugar de con useRef ……. 52

Componentes……………………………………………………… 54

Ejercicios componentes. Euros a dólares ………………… 56

Ejercicios componentes. Grados ……………………………. 58

Props………………………………………………………………….. 60

Enviar props del componente hijo al padre ……………. 62

Ejercicios props. Componente Post ……………………….. 64

Renderizado condicional ……………………………………… 66

Ejercicio props con renderizado condicional ………….. 68

Ejercicio Viaje……………………………………………………… 70

Arrays ………………………………………………………………… 72

Estilos ………………………………………………………………… 74

Styled components ……………………………………………… 76

Styled components. Hover, herencia y atributos …….. 78

Styled components. Mediaqueries, estilos del body…. 80

Aplicación para memorizar un speech …………………….. 82

Botones para avanzar y retroceder párrafos …………….. 84

useEffect …………………………………………………………….. 86

Aplicación de rutinas deportivas …………………………… 88

Aplicación de rutinas deportivas. Carga del primer título 90

Aplicación de rutinas deportivas. Mostrar imágenes… 92

Aplicación de rutinas deportivas. Styled components 94

Aplicación de rutinas deportivas. Destacando la imagen . 96

Aplicación de rutinas deportivas. Cambiar de workout 98

Hacer un trivial …………………………………………………. 100

Hacer un trivial. Preguntas, respuestas y variaciones 102

Hacer un trivial. Respuesta correcta……………………… 104

Hacer un trivial. Styled components ……………………. 106

Hacer un trivial. Mostrar popups …………………………. 108

Hacer un trivial. Randomizar preguntas y respuestas 110

Cuento interactivo …………………………………………….. 112

Cuento interactivo. Fichero de datos …………………… 114

Cuento interactivo. Cargar la primera escena ……….. 116

Cuento interactivo. Cargar la imagen ………………….. 118

Cuento interactivo. Styled components ……………….. 120

Cuento interactivo. Añadiendo puertas ……………….. 122

React Router ……………………………………………………… 124

React Router. Enlaces a páginas …………………………… 126

React Router. Envío y recepción de parámetros …….. 128

Fetch API …………………………………………………………… 130

Fetch API Comprobación de errores ……………………… 132

Axios………………………………………………………………… 134

Aplicación de chistes………………………………………….. 136

Aplicación de chistes Mostrando las categorías……… 138

Consultando la API de Star Wars …………………………. 140

Consultando la API de Star Wars. Mostrando datos . 142

Consultando la API de Star Wars. Ir a la página de perfil 144

Consultando la API de Star Wars. Procesar parámetros 146

Consultando la API de Star Wars. Página de perfil …. 148

Consultando la API de Star Wars. Styled components . 150

Consultando la API de Star Wars. Estilos en el perfil …… 152

Consultando la API de Star Wars. Paginación ……….. 154

Consultando la API de Star Wars. Procesar paginación 156

Context API ………………………………………………………. 158

Context API. Mostrar estados ……………………………… 160

Redux ………………………………………………………………. 162

Redux. La Store y los Reducers …………………………….. 164

Redux. Actions y Componentes ………………………….. 166

Redux. Añadiendo propiedades y entidades………….. 168

Redux. Ejercicios ……………………………………………….. 170

Estructura correcta de un componente de React ……. 172

Firebase …………………………………………………………….. 174

Firebase. Crear un proyecto ………………………………… 176

Firebase. Configuración de la base de datos ………….. 178

Firebase. Autentificación …………………………………….. 180

Firebase. Conexión desde React a Firebase ……………. 182

Firebase. Operación de alta …………………………………. 184

Firebase. Consulta y modificación……………………….. 186

Firebase. Borrado……………………………………………….. 188

Autentificación con Auth0 …………………………………. 190

Autentificación con Auth0. Aplicación de React……. 192

Autentificación con Auth0. Personalización …………. 194

NextJS ………………………………………………………………. 196

NextJS. Navegación ……………………………………………. 198

Publicación……………………………………………………….. 200

Publicación de un proyecto que utiliza React Router 202

React Native ……………………………………………………… 204

Arrancar nuestro proyecto con Expo ……………………. 206

React Native. Componentes básicos …………………….. 208

React Native. Compilar con Expo ………………………… 210

¿Y ahora qué? ……………………………………………………. 212