homefinance blog
En la última parte de nuestra serie REST API Aplications, comenzamos a mirar el frente del rompecabezas y seleccionados como una solución que estábamos ejecutando. Las razones fueron simples: es rápido, bien documentado y disfruta del apoyo de uno de los actores más importantes en los negocios, Facebook. Para verificar si WordPress y React se hablan entre sí, descargamos el kit de inicio React Local y creamos una llamada API rápida para mostrar algunos datos arbitrarios de nuestra instalación local de WordPress. Aunque nuestra prueba funcionó, no fuimos exactamente a la ciudad para obtener detalles sobre cómo funciona. Esta vez, solucionaremos esto con una imagen general más estructurada de hacer una aplicación React simple y usarla para mostrar datos.
Comencemos con una descripción general de lo que hacemos. Lo que estamos tratando de construir se inspirará aquí desde el excelente artículo introductorio React por por Harold Borgen. Si llegas al frío Reaccion, vale la pena mirar el juego de React.js en 8 minutos antes de continuar. Buscaremos armar una súper simple página única, tres partes móviles principales: una cita al azar (WordPress), una imagen adecuada para acompañarlo y un botón que le permite cargar otra cita aleatoria. cotizar.
En lugar de pensar en esto en términos de plantillas, utilizaremos el concepto de componentes en React para organizar las cosas. Visto en estos términos, podemos dividir la imagen anterior en cuatro subcomponentes útiles:
ThoreauApp: El componente que protegerá todo.
Imagen: donde vivirá nuestra imagen.
Cita: Donde presentaremos los mejores pensamientos de Thoreau.
Randomombuton: una oportunidad para que los usuarios carguen una sabiduría fresca. Ahora, tomemos desde arriba y pongamos nuestro primer componente frente a la cabeza. Creación de nuestro primer componente solo un recordatorio rápido aquí trabaja en una página index.html en el director raíz de nuestro sitio local http://www.thoreauapp.dev/. React Starter Kit está en el mismo director e incluimos archivos relevantes en nuestro encabezado. También notará un objetivo
llamado imaginativo en la página donde cargaremos nuestro contenido:
<AP
Llamamos al método CreateClass en el objeto React para definir nuestro primer componente. Como puede ver a continuación, transmitimos un objeto de especificación:
Var ThoreauApp = react.CreateClass ({
rendering: function () {
Return (
Una consistencia estúpida es el hobgoblin de las mentes pequeñas.
);
}
}); El objeto de especificación es el lugar donde pronto definiremos una serie de cosas, pero comenzaremos creando un método de renderizado básico. Esto es lo que usará React cada vez que rediseñe el contenido del componente. Si actualiza con entusiasmo su página de navegador en este momento, estará (desafortunadamente) sin nada. Eso es porque solo definí un componente potencial en este momento, no lo he dado vida. Vamos a tratar con esto ahora usando Reactdom.render: Reactom.render (, document.getElebyId (‘Content’)); Lo que hacemos aquí es decirle a Reactdom.render dos información muy importante:
El componente que deberían jugar.
El área en la página donde deberían recuperarla.
Una rápida refrescante de la página y somos recibidos con la siguiente vista inspiradora:
Antes de seguir adelante, hagamos un breve equilibrio de lo que ha sucedido hasta ahora. ¿Qué sucedió?
Vale la pena mirar el código por completo en esta etapa, solo para ser muy claro sobre lo que realmente hicimos:
Cargué las bibliotecas React relevantes.
Tenemos un área definida en la página para cargar nuestro contenido React.
Trabajé dentro de las etiquetas para escribir JavaScript/JSX.
Definí un componente y le di una función de clasificación.
Hemos establecido nuestro componente.
Ahora que sabemos lo que está sucediendo, hagamos un breve desvío para imaginar cosas.
Espolvorea en cierto estilo nuestros resultados en la pantalla hasta ahora son menos inspiradores. Sería bueno agregar al menos un poco de color y tipografía en esta etapa. ¿Pero cómo? La respuesta simple aquí es el uso de estilos en línea. Los puristas de CSS, sin duda, reunirán sus perlas para pensarlo, pero ese horror pálido en comparación con la desesperación que otros sentirán al enfrentar el moderno CSS del paisaje. Por supuesto, hay todo tipo de soluciones modulares inteligentes (como el radio), pero estamos buscando mantener las cosas lo más simples posible aquí. Dado esto, presentaremos algunos estilos rápidos en la función de clasificación y continuaremos con nuestras vidas:
Var ThoreauApp = react.CreateClass ({
rendering: function () {
Var ThoreauAppStyle = {
Color de fondo: “FFDE00”,
Color: “#333”,
Llenado: 20,
Ancho: 550,
Marja: “0 coche”,
Fontfamily: “Georgia”,
Tamaño de fuente: 22,
Font de peso: “Bold”
}
return (
Una consistencia estúpida es el hobgoblin de las mentes pequeñas.
);
}
}); Todo esto conduce al siguiente resultado:
No ganaremos ningún premio de diseño, pero es suficiente para determinar que tenemos un cierto control.
Con ese breve desvío fuera de la carretera, dividamos las cosas en componentes un poco mejores.
Agregar los componentes del niño ahora que tenemos algo en la página, y una idea vaga de una forma de diseñar los elementos, organizarnos un poco. Comenzaremos creando los siguientes dos componentes. Como puede ver, el texto del sustituyente se mueve a la cita y hay una imagen de sustituyente en el juego ahora por la bondad lorempixel: lime image = react.createClass ({rendering: function () {
devolver (
);
}
});
Var cited = react.createClass ({
rendering: function () {
devolver (
Una consistencia estúpida es el hobgoblin de las mentes pequeñas.
);
}
}); Nuevamente, debemos llamarlos, esta vez actualizando lo que devolvemos del componente ThoreauApp:
devolver (
); Una actualización rápida y ver lo siguiente:
¡Se ve mucho mejor! Hasta ahora, sin embargo, hay muchos sustitutos. Veamos la entrada de datos. Una palabra rápida sobre los datos en React en general, los datos en React pueden tratarse como una “condición” o “accesorios”. Estos pueden ser conceptos resbaladizos, por lo que se recomienda una revisión cuidadosa del pensamiento en React y la documentación relevante. La belleza de la condición en el React es que los cambios realizados activan actualizaciones automáticas de los componentes relevantes en la pantalla.
Una vez que la condición alcanza en forma de interacciones, la idea general es que desea que se administre una vez, lo más alto posible en la cadena de componentes y luego mueva los datos como accesorios posteriormente. Este es generalmente el enfoque que adoptaremos cuando conectemos la API REST e ingresemos un botón con el que los usuarios continuarán jugando. ¡Hablando con la API de WordPress REST para llegar a trabajar! Lo primero que haremos es hacer nuestra aplicación consciente donde pueda obtener datos: reactdom.render (, documento. GetemementById (‘contenido’)); Antes de mirar la carga de datos, nos aseguraremos de comenzar con una pieza limpia en cada carga de página. GetInitialState se apelará automáticamente una vez en la carga y se puede usar para eliminar los paquetes: getInitialState: function () {return {data: [], selectedQuote: ”};
}, Luego usaremos ComponentDidMount para llamar a nuestra API de WordPress. En este caso, usamos jQuery para hacer la solicitud AJAX real. Almacenará los resultados de la solicitud dentro del componente usando Settate: ComponentDidMount: function () {
$ .AJAX ({
Url: this.props.dataurl,
DataType: “JSON”,
Cache: falso,
Éxito: function (date) {
This.setsate ({data: data});
this.ChooserAndomQuote ();
} .bind (esto),
Error: función (xhr, status, err) {
console.error (this.props.url, status, err.toString ());
} .bind (esto)
});
} También llamaremos a otra característica aquí para elegir una cotización aleatoria del conjunto de resultados y asignarla a cierto estado: elija ThendomQuote: function () {
Var randomNumber = math.floor (math.random () * this.state.data.length); var selectedQuote = this.sate.data [randomNumbra];
this.setsate ({SelectedQuote: selectedQuote.content.rendred});
}, Ahora debemos ingresar esta información en nuestro componente de cotización. Lo haremos entrando como un accesorio llamado CITA: y luego lo elevaría y mostrarlo dentro del componente:
{this.props.quote}
