Una forma simple de escribir una aplicación React.js en un complemento de WordPress

Comenzaremos este artículo con una demostración:
(En mi opinión, las respuestas correctas son “C” para la pregunta uno y “A” o “B” para la segunda pregunta, pero realmente depende de usted. Además, no dude en descargar el complemento que usé para probar !) Hoy te enseñaré cómo comenzar a aprender la creación de aplicaciones JavaScript en un entorno familiar de WordPress, sin confundirte con otras tecnologías complejas. Entonces, ¿qué fue eso? Era una aplicación web simple integrada en React.js, el marco de JavaScript caliente creado por los brillantes multimillonarios Playboy de Facebook e Instagram.
Como Matt Mullenweg y todos los demás están de acuerdo, JavaScript es el futuro del desarrollo web. Y, sin embargo, las tecnologías más populares de JavaScript (que no sean JQuey) parecen requerir sus propias pilas de tecnología completas, lo que pone mucho aprendizaje en su placer simultáneamente. Pero cuando empiezo a darme cuenta, ¡no tiene que ser así! Entonces, el propósito del artículo de hoy es específico y no es para enseñarle a React.js (apenas soy un principiante). Más bien, hoy le enseñaré cómo comenzar a aprender la creación de aplicaciones en React.js (y marcos similares), en un entorno familiar de WordPress, sin confundirlo con las muchas otras tecnologías complejas que han tendido a empujarme a no aprender el desarrollo de aplicaciones. .
El enfoque de los cuadros de JavaScript como WordPress profesional, dudé en ingresar completamente a los cuadros JS debido a la aparente necesidad de aprender una “pila completa” a la vez, lo que implica una cantidad abrumadora de aprendizaje. Seré honesto: el desarrollo de aplicaciones web me asusta un poco. Trabajando principalmente en WordPress, la construcción de aplicaciones web se siente como el “fondo profundo del grupo”, y también es el lugar donde se encuentra toda la tecnología “verdadera”. También es el lugar donde están las cosas más interesantes, como Facebook, Twitter, Airbnb, Spotify, etc., porque para hacer las cosas realmente interesantes, tienes que interactuar profundamente con los usuarios. De una manera que los sitios de información (cuáles son los El mejor uso de WordPress). Ningún caso). La razón principal específica por la que llego tarde para profundizar en el desarrollo de aplicaciones es lo que parece la gran brecha entre el trabajo de WordPress y otros tipos de desarrollo web. Para llevar a cabo un gran proyecto en React.js, no tiene que saber solo React.js; Debes conocer una “pila completa”. Una pila tan completa podría parecer: node.js (u otra solución de fondo, tal vez un marco php); Cebador (u otro corredor de tareas); Bower (u otro administrador de paquetes); Probablemente muchas otras herramientas que no conozco; y finalmente un marco de JavaScript frontal, como Angular.js o React.js. Hay mucho que aprender a la vez, así que no lo tengo.
Puede comenzar a usar cuadros front-end de JavaScript en WordPress, sin interactuar fuertemente con la arquitectura de backend del sitio.Si está en un lugar similar, el artículo de hoy podría ser una buena noticia.Resulta que es bastante fácil comenzar a usar marcos front-end de JavaScript en un entorno de WordPress y sin interactuar fuertemente con la arquitectura de backend.Desde mi experiencia hasta ahora, esta es una excelente manera de aprender estos cuadros.Cómo configurar una aplicación React.js a través de un complemento de WordPress El resto de este artículo lo guiará configurando nuestra aplicación de cuestionario React.js.El código de demostración completo está disponible para descargar aquí, ¡así que mire!
El código PHP completo del complemento es todo el archivo PHP principal del complemento: < Autor: Presione el autor: http://pressupinc.com */// Shortcode to Outtut Sutide Markup ADD_SHORTCODE ('WPShout_react_Quiz', 'WPShout_react_quiz_Show_Quiz'); Function wpshout_react_quiz_show_quiz () {return '
'; } add_action ('wp_enqueue_scripts', 'wpshout_ect_quiz_enqueue_scripts'); Function wpshout_react_quiz_enqueue_scripts () {// Solo cargue para la publicación específica con la demo del cuestionario (! Is_single (10742)) {return; } wp_enqueue_script ('react', plugin_dir_url (__file__). 'react/build/react.min.js'); wp_enqueue_script ('react-dom', plugin_dir_url (__file__). 'react/build/react-dom.min.js'); wp_enqueue_script ('Babbel', 'https://npmcdn.com/Ómail protegido] /browser.min.js’, ”, null, falso); wp_enqueue_script (‘wpshout-react-quiz’, plugin_dir_url (__file__). ‘wpshout-react-quiz.js’); wp_enqueue_style (‘wpshout-react-quiz’, plugin_dir_url (__file__). ‘wpshout-react-quiz.css’); } // Agregar tipo “babel” al script de preguntas add_filter (‘script_loader_tag’, ‘wpshout_react_quiz_add_babel_type’, 10, 3); function wpshout_react_quiz_add_babel_type ($ tag, $ handle, $ src) {if ($ handle! == ‘wpshout-react-quiz’) {return $ tag; } return ‘ ‘. ”
‘;} Echemos un vistazo a cada función clave.
Add_shortcode (): registrar la prueba por un código corto más corto para eliminar la prueba es a través de un código corto. Esta sección usa add_shortcode () para crear la siguiente situación: cada vez que una publicación contiene el texto [wpshout_react_quiz], WordPress emite el siguiente marcado:
. Este DIV vacío es lo que reacciona el script. JS completará con la prueba. wp_enqueue_scripts: asentamiento selectivo de las Escrituras en la demostración de prueba Esta sección implica un uso bastante primitivo de wp_enquee_criucts (): No quiero que cada página en wpshout atraiga react.js a partir de ahora, por lo que solo ponen esos scripts (y la única hoja de estilo del complemento) en una sola publicación. con ID Post 10742, que es la publicación que lees ahora. La otra cosa importante a tener en cuenta es que dibujo en Babel (una biblioteca JS en la que se basan los tutoriales React) desde la distancia, llamando a su dirección específica en otra parte de la web. Tenga en cuenta cómo se escribe la solicitud: comenzar con // nos permite extraer el recurso de manera segura a través de HTTPS, porque WPShout (estar en SSL) no extraerá recursos inciertos. La conclusión es que si hay URL externos estables donde se encuentran los recursos de JavaScript necesarios y no perturban las posibles implicaciones de rendimiento de su recuperación remota, puede llamarlas desde la distancia, en lugar de atraerlos directamente al complemento o usar un gerente . de paquetes.
Script_loader_tag: activación de Babel en el archivo JavaScript principal Esta es la pieza más oscura del código PHP del complemento. Existe porque nuestro archivo principal de JavaScript debe verse así: Más precisamente, Text/Babel es crítico: es lo que el archivo puede usar todas las cosas interesantes que necesitaba hacer en la biblioteca Babel. Ahora, ¿cómo colocamos texto/babel en una etiqueta de script que puse en la cola en modo WordPress? La única forma en que sé es a través del maravilloso filtro de WordPress script_loader_tag y mediante análisis manual de las cadenas, como se hace en esta función. Tenga en cuenta que PHP deja de lado los detalles anteriores, ¡el complemento no hace mucho! Simplemente grabe un código corto muy simple y coloque algunos scripts y una hoja de estilo. Esto es adecuado, porque todas las tareas pesadas deben hacerse bien en nuestra aplicación React.js. Trabajar con el resto de la pila que este complemento evita o ignora la mayoría de los elementos en una pila típica de tecnología, para centrarse en React.js en sí. PHP no es la parte difícil aquí, y no es la parte la que me impidió aprender tecnologías como React.js. Más bien, todas las tecnologías alrededor de los instrumentos frontales, como React.js, me mantuvieron alejado. Este complemento los evita o ignora a todos, y la forma en que lo hace es lo siguiente que exploraremos.

No hay relación con la arquitectura de backend Si desea una aplicación JS para intercambiar datos de base de datos de WordPress, la mejor manera es a través de WP-API. Pero el aprendizaje de la API es su propio proceso y aún no ha alcanzado completamente el núcleo de WordPress. Mis direcciones de prueba (bueno, ignoran) el problema simplemente creando sus propios datos, que no están relacionados con los datos en ningún otro lugar. Específicamente, las aplicaciones de JavaScript consumen objetos JSON y, por lo tanto, acabo de escribir mis preguntas en un objeto JSON en el archivo JS principal. Este archivo es wpshout-react-quiz.js, el archivo JavaScript que usa React y hace todas las tareas pesadas para la prueba. Los datos de prueba se ven así: / * json data * / var myData = [{cuestionext: “está introduciendo react.js en un entorno de WordPress difícil?”, Respuestas: [“sí”, “no”, “no necesariamente”] }, {Cuestionext: “¿Quieres aprender cómo?”, Respuestas: [“¡seguro!”, “Bueno, está bien”, “Adiós”]}]; También creamos una tienda vacía, en el mismo archivo, para obtener datos sobre la respuesta que elige haciendo clic en los botones de radio: VAR RespuestaData = [];
Si realiza proyectos simples, en particular para aprender, considere simplemente escribir y consumir datos JSON directamente en su aplicación. Estos datos no están en ninguna parte de la aplicación JS y, por lo tanto, no sepa nada más sobre usted y se pierde por completo en cualquier momento, actualice el navegador. Para una prueba simple, ¡esto es perfecto! En conclusión, si realiza proyectos relativamente simples, en particular para aprender, podría considerar divorciarse de todos los problemas de almacenamiento de datos y simplemente escribir y consumir sus propios objetos JSON directamente en su aplicación sin una herramienta. Gestión del paquete La forma correcta de obtener react.js Definitivamente no es descargarlo desde la web. ¿Por que no? Bueno, al cristalizar la versión React.js que usa, se registra para una deuda técnica creciente, porque React.js en sí continúa cambiando y mejorando. Esta es la pregunta precisa que los gerentes de paquetes como Bower tienen que resolver. Pero aquí está el trabajo: aprender a usarlos significa mucha familiaridad y comodidad con la línea de comandos, que solo tengo en mis mejores días. Si eres como yo y si haces un proyecto simple (especialmente para enseñarte solo), te recomiendo que tomes tus paquetes directamente de GitHub. Se ve como esto:
Tomará deudas técnicas, sí, pero eso no importa demasiado para los proyectos de aprendizaje u otros proyectos con una escala pequeña o una vida corta. Más importante es que la puesta en marcha de Bower ya no es un impedimento para su aprendizaje. Nada más que mantenga la tecnología simple, me permite aprender los elementos básicos de React.js sin ser inundado por otras curvas de aprendizaje de cien horas. ¡Lo que traté en este artículo es toda la tecnología que uso! La construcción de la prueba no implicaba nada en la línea de comando, nada en Node.js, nada con WP -API, nada con GIT, Bower, Primer o Gulp, y supongo que la lista continúa. Esto significaba que podía aprender los elementos básicos de React.js sin ser inundado constantemente por otras curvas de aprendizaje de una hora de horas. Pero él aprende correctamente para ser claro: el consejo que di en este artículo es, casi sin excepción, la “forma incorrecta” para desarrollar aplicaciones profesionales. Te sugiero que aprendas de la manera correcta y tengo la intención de hacerlo. Sin embargo, debe comenzar desde algún lugar y, en mi opinión, es terriblemente agradable comenzar con los bonitos cuestionarios que se actualizan automáticamente sin el monitoreo de DOM en el estilo jquey, en lugar de ahogarse en la documentación nodo.js durante dos semanas. ¡Por favor reaccione!