Share
En este tutorial final de nuestra serie React, crearemos un nuevo
El código para el proyecto final está disponible para descargar a través del enlace a la derecha de la pantalla (es posible que deba desplazarse hacia abajo). Más adelante, le proporcionaré instrucciones paso a paso sobre cómo poner en marcha el proyecto en su sistema..
los
El formulario requiere tres entradas de texto para título, año e imagen de póster; más un área de texto para la descripción de la película. En / src / components /, crear un nuevo archivo llamado AddMovie.js y añade lo siguiente:
importar React, Componente desde 'reaccionar'; La clase AddMovie extiende el componente render () return (); exportar por defecto AddMovie;
El reaccionar árbitro atributo almacena una referencia a cada campo de entrada de formulario como una propiedad de clase de componente. Usaremos estas referencias en breve como una forma de capturar fácilmente los valores del campo de entrada.
En primer lugar, sin embargo, agregue los siguientes estilos a App.css Para hacer la forma un poco más estética:
/ * estilos de forma de película * / .movie-form width: 250px; margen: 0 auto; entrada de .movie-form, .movie-form textarea width: 250px; tamaño de fuente: 14px; relleno: 5px; margen: 5px; .movie-form button font-size: 16px; relleno: 4px; margen: 10px 10px 30px 10px;
En Luego, en la parte superior del archivo, importe el Tu aplicación 'Movie Mojo' ahora debería mostrar un formulario hacia la parte inferior de la ventana del navegador. Necesitamos especificar un método de devolución de llamada que se ejecute cada vez que se envíe el formulario, que podemos usar para crear una nueva película. Agrega esto a la Luego, agregue el La primera tarea es evitar que se active el evento de envío predeterminado, lo que hacemos con Luego, creamos un nuevo objeto de película al tomar los valores del campo de entrada del formulario que almacenamos convenientemente como propiedades de clase de componente anteriormente. UNA Una vez que esté satisfecho el Para poder mostrar la nueva película en nuestra galería, necesitamos agregarla a la Para lograr esto, crea un nuevo método en No te olvides de enlazar el nuevo método a la Por cierto, puede que se pregunte por qué necesitábamos hacer esto aquí, pero no para el Usar De nuevo en Ahora, cuando completamos el formulario, obtenemos el objeto de la película en la consola, como antes, pero esta vez es a través de Eliminar el Esto es bastante similar a lo que hicimos en la tercera parte para el Esto dará como resultado que cada película adicional, agregada a través del formulario, tenga claves únicas. … y así. Abra la aplicación 'Movie Mojo' en el navegador y agregue dos nuevas películas a la galería a través del formulario. Hay imágenes adicionales de póster de película añadidas a la Cada vez que envíe el formulario, se agregará una película adicional a la galería.! Haga clic en el enlace a la derecha (aproximadamente a la mitad de la página) para descargar el archivo zip del proyecto 'Movie Mojo' finalizado. Una vez extraído, abra una ventana de línea de comando y navegue hasta Esto tomará unos minutos para descargar todos los módulos 'Node.js' necesarios para ejecutar el proyecto. Luego escriba: Esto compilará la aplicación React y la abrirá en un navegador a través de un mini servidor web dedicado. Hemos cubierto mucho en esta serie de tutoriales de cuatro partes, así que felicitaciones si lo ha hecho todo el tiempo y ha seguido el código. Ahora deberías sentirte cómodo con los conceptos básicos de React, y esto te dará la confianza para continuar y construir aplicaciones más complicadas.. Recomiendo descargar el proyecto 'Movie Mojo' y examinar el código fuente para asegurarse de que entiendes cómo encaja todo. Hay muchas posibilidades de ampliar la aplicación, así que, ¿por qué no intentar crear algunas funciones adicionales? Esta es también una excelente manera de consolidar su aprendizaje, al intentar implementar nuevos elementos React en la aplicación.. Aquí hay algunas ideas que podría considerar agregar: Me encantaría escuchar cualquier comentario que pueda tener sobre este tutorial a través de los comentarios a continuación. ¿Le resultó fácil de seguir o hubo partes con las que tuvo dificultades? Siempre estoy buscando mejorar mis tutoriales, por lo que los comentarios siempre son bienvenidos. Happy React codificar!App.js, añade el importar AddMovie desde './AddMovie';
elemento:onSubmit = (e) => this.addNewMovie (e)
addNewMovie () método a la cima de la addNewMovie (e) e.preventDefault (); var movie = title: this.title.value, year: this.year.value, description: this.description.value, poster: this.poster.value; console.log (película);
e.preventDefault (). De lo contrario, cuando se envíe el formulario, la página web se actualizará automáticamente, lo cual no es lo que queremos.console.log () comando sale el película Objeto para que podamos probar que se está creando correctamente al enviar el formulario.
película objeto se está generando correctamente, siga adelante y elimine el console.log () llamada.película objeto de estado Una vez hecho esto, React se encargará de actualizar el DOM para nosotros.App.js (donde vive el objeto de estado de la aplicación) para manejar la adición de una película al estado actual.addMovieToGallery (movie) console.log ('mooooooovie', movie); esta por lo que está disponible en toda la clase.this.addMovieToGallery = this.addMovieToGallery.bind (this);
addNewMovie () método que hemos añadido a la esta para ti. Vale la pena recordar este pequeño truco, ya que reduce la complejidad del código, al tiempo que mejora la legibilidad de su código..addMovieToGallery () en nuestro App.js, actualizar el AddMovie.js, actualizar el addNewMovie () Método para pasar el objeto de la película a la addMovieToGallery () método a través del addMovie apoyo que acabamos de crear.addNewMovie (e) e.preventDefault (); var movie = title: this.title.value, year: this.year.value, description: this.description.value, poster: this.poster.value; this.props.addMovie (película);
addMovieToGallery () método en el 
console.log () comando en addMovieToGallery () y reemplácelo con el siguiente código para agregar los detalles de la película ingresados a la películas objeto de estado:addMovieToGallery (movie) var ts = Date.now (); var newMovie = ; newMovie ['movie' + ts] = movie; var currentMovies = … this.state.movies; var newMovies = Object.assign (currentMovies, newMovie); this.setState (movies: newMovies);
loadAdditionalMovies () método. La principal diferencia es que se debe generar una clave única, sobre la marcha, para cada entrada de película adicional. Esto se logra utilizando la marca de tiempo actual como clave única y agregándola a película.movie1501686019706 movie1501686027906 movie1501686032929
./ public / posters / carpeta para mayor comodidad, para que pueda probar fácilmente agregar películas a la galería. Puedes acceder a estos descargando el proyecto de aplicación finalizado..
Instalando Movie Mojo
película-mojo directorio, y escriba:npm instalar
npm start
Conclusión
Accentsconagua