{"id":95589,"date":"2022-08-31T14:30:45","date_gmt":"2022-08-31T12:30:45","guid":{"rendered":"https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/"},"modified":"2020-12-03T23:01:35","modified_gmt":"2020-12-04T02:01:35","slug":"construyendo-una-aplicacion-react-desde-cero","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/javascript\/construyendo-una-aplicacion-react-desde-cero\/","title":{"rendered":"Building a React application from scratch"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/javascript\/construyendo-una-aplicacion-react-desde-cero\/#Configurando-React-y-Babel\" >Configurando React y Babel<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/javascript\/construyendo-una-aplicacion-react-desde-cero\/#La-creacion-de-webpack-dev-servidor\" >La creaci\u00f3n de webpack-dev-servidor<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/javascript\/construyendo-una-aplicacion-react-desde-cero\/#Configurando-CSS\" >Configurando CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/javascript\/construyendo-una-aplicacion-react-desde-cero\/#Haciendo-CSS-modular\" >Haciendo CSS modular<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div itemprop=\"articleBody\">\n<p>Mi objetivo con este art\u00edculo era establecer una configuraci\u00f3n simple que luego se pueda desarrollar. Ha sido una lucha para entender Webpack.\u00a0<span id=\"more-159\"\/><\/p>\n<p>Lo que planeo hacer es hacer una funcionalidad de b\u00fasqueda con algunos datos JSON falsos (o reales). En esta publicaci\u00f3n de <strong>escuelajavascript.com,<\/strong> pasar\u00e9 por la configuraci\u00f3n de mi proyecto.<\/p>\n<p>Haz un nuevo proyecto y cd en \u00e9l:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nmkdir react_search&#13;\ncd react_search&#13;\n&#13;\n<\/pre>\n<p>Crea un archivo <em>package.json<\/em> :<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nnpm init&#13;\n&#13;\n<\/pre>\n<p>Si desea omitir todas las preguntas, agregue la marca <strong>-y:<\/strong><\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nnpm init -y&#13;\n&#13;\n<\/pre>\n<p>Necesitamos instalar <strong>webpack<\/strong> como una dependencia <strong>dev<\/strong> y <strong>webpack-cli<\/strong> para que puedas usar <strong>webpack<\/strong> en la l\u00ednea de comandos:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nnpm i webpack webpack-cli -D&#13;\n&#13;\n<\/pre>\n<ul>\n<li><strong>i:<\/strong> instalar<\/li>\n<li><strong>-D:<\/strong> \u2013 save-dev<\/li>\n<\/ul>\n<p>Crea una carpeta <strong>src<\/strong> con <strong>index.js<\/strong> y coloca el siguiente c\u00f3digo como ejemplo:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nconsole.log (\"hola\");&#13;\n&#13;\n<\/pre>\n<p>Ahora agrega los siguientes <strong>scripts<\/strong> a tu <strong>package.json<\/strong>:<\/p>\n[\/php]\n<p>{<br \/>\u00abname\u00bb: \u00abreact_search\u00bb,<br \/>\u00abversion\u00bb: \u00ab1.0.0\u00bb,<br \/>\u00abdescription\u00bb: \u00abBuscar aplicaci\u00f3n usando React\u00bb,<br \/>\u00abmain\u00bb: \u00abindex.js\u00bb,<br \/>\u00abscripts\u00bb: {<br \/>\u00abstart\u00bb: \u00bb webpack \u2013mode development \u00ab,<br \/>\u00bb build \u00ab:\u00bb webpack \u2013mode production \u00bb<br \/>},<br \/>\u00bb keywords \u00ab: [],<br \/>\u00bb author \u00ab:\u00bb,<br \/>\u00ablicense\u00bb: \u00abISC\u00bb,<br \/>\u00abdevDependencies\u00bb: {<br \/>\u00abwebpack\u00bb : \u00ab^ 4.0.1\u00bb,<br \/>\u00abwebpack-cli\u00bb: \u00ab^ 2.0.10\u00bb<br \/>}<br \/>}<\/p>\n[\/php]\n<p>El <strong>Webpack 4<\/strong> ahora tiene dos modos; <strong>desarrollo<\/strong> y <strong>producci\u00f3n<\/strong> donde el c\u00f3digo se minimiza en este \u00faltimo.<\/p>\n<p>Velo por ti mismo, ejecutando:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nnpm run start&#13;\n&#13;\n<\/pre>\n<p>Esto crear\u00e1 una<strong> carpeta dist<\/strong> con el archivo <strong>main.js<\/strong> dentro (que contiene tu c\u00f3digo <strong>src).<\/strong><\/p>\n<p>Ahora ejecuta:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nnpm run build&#13;\n&#13;\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Configurando-React-y-Babel\"><\/span>Configurando React y Babel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Para trabajar con <em>React,<\/em> necesitamos instalarlo junto con <em>Babel.<\/em> Esto transferir\u00e1 el c\u00f3digo de <strong>ES6<\/strong> a <strong>ES5,<\/strong> ya que no todos los navegadores son compatibles con <strong>ES6<\/strong> todav\u00eda (por ejemplo, <strong>Internet Explorer<\/strong>).<\/p>\n<p>Instalar React, y React como una dependencia.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nnpm reacciono reaccion-dom -S&#13;\n&#13;\n<\/pre>\n<p>Luego instala <strong>babel-core<\/strong> , <strong>babel-loader<\/strong> , <strong>babel-preset-env<\/strong> y <strong>babel-preset-react<\/strong>\u00a0como una dependencia dev:<\/p>\n<p><code data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">npm i babel-core babel-loader babel-preset-env babel-preset-reaccion -D<\/code><\/p>\n<ul>\n<li><strong>babel-core<\/strong>: transforma tu c\u00f3digo ES6 en ES5<\/li>\n<li><strong>babel-loader<\/strong>: asistente de paquete web para transformar tus dependencias de JavaScript (por ejemplo, cuando importas sus componentes a otros componentes) con <strong>Babel<\/strong><\/li>\n<li><strong>babel-preset-env<\/strong>: determina qu\u00e9 transformaciones \/ complementos usar y <strong>polyfills<\/strong> (proporciona funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa) en funci\u00f3n de la matriz de navegador que deseas admitir<\/li>\n<li><strong>babel-preset-react<\/strong>: <em>Babel preset<\/em> para todos los complementos <strong>React,<\/strong> por ejemplo, para convertir <em>JSX<\/em> en funciones<\/li>\n<\/ul>\n<p>Necesitamos crear un archivo <strong>webpack.config.js<\/strong> para establecer las reglas para nuestro cargador de babel.<\/p>\n<p>Luego necesitamos hacer un archivo separado llamado <strong>.babelrc<\/strong> para proporcionar las opciones para <strong>babel-loader.<\/strong> Puedes incluirlo en el archivo <strong>webpack.config.js,<\/strong> pero he visto que la mayor\u00eda de los proyectos tienen esto separado. Esto da como resultado una legibilidad m\u00e1s clara, y puede ser utilizado por otras herramientas no relacionadas con el paquete web. Cuando declares que est\u00e1 usando <strong>babel-loader<\/strong> en la configuraci\u00f3n de tu paquete web, buscar\u00e1 el archivo <strong>.babelrc<\/strong> si hay uno.<\/p>\n<p>A continuaci\u00f3n, cambia su archivo <strong>index.js<\/strong> para representar un componente:<\/p>\n<p>Tambi\u00e9n necesitaremos crear un archivo <strong>index.html<\/strong> en la carpeta <strong>src<\/strong> donde podemos agregar nuestro elemento de secci\u00f3n con<strong> id index.<\/strong> Aqu\u00ed es donde representamos nuestro principal componente de React:<\/p>\n<p>Ahora necesitamos instalar <strong>html-webpack-plugin<\/strong> y usarlo en nuestro archivo de configuraci\u00f3n de <strong>webpack.<\/strong> Este complemento genera un archivo <strong>HTML<\/strong> con <strong>&lt;script&gt;<\/strong> inyectado, lo escribes en <strong>dist \/ index.html<\/strong> y minimiza el archivo.<\/p>\n<p>Instala <strong>html-webpack-plugin<\/strong> como una dependencia de desarrollo:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nnpm i html-webpack-plugin -D&#13;\n&#13;\n<\/pre>\n<p>Actualiza la configuraci\u00f3n del <strong>webpack<\/strong> de esta manera:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nplugins: [&#13;\nnew HtmlWebPackPlugin ({&#13;\ntemplate: \".\/src\/index.html\",&#13;\nnombre de archivo: \".\/index.html\"&#13;\n});&#13;\n<\/pre>\n<p>El valor que le estoy dando a la clave <strong>template<\/strong> es donde busco mi archivo <em>HTML.<\/em> El valor del nombre de archivo es el nombre del <em>HTML<\/em> minificado que se generar\u00e1 en la <strong>carpeta dist<\/strong>.<\/p>\n<p>Si ejecutas ahora <strong>npm run start<\/strong>, deber\u00edas ver que se genera <strong>index.html<\/strong> en la<strong> carpeta dist.<\/strong><\/p>\n<p>Ejecuta open <strong>dist\/index.html\u00a0<\/strong>y deber\u00edas ver <strong>\u00abHello React\u00bb<\/strong> en tu navegador.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"La-creacion-de-webpack-dev-servidor\"><\/span>La creaci\u00f3n de webpack-dev-servidor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Es un poco tedioso seguir ejecutando este comando cada vez que quieras ver sus cambios en el navegador. Para que el webpack \u00abvea\u00bb nuestros cambios y, por lo tanto, se actualice cada vez que hemos realizado cambios en cualquiera de nuestros componentes, podemos usar el m\u00f3dulo <strong>webpack-dev-server<\/strong>.<\/p>\n<p>Adelante, instala esto como una dependencia de desarrollo.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nnpm i webpack-dev-server -D&#13;\n&#13;\n<\/pre>\n<p>Luego, cambia los scripts de inicio de <strong>package.json<\/strong> as\u00ed:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">{&#13;\n\"name\": \"react_search\",&#13;\n\"version\": \"1.0.0\",&#13;\n\"description\": \"Buscar aplicaci\u00f3n usando React\",&#13;\n\"main\": \"index.js\",&#13;\n\"scripts\": {&#13;\n\"start\": \" webpack-dev-server --mode development --open \",&#13;\n\" build \":\" webpack --mode production \"&#13;\n},&#13;\n\" keywords \": [],&#13;\n\" author \":\" \",&#13;\n\" license \":\" ISC \",&#13;\n\" dependencias \": {&#13;\n\" reaccionar \":\" ^ 16.2.0 \",&#13;\n\" reaccion-dom \":\" ^ 16.2.0 \"&#13;\n\" devDependencies \": {&#13;\n\" babel-core \":\" ^ 6.26.0 \",&#13;\n\"babel-loader\": \"^ 7.1.4\",&#13;\n\"babel-preset-env\": \"^ 1.6.1\",&#13;\n\"babel-preset-react\": \"^ 6.24.1\",&#13;\n\"html-webpack-plugin\" : \"^ 3.0.6\",&#13;\n\"webpack\": \"^ 4.1.1\",&#13;\n\"webpack-cli\": \"^ 2.0.10\",&#13;\n\"webpack-dev-server\": \"^ 3.1.0\"&#13;\n}&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>Si ejecuta ahora <strong>npm run start<\/strong> deber\u00edas ver <em>localhost: 8080<\/em> abrirse en tu navegador predeterminado, para eso est\u00e1 la\u00a0bandera <strong>\u2014-open.<\/strong> Ahora, cada vez que realices cambios, se actualizar\u00e1 la p\u00e1gina.<\/p>\n<p>Tambi\u00e9n puedes agregar una\u00a0<strong>bandera \u2013hot<\/strong> a tu <strong>script<\/strong> de inicio <strong>npm<\/strong> que le permitir\u00e1 recargar solo el componente que ha cambiado en lugar de realizar una recarga de p\u00e1gina completa.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Configurando-CSS\"><\/span>Configurando CSS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>La \u00faltima parte implica configurar nuestro CSS. Como importaremos archivos CSS en nuestros componentes React, necesitamos el m\u00f3dulo <strong>css-loader<\/strong> para resolverlos. Una vez que se haya resuelto, tambi\u00e9n necesitamos un cargador de estilo para inyectar esto en nuestro DOM, agregando una etiqueta <strong>&lt;style&gt;<\/strong> en el elemento <strong>&lt;head&gt;<\/strong> de nuestro HTML.<\/p>\n<p>Contin\u00faa e instala ambos m\u00f3dulos como una dependencia de desarrollo:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nnpm i css-loader style-loader -D&#13;\n&#13;\n<\/pre>\n<p>Ten en cuenta que el orden de agregar estos cargadores es importante. Primero, debemos resolver los archivos CSS antes de agregarlos al DOM con el cargador de estilos. De forma predeterminada, el paquete web utiliza los cargadores de la derecha (\u00faltimo elemento de la matriz) a la izquierda (primer elemento de la matriz) .<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Haciendo-CSS-modular\"><\/span>Haciendo CSS modular<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Tambi\u00e9n podemos hacer CSS modular utilizando <strong>webpack.<\/strong> Esto significa que el nombre de la clase tendr\u00e1 un alcance local y espec\u00edfico para solo el componente en cuesti\u00f3n.<\/p>\n<p>Para hacer esto, podemos proporcionar algunas opciones para <strong>css-loader:<\/strong><\/p>\n<p>Como tenemos que dar opciones, cada cargador ahora es un objeto con un par <strong>clave-valor.<\/strong> Para habilitar los m\u00f3dulos CSS, necesitamos configurar la opci\u00f3n del m\u00f3dulo para que <strong>css-loader<\/strong> sea verdadero. La opci\u00f3n <strong>importLoaders<\/strong> configura cu\u00e1ntos cargadores deben aplicarse antes de <strong>css-loader.<\/strong> Por ejemplo, <strong>sass-loader<\/strong> tendr\u00eda que venir antes que <strong>css-loader.<\/strong><\/p>\n<p>El <strong>localIdentName<\/strong>\u00a0te permite configurar la identificaci\u00f3n generada.<\/p>\n<ul>\n<li><strong>[nombre]<\/strong> tomar\u00e1 el nombre de tu componente<\/li>\n<li><strong>[local]<\/strong> es el nombre de tu clase \/ id<\/li>\n<li><strong>[hash: base64]<\/strong> es el hash generado aleatoriamente que ser\u00e1 \u00fanico en el CSS de cada componente<\/li>\n<\/ul>\n<p>Para hacer esto un poco m\u00e1s visual, te dar\u00e9 un ejemplo. Digamos que tienes un componente llamado <strong>Formy<\/strong> tengo un bot\u00f3n con una clase <strong>CSS primaryButton.<\/strong> Tambi\u00e9n tengo otro componente llamado <strong>Searchy<\/strong> un bot\u00f3n en ella con una clase <strong>CSS primaryButton<\/strong>. Sin embargo, ambas clases tienen diferentes CSS:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\n\/*Bot\u00f3n de formulario*\/&#13;\n.primaryButton {&#13;\nbackground-color: green;&#13;\n}&#13;\nBot\u00f3n de b\u00fasqueda&#13;\n.primaryButton {&#13;\nbackground-color: blue;&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>Cuando el paquete web agrupa su aplicaci\u00f3n, dependiendo de qu\u00e9 CSS sea m\u00e1s reciente, ambos botones podr\u00edan tener el color verde o azul en lugar de la forma que tiene verde y la b\u00fasqueda con azul.<\/p>\n<p>Aqu\u00ed es donde el <strong>localIdentName<\/strong> entra en su lugar. Con esto, una vez que su aplicaci\u00f3n est\u00e9 empaquetada, \u00a1tus botones tendr\u00e1n un nombre de clase \u00fanico!<\/p>\n<p>Como puedes ver, el nombre de la clase del bot\u00f3n en el componente Formulario es diferente al del componente <strong>Buscar:<\/strong> su nombre comienza con el nombre del componente, el nombre de la clase y el c\u00f3digo hash \u00fanico.<\/p>\n<p>Por lo tanto, con esto, no tendr\u00e1 que preocuparse por si ha dado el mismo nombre de clase en toda la aplicaci\u00f3n; solo tiene que preocuparse por si lo ha usado en el mismo componente.<\/p>\n<p>Esto concluye la primera parte de configurar una aplicaci\u00f3n React desde cero. En la pr\u00f3xima publicaci\u00f3n del blog, mi objetivo es explicar c\u00f3mo configurar las pruebas para TDD y c\u00f3mo escribirlas.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mi objetivo con este art\u00edculo era establecer una configuraci\u00f3n simple que luego se pueda desarrollar. Ha sido una lucha para entender Webpack.\u00a0 Lo que planeo hacer es hacer una funcionalidad&#8230;<\/p>","protected":false},"author":1,"featured_media":95590,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1374],"tags":[],"class_list":["post-95589","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Construyendo una aplicaci\u00f3n React desde cero - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Mi objetivo con este art\u00edculo era establecer una configuraci\u00f3n simple que luego se pueda desarrollar. Ha sido una lucha para entender Webpack.\u00a0 Lo que\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/javascript\/construyendo-una-aplicacion-react-desde-cero\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Construyendo una aplicaci\u00f3n React desde cero\" \/>\n<meta property=\"og:description\" content=\"Mi objetivo con este art\u00edculo era establecer una configuraci\u00f3n simple que luego se pueda desarrollar. Ha sido una lucha para entender Webpack.\u00a0 Lo que\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/javascript\/construyendo-una-aplicacion-react-desde-cero\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-31T12:30:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_y6C4nSvy2Woe0m7bWEn4BA-4507119.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/construyendo-una-aplicacion-react-desde-cero\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/construyendo-una-aplicacion-react-desde-cero\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Construyendo una aplicaci\u00f3n React desde cero\",\"datePublished\":\"2022-08-31T12:30:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/construyendo-una-aplicacion-react-desde-cero\\\/\"},\"wordCount\":1228,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/construyendo-una-aplicacion-react-desde-cero\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1_y6C4nSvy2Woe0m7bWEn4BA-4507119.png\",\"articleSection\":[\"Javascript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/construyendo-una-aplicacion-react-desde-cero\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/construyendo-una-aplicacion-react-desde-cero\\\/\",\"name\":\"Construyendo una aplicaci\u00f3n React desde cero - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/construyendo-una-aplicacion-react-desde-cero\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/construyendo-una-aplicacion-react-desde-cero\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1_y6C4nSvy2Woe0m7bWEn4BA-4507119.png\",\"datePublished\":\"2022-08-31T12:30:45+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Mi objetivo con este art\u00edculo era establecer una configuraci\u00f3n simple que luego se pueda desarrollar. Ha sido una lucha para entender Webpack.\u00a0 Lo que\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/construyendo-una-aplicacion-react-desde-cero\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/construyendo-una-aplicacion-react-desde-cero\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1_y6C4nSvy2Woe0m7bWEn4BA-4507119.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1_y6C4nSvy2Woe0m7bWEn4BA-4507119.png\",\"width\":1200,\"height\":630,\"caption\":\"1_y6c4nsvy2woe0m7bwen4ba-4507119-4778521-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a React application from scratch - R Marketing Digital","description":"My goal with this article was to establish a simple configuration that can later be developed. It has been a struggle to understand Webpack. Which","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/javascript\/construyendo-una-aplicacion-react-desde-cero\/","og_locale":"en_US","og_type":"article","og_title":"Construyendo una aplicaci\u00f3n React desde cero","og_description":"Mi objetivo con este art\u00edculo era establecer una configuraci\u00f3n simple que luego se pueda desarrollar. Ha sido una lucha para entender Webpack.\u00a0 Lo que","og_url":"https:\/\/rmarketingdigital.com\/en\/javascript\/construyendo-una-aplicacion-react-desde-cero\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-31T12:30:45+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_y6C4nSvy2Woe0m7bWEn4BA-4507119.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Construyendo una aplicaci\u00f3n React desde cero","datePublished":"2022-08-31T12:30:45+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/"},"wordCount":1228,"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_y6C4nSvy2Woe0m7bWEn4BA-4507119.png","articleSection":["Javascript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/","url":"https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/","name":"Building a React application from scratch - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_y6C4nSvy2Woe0m7bWEn4BA-4507119.png","datePublished":"2022-08-31T12:30:45+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"My goal with this article was to establish a simple configuration that can later be developed. It has been a struggle to understand Webpack. Which","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/javascript\/construyendo-una-aplicacion-react-desde-cero\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_y6C4nSvy2Woe0m7bWEn4BA-4507119.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_y6C4nSvy2Woe0m7bWEn4BA-4507119.png","width":1200,"height":630,"caption":"1_y6c4nsvy2woe0m7bwen4ba-4507119-4778521-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/95589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=95589"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/95589\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/95590"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=95589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=95589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=95589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}