Share
En la primera parte de esta serie de tutoriales, utilizamos el crear-reaccionar-aplicación herramienta para crear una aplicación de ejemplo funcional como punto de partida para nuestra aplicación de galería 'Movie Mojo'.
En la segunda parte, nos encargaremos de agregar nuestro primer componente personalizado para mostrar tarjetas de películas individuales. También veremos cómo el uso de accesorios nos permite personalizar la apariencia de los componentes pasando datos en lugar de codificarlos.
Esto demuestra la flexibilidad y la reutilización de los componentes, y cómo pueden usarse como poderosos bloques de construcción en sus aplicaciones React..
OK, vamos a crear un componente! Para empezar, mantendremos las cosas bastante simples y refactorizaremos el encabezado HTML en su propio componente.
Las mejores prácticas de Modern React recomiendan separar cada componente de su aplicación en un archivo separado. Seguiremos este principio para que, en tus proyectos. / src / components / carpeta, crea un nuevo archivo llamado Header.js y abrirlo en un editor de texto.
En la parte superior de los archivos de componentes, siempre comenzamos importando las bibliotecas requeridas, otros componentes (ya que podemos anidar componentes) y activos adicionales que necesitamos (por ejemplo, estilos). los importar La declaración es parte de ES6 y nos permite mantener nuestros proyectos altamente modulares..
Para nuestro
importar React, Componente desde 'reaccionar';
Esto importa la biblioteca React completa y la pone a disposición a través de Reaccionar variable. También importa el Componente objetar directamente para que podamos usarlo sin tener que calificarlo específicamente con un precedente Reaccionar. referencia de objeto.
En otras palabras, si no importamos explícitamente el Componente Objeto entonces tendríamos que acceder a él de la siguiente manera:
React.Component
Pero porque importamos Componente directamente, solo podemos utilizarlo por su cuenta sin ninguna referencia a la Reaccionar variable. No importa cuál use, y es solo de preferencia.
A continuación, para crear realmente el componente, extendemos el Componente objeto para crear una nueva clase que define nuestra importar declaración, escriba:
el encabezado de clase amplía la aplicación predeterminada de exportación del componente ;
Aquí, usamos una clase ES6 como nuestro contenedor de componentes. Las clases son una excelente manera de encapsular todo el código necesario para describir su componente.
Es posible que también haya notado que el archivo componente termina con una declaración de exportación. Esto, como es de esperar, exporta nuestro componente y lo pone a disposición de otros archivos en nuestro proyecto..
Como mínimo, se requiere que todos los componentes de React tengan un método de renderización, que devuelve alguna marca. Esto podría ser HTML, otros componentes de React, o una mezcla de ambos.
Agregue esto dentro de su clase de componente:
Accentsconagua
render () return React.createElement ('div', null, 'Hola, este es un componente React!'); los Para usar un componente React dentro de otro componente, primero debemos importarlo, así que agregue esto a la lista de declaraciones de importación en la parte superior de Observe cómo no necesita agregar el De hecho, si intentas usar Ahora podemos añadir el Así que esto no está permitido: Si desea devolver múltiples elementos, entonces tiene que envolverlos todos dentro de un único elemento envoltorio: Así que asegúrese de agregar el Bienvenido a la aplicación React 'Movie Mojo'! Esto resultará en nuestra Para completar el Sin embargo, es posible que haya notado que hay un problema. En La respuesta es JSX. En Así es como tenemos que escribir componentes React sin JSX. De hecho, bajo el capó, esto es en lo que se compila JSX antes de que pueda procesarse en el navegador. No está obligado a utilizar JSX en absoluto para sus componentes React; es totalmente de usted. Pero casi todos los componentes con los que se encontrará se escribirán en JSX porque es mucho más fácil de escribir. También es muy legible para otras personas nuevas en su código. Imagine tener que estudiar un proyecto React que contiene docenas de componentes diferentes escritos en JavaScript simple! Por lo tanto, no debería sorprender que utilicemos JSX para las definiciones de componentes durante el resto de esta serie de tutoriales.. Sigue adelante y reemplaza el Si bien JSX nos permite mucha más flexibilidad al escribir nuestros componentes, tenga en cuenta que no es el HTML real lo que escribimos, sino una abstracción de él.. Puedes ver esto en el fragmento de código de arriba. Aviso en el También vamos a ajustar los estilos de encabezado. Abierto Esto actualiza el color de fondo del encabezado y reduce la altura. Hasta ahora, nuestro Piense en los accesorios de componentes como similares a las etiquetas HTML. Por ejemplo, un Podemos hacer lo mismo con los componentes React. Digamos que no queremos que nuestro encabezado muestre el texto fijo '¡Descubre tu película Mojo!' todo el tiempo. ¿No sería mejor si nuestro encabezado pudiera mostrar cualquier texto?? A diferencia de los atributos de HTML, podemos nombrar a nuestros componentes como nos guste. Dentro Luego, actualice el Esto hace que nuestro encabezado muestre cualquier texto que se agregue al Echemos un vistazo más de cerca a cómo nos referimos a la Las llaves simplemente le dicen a JSX que tenemos algunos JavaScript que queremos evaluar. Esto lo distingue del texto. Si no usamos llaves, la cadena literal los Nuestro Esta es una buena noticia cuando desarrolle futuras aplicaciones React, ya que puede reutilizar componentes de proyectos anteriores para que no tenga que escribir todo desde cero.. Usamos los accesorios de arriba para pasar una cadena fija a la Para enviar una variable a través de accesorios, podríamos hacer algo como esto, donde Hay una herramienta muy útil disponible para el navegador Chrome que le permite inspeccionar información sobre su aplicación React. Las herramientas de desarrollo predeterminadas solo le permiten ver elementos HTML normales, pero con la extensión React Developer Tools instalada, puede navegar a través de todos los componentes de React en su aplicación. Una vez que esté instalado, abra las herramientas del inspector de su navegador y haga clic en el nuevo disponible Reaccionar lengüeta. Tenga en cuenta que en lugar de elementos HTML, verá la jerarquía de componentes React en su aplicación. Haga clic en el Una vez seleccionado, la información sobre un componente se muestra en la ventana a la derecha. los Las herramientas de desarrollo de React son muy útiles para la depuración, especialmente cuando desarrollas aplicaciones React más complejas, por lo que vale la pena acostumbrarse a usarlas en aplicaciones más simples.. También puede usar las herramientas de desarrollo de React para inspeccionar el estado de su aplicación, que veremos en el próximo tutorial.. En este tutorial, aprendió cómo dividir su aplicación en componentes separados para hacerla más modular. Los accesorios de componentes le permiten pasar valores a componentes individuales, de manera similar a cómo agrega atributos a elementos HTML. También vimos cómo aprovechar las nuevas herramientas del inspector del navegador para examinar los componentes y datos de accesorios.. En la parte 3, agregaremos el estado a nuestra aplicación para ayudarnos a administrar nuestros datos de manera más efectiva.React.createElement () método crea un elemento HTML (un Header.js y abrir App.js.App.js:importar encabezado desde './Header';
.js extensión de archivo, ya que se supone. Además, porque la importar encabezado desde './components/Header'; desde el interior App.js, obtendrás un error de compilación.
render () return ( );
render () return (
la aplicación de clase extiende el Componente render () return (
Descubre tu película Mojo!
App.js y agregarlo a Header.js.Descubre tu película Mojo!
App.js la Header.js sólo hay una llamada a React.createElement (). Que esta pasando?App.js usamos JSX para escribir una sintaxis similar a HTML para definir la salida de nuestro componente. Compare esto con nuestra definición de componente para Header.js.React.createElement ('div', null, 'Hola, este es un componente React!');React.createElement () llamar con el equivalente JSX que copiamos desde App.js. Tu Header.js El archivo ahora debería verse así:importar React, Componente desde 'reaccionar'; el encabezado de clase extiende el componente render () return (
Descubre tu película Mojo!
nombre de la clase más bien que clase ¿Para indicar donde queremos declarar una clase CSS? Esto se debe a que todo JSX se compila a JavaScript puro, y clase es una palabra reservada en ES6 JavaScript.App.css y editar el .Encabezado de la aplicación La clase CSS será:.App-header background-color: steelblue; altura: 70px; relleno: 20px; color blanco;
Componentes de apoyo
carné de identidad, clase, estilo y así sucesivamente que nos permiten asignar valores únicos para ese específico App.js, actualizar el texto apuntalar.this.props.text
texto apoyo en App.js.
texto apoyo interior Header.js utilizando:this.props.text
esto.props.text Sería de salida, que no es lo que queremos..esta palabra clave se refiere a la Encabezamiento clase de componente, y accesorios es un objeto que contiene todos los valores pasados desde accesorios el objeto contiene solo una entrada, pero puede agregar tantas como desee en la práctica.texto de cabecera es una variable:Inspeccionando React Componentes
Conclusión
