Cómo crear una aplicación de panel de control con reaccionar

Feb 1, 2026

Cómo

[dieciséis]

Página 1 de 2:

Hacer una aplicación de panel de control en reacción - Pasos 1-10

Hacer una aplicación de panel de control en reacción - Pasos 1-10
Hacer una aplicación de panel de control en reacción - Pasos 11-21

En este tutorial, caminaremos por. Cómo crear una aplicación usando Reaccionar - Una biblioteca JavaScript para construir interfaces de usuario. Esta Herramienta de diseño web es especialmente útil cuando se trata de la creación de componentes, ofreciendo beneficios significativos sobre algo como jquery.

La capacidad de crear componentes autónomos y reutilizables significa que puede mantener el código más pequeño y organizado. Si los componentes se configuran lo suficientemente bien, pueden reducirse cuando sea necesario sin una configuración adicional requerida en absoluto.

En este tutorial, haremos una aplicación de panel de control que vigila las métricas de apoyo importantes. La pantalla se divide en una cuadrícula, que se puede personalizar para mostrar diferentes imágenes dependiendo de los datos que debe mostrar.

¿Quieres crear un sitio, en lugar de una aplicación? Necesitas nuestros guías a los mejores. Creador de sitios web y Alojamiento web Servicio.

19 plugins de jquery brillante

Al hacer un componente de widget genérico, podemos cortar y cambiar la pantalla sin afectar a ninguno de los códigos subyacentes. Envolverlos en un componente de contenedores nos permite controlar la fuente de los datos separados de su pantalla.

Estaremos haciendo uso de CSS Grid para mostrar contenido en bloques definidos. Los navegadores que no lo admiten se mostrarán en una sola columna, al igual que al usar una pantalla más pequeña.

Descarga los archivos para este tutorial. aquí .

01. Descargar las dependencias.

Después de obtener los archivos del proyecto (y guardarlos en almacenamiento en la nube ), debemos derribar todos los paquetes requeridos que necesitamos para el proyecto. Estos incluyen archivos de 'Create-react-app', que se ocupa del proceso de compilación para nosotros.

También debemos ejecutar dos servidores, uno que proporciona recarga en caliente para la página y otra que proporciona algunos datos falsos para probar.

Ingrese lo siguiente en la línea de comandos mientras está dentro del directorio del proyecto:

 / * En una ventana * /
& gt; Instalación de hilo
& gt; inicio de hilo
/ * En otra ventana * /
& gt; Servicio de hilo

02. Añadir el primer widget.

Para comenzar las cosas, haremos un componente simple en la página. Con la configuración de Babel, podemos escribir componentes usando las clases ES2015. Todo lo que tenemos que hacer es importarlos cuando necesitamos y Babel con WebPack hará el resto.

Abrir /src/components/app.js y agregue la importación a la parte superior de la página. Luego, dentro de la función de renderizado, coloque el componente dentro del contenedor. & lt; div & gt; .

 Importar widget de
  '../components/widget';
[...]
& lt; div classname = "aplicación" & gt;
  & lt; widget / & gt;
& lt; / DIV & GT;

03. Estilo una caja de widgets

En este proyecto, WEBPACK está configurado para recoger las importaciones CSS. Esto significa que podemos importar archivos CSS como lo hicimos con JavaScript en el paso anterior, lo que nos permite crear archivos separados para cada componente. Agregue la siguiente importación a la parte superior de Widget.js. Esto se vinculará con el nombre de clase 'Widget' y alcanzará los estilos a ese componente.

 Importar '../styles/widget.css' ;

04. Añadir el encabezado y contenido

Cada widget necesitará una breve descripción de los datos que está mostrando. Para mantener las cosas personalizables, pasaremos esto como una propiedad, o "prop", hasta el componente cuando lo usamos.

En cuanto al contenido, reaccionó suministra a un 'propietario de niños' especial, que contendrá el contenido ingresado entre las etiquetas de apertura y cierre de un componente.

Reemplace el marcador de posición & lt; p & gt; En la función de renderizado con lo siguiente. El componente de carga entrará en juego más adelante.

 & lt; div classname = "encabezado" y gt;
  & lt; h2 & gt; {este.props.heading} & lt; / h2 & gt;
  {esta.props.loading? & lt; cargando / & gt; ""}
& lt; / DIV & GT;
& lt; div classname = "contenido" & gt;
  {este.props.children}
& lt; / DIV & GT;

05. Deje que el widget se extienda la cuadrícula.

Además de las hojas de estilo que importamos, también podemos crear estilos reaccionar dinámicamente en función de los accesorios aprobados.

Para abarcar columnas y filas con cuadrícula CSS, use las propiedades de la columna de cuadrícula y la fila de cuadrícula. Podemos pasar por los accesorios de 'Colspan' y 'Rowspan' para modificar esto por componente de una manera similar a cómo funcionan las células de la tabla en HTML.

Aplique estilos en el constructor de widgets y vítalos al contenedor. & lt; div & gt; .

 Si (propss.colspan! == 1) {
  este.spanstyles.gridColumn
  = `span $ {propss.clesspan}`;
}
if (props.rowspan! == 1) {
  este.spanstyles.gridrow
  = `span $ {props.rowspan}`;
}
[...]
& lt; div style = {esto.spanstyles}
  ClassName = "Widget" & GT;

06. Suministro de accesorios predeterminados

En este momento, nuestro widget está en blanco, ya que aún no suministramos accesorios. En estos casos, podemos suministrar accesorios predeterminados para usar en su lugar.

A menos que se le indique lo contrario, las cuadrículas CSS se incumplirán la unidad más pequeña, que en este caso es un cuadrado de 1x1. Justo antes de exportar el widget, suministre algunos accesorios predeterminados a ese efecto.

 Widget.DefaultProps = {
  Encabezado: "Widget sin nombre",
  Colspan: 1,
  Rowspan: 1
}

07. Hacer cumplir los accesorios específicos.

Los componentes pueden proporcionar sugerencias sobre qué tipo de valores deben enviarse como accesorios. Mientras desarrolla una solicitud, cualquier accesor que pase incorrectamente se presente en la consola como advertencias para ayudar a evitar los errores más adelante en la línea.

Justo debajo de los accesorios predeterminados, definen qué accesorios deben ser o deben pasar, y qué tipo deben ser.

 Widget.proptypes = {
  Encabezado: reactive.proptypes.string,
  Colspan: reactive.proptypes.number,
  Rowspan: React.Propttypes.Number,
  niños:
    Reactive.proptypes.element.isRequired
}

08. Añadir accesorios a la aplicación.

Al definir el propietario de 'niños' según sea necesario, puede notar que el navegador quejarse que actualmente está indefinido. Si bien esto no romperá la aplicación, seguirá molestándonos hasta que se clasifique.

Vuelva a cabo a App.js y agregue un avance al widget que creamos anteriormente. En lugar de hacer que la etiqueta se cierre automática, abra y agregue un contenido de marcador de posición para demostrar que está funcionando.

 & lt; Widget Heading = "Open Ticket TOTAL" & GT;
  & lt; p & gt; este es un poco de contenido & lt; / p & gt;
& lt; / widget & gt;

09. Muestra algunos datos

El componente NumberDisplay funciona muy al igual que el widget que acabamos de crear: hace que un texto se basa únicamente en los accesorios que pasamos. Podemos dejarlo caer en donde necesitamos y tener una visualización consistente de datos numéricos.

Importe el componente NumberDisplay en la parte superior y úselo para reemplazar el contenido del marcador de posición que acaba de agregar dentro del widget.

 Importar NumberDisplay de '../components/NumberDisplay';
[...]
& lt; numberdisplay max = {9} valor = {5} / & gt;

10. Convertir a Numberwidget

En este momento, hay mucho código utilizado para mostrar algo que no cambiará a través de los widgets. Podemos hacer un componente especial para encapsular todo. De esa manera, solo necesitamos importar Numberwidget.

Reemplace el widget y las importaciones de NumberDisplay en la parte superior de App.js con Numberwidget. Asegúrese de reemplazarlos también en el método Render.

 Importar númerowget de
  '../components/numberwidget';
[...]
& lt; numberwidget
  TEADING = "TOTAL DE BOLETO ABIERTO"
max = {9} valor = {5} / & gt;

PÁGINA PRÓXIMA: complete la aplicación de su panel de control en reacción

Página actual: Hacer una aplicación de panel de control en reacción - Pasos 1-10

Siguiente página Hacer una aplicación de panel de control en reacción - Pasos 11-21

Cómo crear una aplicación de panel de control con reaccionar

01. Descargar las dependencias.

02. Añadir el primer widget.

03. Estilo una caja de widgets

04. Añadir el encabezado y contenido

05. Deje que el widget se extienda la cuadrícula.

06. Suministro de accesorios predeterminados

07. Hacer cumplir los accesorios específicos.

08. Añadir accesorios a la aplicación.

09. Muestra algunos datos

10. Convertir a Numberwidget

Cómo - Artículos más populares

Cómo convertir WordPress en un constructor visual

21 maneras de optimizar su CSS y acelerar su sitio

Use la bolsa de herramientas de Marmoset para presentar modelos en VR

Pinte una liebre maliciosa en acuarela

Cómo construir diseños complejos usando CSS

Crea un Cinemagraph con Photoshop en 60 segundos

Crea un personaje con realismo estilizado

Prototipo de un botón de acción flotante en Pixate

Categorías