Aprenda a Reaccionar en 1 hora creando una aplicación de búsqueda de películas

Si ha querido aprender React pero no está seguro de por dónde empezar, ¡el nuevo curso de Scrimba Build a Movie Search App es perfecto para usted!

En este curso, se le guiará a través de la creación de la aplicación de principio a fin en solo una hora. Y trabajará a través de desafíos interactivos en el camino que lo ayudarán a obtener la memoria muscular que necesita para convertirse en un desarrollador de React efectivo.

¿Por qué aprender React?

React es el framework front-end más popular del mundo. Como dicen los documentos, React facilita la creación de interfaces de usuario interactivas y un código más predecible que es más fácil de depurar. Con React, puede producir interfaces de usuario complejas mediante la construcción de componentes reutilizables que administran su propio estado.

¿Qué hace este curso?

Tarjetas de cine con estilo

Este viaje de aprendizaje lo lleva a través de 11 capturas de pantalla interactivas, que le muestran los siguientes conceptos básicos de React moderno:

  • Cómo obtener una clave API
  • Agregar estilos base
  • Crear y diseñar componentes
  • Creando funciones
  • Administrar el estado mediante ganchos
  • Visualización de información
  • Crear y diseñar tarjetas

Introducción al profesor

Este tutorial está dirigido por James Q. Quick, un desarrollador web completo que habla regularmente en eventos comunitarios y participa en Hackathons. También dirige un canal de YouTube que enseña desarrollo web. Su lema 'Aprende. Construir. Enseñar.' lo convierte en el maestro perfecto para este curso práctico.

Prerrequisitos

Para estudiar este curso de manera eficaz, debe tener conocimientos básicos de HTML, CSS y JavaScript. También le resultará útil haber visto algún código de React antes, pero no es imprescindible.

Si necesita un poco más de conocimientos básicos, eche un vistazo a estos fantásticos cursos gratuitos de Scrimba:

  • HTML y CSS
  • Javascript

Si está listo para comenzar con React, ¡comencemos!

curso introductorio

Creación de una diapositiva de título frontal del curso de la aplicación Movie Search

En la primera malla, James nos muestra algunas de las características clave de la aplicación que crearemos y nos da un resumen rápido de cómo funciona la aplicación. Por último, James nos presenta la API que usaremos: themoviedb.org.

Cómo obtener la clave API de Movie DB

Generación de una clave API de MovieDB

En este breve elenco, James nos da la verdad sobre cómo obtener una clave API de Movie DB al registrarse con una cuenta gratuita. Esto es muy sencillo y solo toma unos minutos. Haga clic en la imagen de arriba para acceder al curso.

Agregue estilos base a su aplicación

A continuación, James nos muestra la aplicación React básica que ha instanciado para nosotros:

import React from "react"; import ReactDOM from "react-dom"; class Main extends React.Component { render() { return 

Hello world!

; } } ReactDOM.render(, document.getElementById("root"));

Luego agregamos algunos estilos base a nuestro style.cssarchivo, incluidos márgenes y relleno, estilos de título y, el Santo Grial de CSS, centrando el contenido de la aplicación. Haga clic aquí para ver los estilos usted mismo.

Crea tu primer componente

Nuestra primera aplicación React en acción

En esta malla, tenemos nuestro primer desafío: crear un componente React. James usa un test.jsarchivo para darnos una breve vista previa de lo que se necesita antes de dividir la tarea en partes manejables:

//to create the SearchMovies component //form with a class of form //label with htmlFor="query" and a class of Label //input of type text with a name of "query" and a placeholder //button class of button and a type of submit 

Haga clic en el enlace o la imagen de arriba para ensuciarse las manos y probar el desafío.

Aplicar estilo al componente Buscar películas

Nuestra primera aplicación React con estilos agregados

A continuación, es hora de diseñar nuestra nueva aplicación. James sugiere algunos estilos para nuestro , y , y agrega una consulta de medios para ajustar los estilos en pantallas más grandes:

@media (min-width: 786px) { .form { grid-template-columns: auto 1fr auto; grid-gap: 1rem; align-items: center; } .input { margin-bottom: 0; } } 

No olvide que Scrimba es totalmente interactivo, por lo que puede ser tan creativo como quiera con los estilos; estas ideas son solo algunas posibilidades.

Crear la función de búsqueda de películas

export default function SearchMovies(){ const searchMovies = async (e) => { e.preventDefault(); const query = "Jurassic Park"; const url = `//api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`; try { const res = await fetch(url); const data = await res.json(); console.log(data); }catch(err){ console.error(err); } } 

En este screencast, creamos una función asíncrona que utilizará la API Fetch para recuperar la información de la película de la API Movie DB. Pulsa el enlace para ver cómo se hace.

Administrar el estado con React useState Hook

En esta malla, James nos muestra cómo usar el estado para rastrear la consulta del usuario con el useStategancho:

const [query, setQuery] = useState(""); 

A continuación, configuramos onChangeon our para vincularlo a ese estado:

 setQuery(e.target.value)} />

Entonces es el momento de nuestro segundo desafío: crear el estado para la información de la película y actualizar ese estado según corresponda. Sube al tutorial para probarlo.

Mostrar información de película

Aplicación que muestra información de la película

Now that we can search for our movies, it's time to display the information to the user. Click the link or image to see how it's done!

Style the Movie Cards

Tarjetas de cine con estilo

Next up, James shows us how to style our movie cards to create an attractive, user-friendly app. We start with our card container :

.card { padding: 2rem 4rem; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0,0,0,0.25); margin-bottom: 2rem; background-color: white; } 

With that done, we move onto our titles and images. Click the link or image above to get the lowdown.

Create the Movie Card Component (Challenge)

Our final task is to create a separate component to display the movie card. This ensures maintainability should our project grow, and is a good habit to get into in preparation for bigger projects.

In true Scrimba style, James presents this challenge and then walks us through his solution. Head over to the cast now to try for yourself. Note: Props are needed for this, but James gives a quick how-to in the task explanation.

Wrap up

Congratulations on completing the Movie Search app! You now know how to build a fully functional app using core React concepts including functional components, hooks, fetch requests, styling, and reusable components.

I hope that you gained a lot from this course and feel inspired to continue your learning journey. To find out more about React, head over to Scrimba's free, six-hour Learn React for Free course.

After that, why not check out all the other great courses available over on Scrimba to see where you'll go next?

Wherever your journey takes you, happy coding :)