diff options
Diffstat (limited to 'files/es/learn/herramientas_y_pruebas')
7 files changed, 0 insertions, 1138 deletions
diff --git a/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html b/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html deleted file mode 100644 index 73bd6299a1..0000000000 --- a/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Cross browser testing -slug: Learn/Herramientas_y_pruebas/Cross_browser_testing -translation_of: Learn/Tools_and_testing/Cross_browser_testing ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Este módulo se centra en probar proyectos web en diferentes navegadores. Nos fijamos en la identificación de su público objetivo (por ejemplo, qué usuarios, navegadores y dispositivos son los que más le preocupan?), cómo realizar las pruebas, los principales problemas a los que se enfrentará con los diferentes tipos de código y cómo mitigarlos, qué herramientas son las más útiles para ayudarle a probar y solucionar problemas, y cómo utilizar la automatización para acelerar las pruebas.</p> - -<h2 id="Prerequisitos">Prerequisitos</h2> - -<p>Debería aprender los conceptos básicos de los lenguajes <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a> y <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> básicos antes de intentar utilizar las herramientas que se detallan aquí.</p> - -<h2 id="Guías">Guías</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introducción a la prueba de navegadores cruzados</a></dt> - <dd>Este artículo comienza el módulo proporcionando una visión general del tema de la prueba de navegadores cruzados, respondiendo a preguntas como "¿qué es la prueba de navegadores cruzados? y "¿cuáles son los tipos de problemas más comunes que se encuentran?</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Estrategias para la realización de las pruebas</a></dt> - <dd> - <p>A continuación, profundizamos en la realización de pruebas, la identificación de un público objetivo (por ejemplo, qué navegadores, dispositivos y otros segmentos deben ser probados), estrategias de pruebas de baja fiabilidad (obtenga una gama de dispositivos y algunas máquinas virtuales y realice pruebas ad-hoc cuando sea necesario), estrategias de alta tecnología (automatización, uso de aplicaciones de pruebas dedicadas), y pruebas con grupos de usuarios.</p> - </dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Manejo de problemas comunes de HTML y CSS</a></dt> - <dd> - <p>Con el conjunto de escenas, ahora veremos específicamente los problemas comunes entre navegadores que encontrará en código HTML y CSS, y qué herramientas se pueden usar para evitar que ocurran problemas o para solucionarlos. Esto incluye el código de hilado, la entrega de prefijos CSS, el uso de herramientas de desarrollo de navegadores para localizar problemas, el uso de polifiltros para añadir soporte a los navegadores, la solución de problemas de diseño con capacidad de respuesta, y mucho más.</p> - </dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Manejo de problemas comunes de JavaScript</a></dt> - <dd> - <p>Ahora veremos los problemas comunes de JavaScript en todos los navegadores y cómo solucionarlos. Esto incluye información sobre el uso de herramientas de desarrollo del navegador para localizar y solucionar problemas, el uso de polifondos y bibliotecas para solucionar los problemas, el funcionamiento de las funciones modernas de JavaScript en navegadores antiguos, y mucho más.</p> - </dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Manejo de problemas comunes de accesibilidad</a></dt> - <dd>A continuación, nos centramos en la accesibilidad, proporcionando información sobre problemas comunes, cómo realizar pruebas sencillas y cómo utilizar las herramientas de auditoría/automatización para encontrar problemas de accesibilidad.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementación de la detección de características</a></dt> - <dd>La detección de funciones implica determinar si un navegador soporta un determinado bloque de código, y ejecutar un código diferente dependiendo de si lo hace (o no), de modo que el navegador siempre puede proporcionar una experiencia de trabajo en lugar de bloquearse/error en algunos navegadores. Este artículo detalla cómo escribir su propia detección de características simples, cómo usar una biblioteca para acelerar la implementación y características nativas para la detección de características como <code>@supports</code>.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introducción a las pruebas automatizadas</a></dt> - <dd>La realización manual de pruebas en varios navegadores y dispositivos, varias veces al día, puede resultar tediosa y consumir mucho tiempo. Para manejar esto eficientemente, debe familiarizarse con las herramientas de automatización. En este artículo, analizamos lo que está disponible, cómo utilizar los corredores de tareas y los conceptos básicos de cómo utilizar las aplicaciones de automatización de pruebas de navegadores comerciales, como Sauce Labs y Browser Stack.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Configuración de su propio entorno de automatización de pruebas</a></dt> - <dd>En este artículo, le enseñaremos cómo instalar su propio entorno de automatización y ejecutar sus propias pruebas utilizando Selenium/WebDriver y una biblioteca de pruebas como Selenium-webdriver for Node. También veremos cómo integrar su entorno de pruebas local con aplicaciones comerciales como las que se comentaron en el artículo anterior.</dd> -</dl> diff --git a/files/es/learn/herramientas_y_pruebas/github/index.html b/files/es/learn/herramientas_y_pruebas/github/index.html deleted file mode 100644 index 62646f1cc4..0000000000 --- a/files/es/learn/herramientas_y_pruebas/github/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Git y GitHub -slug: Learn/Herramientas_y_pruebas/GitHub -tags: - - Aprender - - GitHub - - Principiante - - Web - - git -translation_of: Learn/Tools_and_testing/GitHub ---- -<div>{{LearnSidebar}}</div> - -<p><font><font>Todos los desarrolladores utilizarán algún tipo de </font></font><strong><font><font>sistema de control de versiones</font></font></strong><font><font> ( </font></font><strong><font><font>VCS</font></font></strong><font><font> ), una herramienta que les permita colaborar con otros desarrolladores en un proyecto sin peligro de que sobrescriban el trabajo de los demás, y volver a las versiones anteriores de la base de código si existe un problema descubierto más tarde. </font><font>El VCS más popular (al menos entre los desarrolladores web) es </font></font><strong><font><font>Git</font></font></strong><font><font>, junto con </font></font><strong><font><font>GitHub</font></font></strong><font><font>, un sitio que proporciona alojamiento para tus repositorios y varias herramientas para trabajar con ellos. </font><font>Este módulo tiene como objetivo enseñarte lo que necesitas saber sobre ambos.</font></font></p> - -<h2 id="Introducción"><font><font>Introducción</font></font></h2> - -<p><font><font>Los VCS son esenciales para el desarrollo de software:</font></font></p> - -<ul> - <li><font><font>Es raro que trabajes en un proyecto completamente por tu cuenta, y tan pronto como comiences a trabajar con otras personas, comenzarás a correr el riesgo de entrar en conflicto con el trabajo del otro, es decir, cuando ambos intentan actualizar simultáneamente la misma pieza de código. </font><font>Debes tener algún tipo de mecanismo para administrar las ocurrencias y, como resultado, evitar la pérdida de trabajo.</font></font></li> - <li><font><font>Cuando trabajes en un proyecto por tu cuenta o con otros, querrás poder hacer una copia de seguridad del código en un lugar central, para que no se pierda si tu computadora se daña.</font></font></li> - <li><font><font>También querrás poder volver a versiones anteriores si más tarde descubres un problema. </font><font>Es posible que hayas empezado a hacer esto en tu propio trabajo mediante la creación de diferentes versiones de un mismo archivo, por ejemplo </font></font><code>myCode.js</code><font><font>, </font></font><code>myCode_v2.js</code><font><font>, </font></font><code>myCode_v3.js</code><font><font>, </font></font><code>myCode_final.js</code><font><font>, </font></font><code>myCode_really_really_final.js</code><font><font>, etc, pero esto es muy propenso a errores y poco fiable.</font></font></li> - <li><font><font>Los diferentes miembros del equipo generalmente querrán crear sus propias versiones separadas del código (llamadas </font></font><strong><font><font>ramas</font></font></strong><font><font> en Git), trabajar en una nueva característica en esa versión y luego fusionarla de manera controlada (en GitHub usamos </font></font><strong><font><font>solicitudes de extracción</font></font></strong><font><font>) con la versión maestra cuando hayan terminado con ella.</font></font></li> -</ul> - -<p><font><font>Los VCS proporcionan herramientas para satisfacer las necesidades anteriores. </font></font><a href="https://git-scm.com/" rel="noopener"><font><font>Git</font></font></a><font><font> es un ejemplo de VCS, y </font></font><a href="https://github.com/" rel="noopener"><font><font>GitHub</font></font></a><font><font> es un sitio web + infraestructura que proporciona un servidor Git más una serie de herramientas realmente útiles para trabajar con repositorios git individuales o en equipo, como informar problemas con el código, herramientas de revisión, características de administración de proyectos tal como asignación de tareas, estados de tareas, y más.</font></font></p> - -<div class="blockIndicator note"> -<p><strong><font><font>Nota</font></font></strong><font><font>: Git en realidad es un </font><font>sistema de control de versiones </font></font><em><font><font>distribuido</font></font></em><font><font>, lo cual significa que se realiza una copia completa del repositorio que contiene la base de código en tu computadora (y en la de todos los demás). </font><font>Realizas cambios en tu propia copia, y luego empujas esos cambios nuevamente al servidor, donde un administrador decidirá si fusiona tus cambios con la copia maestra.</font></font></p> -</div> - -<h3 id="¿Quieres_convertirte_en_un_desarrollador_web_front-end"><font><font>¿Quieres convertirte en un desarrollador web front-end?</font></font></h3> - -<p><font><font>Hemos preparado un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.</font></font></p> - -<div class="in-page-callout webdev"> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Comenzar</a></p> -</div> - -<h2 id="Prerequisitos"><font><font>Prerequisitos</font></font></h2> - -<p><font><font>Para usar Git y GitHub, necesitas:</font></font></p> - -<ul> - <li><font><font>Una computadora de escritorio con Git instalado (consulta la </font></font><a href="https://git-scm.com/downloads" rel="noopener"><font><font>página de descargas de Git</font></font></a><font><font>).</font></font></li> - <li><font><font>Una herramienta para usar Git. </font><font>Dependiendo de cómo te guste trabajar, puedes usar un </font></font><a href="https://git-scm.com/downloads/guis/" rel="noopener"><font><font>cliente Git con GUI</font></font></a><font><font> (te recomendamos GitHub Desktop, SourceTree o Git Kraken) o simplemente usar una ventana de la terminal. </font><font>De hecho, probablemente sea útil que conozcas al menos los conceptos básicos de los comandos de la terminal git, incluso si tienes la intención de usar una GUI.</font></font></li> - <li><font><font>Una </font></font><a href="https://github.com/join" rel="noopener"><font><font>cuenta de GitHub</font></font></a><font><font>. </font><font>Si aún no tienes una, regístrate ahora usando el enlace provisto.</font></font></li> -</ul> - -<p><font><font>En términos de conocimiento previo, no necesitas saber nada sobre desarrollo web, Git/GitHub o VCS para iniciar este módulo. </font><font>Sin embargo, se recomienda que conozcas algo de codificación para que tengas conocimientos informáticos razonables y algún código para almacenar en tus repositorios.</font></font></p> - -<p><font><font>También es preferible que tengas algunos conocimientos básicos de la terminal, por ejemplo, moverte entre directorios, crear archivos y modificar la variable del sistema </font></font><code>PATH</code><font><font>.</font></font></p> - -<div class="blockIndicator note"> -<p><strong><font><font>Nota</font></font></strong><font><font>: Github no es el único sitio/conjunto de herramientas que puedes usar con Git. </font><font>Hay otras alternativas, como </font></font><a href="https://about.gitlab.com/" rel="noopener"><font><font>GitLab,</font></font></a><font><font> que podrías probar, y también podrías intentar configurar tu propio servidor Git y usarlo en lugar de GitHub. </font><font>Solo nos hemos quedado con GitHub en este curso para proporcionar una forma única que funciona.</font></font></p> -</div> - -<h2 id="Guías"><font><font>Guías</font></font></h2> - -<p><font><font>Ten en cuenta que los enlaces a continuación te llevan a recursos en sitios externos. </font><font>Eventualmente intentaremos tener nuestro propio curso Git/GitHub dedicado, pero por ahora, esto te ayudará a familiarizarte con el tema en cuestión.</font></font></p> - -<dl> - <dt><a href="https://guides.github.com/activities/hello-world/" rel="noopener"><font><font>Hola mundo (de GitHub)</font></font></a></dt> - <dd><font><font>Este es un buen lugar para comenzar: esta guía práctica te permite comenzar a usar GitHub, aprender los conceptos básicos de Git, como crear repositorios y ramas, realizar confirmaciones, abrir y fusionar solicitudes de extracción.</font></font></dd> - <dt><a href="https://guides.github.com/introduction/git-handbook/" rel="noopener"><font><font>Manual de Git (en GitHub)</font></font></a></dt> - <dd><font><font>Este Manual de Git profundiza un poco más, explicando qué es un VCS, qué es un repositorio, cómo funciona el modelo básico de GitHub, comandos y ejemplos de Git, y más.</font></font></dd> - <dt><a href="https://guides.github.com/activities/forking/" rel="noopener"><font><font>Bifurcación de proyectos (de GitHub)</font></font></a></dt> - <dd><font><font>Bifurcar proyectos es esencial cuando deseas contribuir al código de otra persona. </font><font>Esta guía explica cómo.</font></font></dd> - <dt><a href="https://help.github.com/en/articles/about-pull-requests" rel="noopener"><font><font>Acerca de las solicitudes de extracción (de GitHub)</font></font></a></dt> - <dd><font><font>Una útil guía para administrar las solicitudes de extracción, la forma en que los cambios de código sugeridos se entregan a los repositorios de las personas para su consideración.</font></font></dd> - <dt><a href="https://guides.github.com/features/issues/" rel="noopener"><font><font>Dominando las incidencias (de GitHub)</font></font></a></dt> - <dd><font><font>Las incidencias son como un foro para tu proyecto GitHub, donde las personas pueden hacer preguntas e informar problemas, y tú puede administrar las actualizaciones (por ejemplo, asignar personas para solucionar problemas, aclarar el problema, informar a las personas que las cosas están solucionadas). </font><font>Este artículo te brinda lo que necesitas saber sobre las incidencias.</font></font></dd> -</dl> - -<div class="blockIndicator note"> -<p><strong><font><font>Nota</font></font></strong><font><font>: Hay </font></font><strong><font><font>mucho más</font></font></strong><font><font> que puedes hacer con Git y GitHub, pero creemos que lo anterior representa lo mínimo que necesitas saber para comenzar a usar Git de manera efectiva. </font><font>A medida que profundices en Git, comenzarás a darte cuenta de que es fácil equivocarse cuando comienzas a usar comandos más complicados. </font><font>No te preocupes, incluso los desarrolladores web profesionales encuentran a Git confuso a veces, y a menudo resuelven problemas buscando soluciones en la web, o consultando sitios como </font></font><a href="https://github.com/k88hudson/git-flight-rules/blob/master/README_es.md" rel="noopener"><font><font>Reglas de vuelo para Git</font></font></a><font><font> y </font></font><a href="https://dangitgit.com/es" rel="noopener"><font><font>Dangit, ¡git!</font></font></a></p> -</div> - -<h2 id="Ve_también"><font><font>Ve también</font></font></h2> - -<ul> - <li><a href="https://guides.github.com/introduction/flow/" rel="noopener"><font><font>Comprender el flujo de GitHub</font></font></a></li> - <li><a href="https://git-scm.com/docs" rel="noopener"><font><font>Lista de comandos de Git</font></font></a></li> - <li><a href="https://guides.github.com/features/mastering-markdown/" rel="noopener"><font><font>Reducción de dominio</font></font></a><font><font> (el formato de texto en el que escribe en relaciones públicas, comentarios de insidencias y archivos </font></font><code>.md</code><font><font>).</font></font></li> - <li><a href="https://guides.github.com/features/pages/" rel="noopener"><font><font>Introducción a las páginas de GitHub</font></font></a><font><font> (cómo publicar demostraciones y sitios web en GitHub).</font></font></li> - <li><a href="https://learngitbranching.js.org/" rel="noopener"><font><font>Aprende la ramificación de Git</font></font></a></li> - <li><a href="https://github.com/k88hudson/git-flight-rules" rel="noopener"><font><font>Reglas de vuelo para Git</font></font></a><font><font> (un compendio muy útil de formas de lograr cosas específicas en Git, incluida la forma de corregir las cosas cuando te equivocaste).</font></font></li> - <li> - <p><a href="https://dangitgit.com/" rel="noopener"><font><font>Dangit, git! </font></font></a><font><font>(otro compendio útil, específicamente de formas de corregir las cosas cuando te equivocaste).</font></font></p> - </li> -</ul> diff --git a/files/es/learn/herramientas_y_pruebas/index.html b/files/es/learn/herramientas_y_pruebas/index.html deleted file mode 100644 index a147c98f65..0000000000 --- a/files/es/learn/herramientas_y_pruebas/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Herramientas y pruebas -slug: Learn/Herramientas_y_pruebas -tags: - - Accesibilidad - - Aprender - - Aterrizaje - - CSS - - CodificaciónDeSecuenciasDeComandos - - HTML - - Herramientas - - JavaScript - - Navegador cruzado - - Principiante - - Pruebas de usuario - - Tema - - Testing - - automatización -translation_of: Learn/Tools_and_testing ---- -<div> -<p>{{LearnSidebar}}</p> - -<p>Una vez que haya comenzado a sentirse cómodo programando con tecnologías web básicas (como HTML, CSS y JavaScript), y comience a adquirir más experiencia, leer más recursos y aprender más trucos y consejos, comenzará a encontrar todos tipo de herramientas, desde CSS y JavaScript ya enrollados, aplicaciones de prueba y automatización, y muchas más. A medida que sus proyectos web se vuelvan más grandes y complejos, querrá comenzar a aprovechar algunas de estas herramientas y elaborar planes de prueba confiables para su código. Esta parte del área de aprendizaje tiene como objetivo brindarle lo que necesita para comenzar y tomar decisiones informadas.</p> -</div> - -<p class="summary"> </p> - -<p>{{LearnSidebar}}</p> - -<p>La industria de la web es un lugar emocionante para trabajar, pero no está exenta de complicaciones. Las tecnologías principales que utilizamos para crear sitios web son bastante estables ahora, pero se están agregando nuevas características todo el tiempo, y nuevas herramientas, que facilitan el trabajo con estas tecnologías y están construidas sobre estas tecnologías, aparecen constantemente. Además de eso, todavía tenemos que mantener la compatibilidad entre navegadores en la parte superior de nuestras mentes y asegurarnos de que nuestro código sigue las mejores prácticas que permiten que nuestros proyectos funcionen en diferentes navegadores y dispositivos que nuestros usuarios utilizan para navegar por la Web, y ser utilizable por personas con discapacidad.</p> - -<p>Determinar qué herramientas debería usar puede ser un proceso difícil, por lo que hemos escrito este conjunto de artículos para informarle qué tipos de herramientas están disponibles, qué pueden hacer por usted y cómo hacer uso de los favoritos actuales de la industria.</p> - -<p> </p> - -<div class="note"> -<p>Nota: Debido a que aparecen nuevas herramientas y las antiguas pasan de moda todo el tiempo, hemos redactado deliberadamente este material para que sea lo más neutral posible. Queremos enfocarnos ante todo en los tipos generales de tareas que estas herramientas lo ayudarán a lograr. y seguir prescribiendo herramientas específicas al mínimo. Obviamente, necesitamos mostrar el uso de las herramientas para demostrar técnicas específicas, pero ten en cuenta que no necesariamente recomendamos estas herramientas como la mejor o la única forma de hacer las cosas; en la mayoría de los casos, existen otras formas, pero queremos brindarte una idea clara. Metodología que funciona.</p> -</div> - -<h2 id="Camino_de_aprendizaje">Camino de aprendizaje</h2> - -<p> </p> - -<p>Debería aprender los conceptos básicos de los lenguajes <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, y <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> antes de intentar usar las herramientas que se detallan aquí. Por ejemplo, deberá conocer los fundamentos de estos idiomas antes de comenzar a depurar problemas en códigos web complejos, o hacer un uso efectivo de las bibliotecas de JavaScript, o escribir pruebas y ejecutarlas en su código utilizando corredores de prueba, etc.</p> - -<p>Primero necesitas una base sólida.</p> - -<p> </p> - -<h2 id="Módulos">Módulos</h2> - -<dl> - <dt><span class="tlid-translation translation"><span title="">Herramientas de desarrollo web en el mundo real (TBD)</span></span></dt> - <dd>En este módulo, exploramos los diferentes tipos de herramientas de desarrollo web disponibles. Esto incluye la revisión de los tipos de tareas más comunes a las que se le puede pedir que resuelva, cómo pueden encajar en un flujo de trabajo y las mejores herramientas disponibles actualmente para llevar a cabo esas tareas.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Pruebas de navegadores cruzados</a></dt> - <dd>Este módulo analiza específicamente el área de prueba de proyectos web en diferentes navegadores. Aquí vemos cómo identificar a su público objetivo (por ejemplo, qué usuarios, navegadores y dispositivos necesita preocuparse más), cómo realizar las pruebas, los principales problemas que enfrentará con los diferentes tipos de código y cómo solucionar o mitigue esos problemas, qué herramientas son más útiles para ayudarlo a probar y solucionar problemas, y cómo utilizar la automatización para acelerar las pruebas.</dd> -</dl> diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html deleted file mode 100644 index e9bdd36eca..0000000000 --- a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Entendiendo los frameworks de JavaScript del lado del cliente -slug: Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks -tags: - - Aprender - - Principiante -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Los frameworks de JavaScript son una parte esencial del desarrollo web front-end moderno, los cuales proveen a los desarrolladores herramientas probadas y testeadas para la creación de aplicaciones web interactivas y escalables. Muchas empresas modernas utilizan frameworks como parte estándar de sus herramientas, por lo que muchos trabajos de desarrollo front-end en la actualidad requieren experiencia en frameworks.</p> - -<p class="summary">Como aspirante a desarrollador front-end, puede resultar difícil saber por dónde empezar cuando se trata de aprender sobre frameworks; hay muchos frameworks diferentes para elegir, nuevas opciones surgen todo el tiempo. En su mayoría funcionan de forma similar, pero hacen algunas cosas de manera diferente, y hay algunas cosas específicas con las que se debe tener cuidado a la hora de usar frameworks.</p> - -<p class="summary">En esta serie de artículos, tenemos como objetivo brindarte un punto de partida cómodo que te sirva de ayuda para comenzar a aprender sobre frameworks. Nuestra intención no es enseñarte, de manera exhaustiva, todo lo que se necesita saber sobre React/ReactDOM, o Vue, o algún otro framework en específico; la documetación de los equipos de los frameworks (entre otros recursos) ya cumplen esta función. En su lugar, queremos brindarte respaldo y responder primero a preguntas más fundamentales como:</p> - -<ul> - <li class="summary">¿Por qué debería hacer uso de un framework? ¿Qué problemas me resuelven estos?</li> - <li class="summary">¿Qué preguntar a la hora de escoger un framework? ¿En verdad necesito usar un framework?</li> - <li class="summary">¿Qué características tienen los frameworks? ¿Cómo funcionan en general y cómo se diferencian las maneras en que los frameworks implementan estas características?</li> - <li class="summary">¿Cómo se relacionan con JavaScript "puro" o HTML?</li> -</ul> - -<p class="summary">Después de esto, proveeremos algunos tutoriales que cubren los aspectos básicos de algunos de los diferentes frameworks que existen, de manera que puedas tener el contexto y la familiaridad suficientes para poder empezar a profundizar por tu propia cuenta. Queremos que avances y aprendas sobre los frameworks de manera pragmática, de forma tal que se tengan presente las buenas prácticas esenciales de la plataforma web, como lo es la accesibilidad.</p> - -<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Empieza ahora con "Introducción a los frameworks del lado del cliente"</a></strong></p> - -<h2 id="Prerrequisitos">Prerrequisitos</h2> - -<p>Antes de intentar aprender sobre los frameworks del lado del cliente, es recomendable que conozcamos los conceptos básicos de los principales lenguajes de la web: <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, y —especialmente— <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p> - -<p>Como resultado, tu código será más consistente y profesional, por lo que podrás solucionar problemas con mayor confianza si comprende las características fundamentales de la plataforma web sobre las que se basan los frameworks.</p> - -<h2 id="Guías_introductorias">Guías introductorias</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introducción a los frameworks del lado del cliente</a></dt> - <dd>Comenzamos nuestro estudio sobre los frameworks con una descripción general del área, repasando un poco de historia sobre JavaScript y los frameworks, por qué estos existen, y qué nos brindan; por donde empezar al momento de escoger un framework por aprender y qué alternativas existen a los frameworks del lado del cliente.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Características principales de los frameworks</a></dt> - <dd>Cada framework destacado de JavaScript tiene un enfoque diferente para actualizar el DOM, manejar los eventos del navegador, y brindarte una experiencia de desarrollo satisfactoria. En este artículo, exploraremos las características principales de "los cuatro grandes" frameworks, observando cómo estos tienden a operar desde un nivel alto, al igual que las diferencias entre ellos.</dd> -</dl> - -<h2 id="Tutoriales_de_React">Tutoriales de React</h2> - -<div class="blockIndicator note"> -<p><strong>Nota</strong>: Los tutoriales de React se probaron por última vez en mayo de 2020, con React/ReactDOM 16.13.1 y create-react-app 3.4.1.</p> - -<p>Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación React en nuestro <a href="https://github.com/mdn/todo-react">repositorio todo-react</a>. Para una versión en vivo, consulta <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p> -</div> - -<dl> - <dt><a href="/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started">1. Primeros pasos en React</a></dt> - <dd>En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Comenzando con nuestra lista de tareas de React</a></dt> - <dd>Digamos que se nos ha encomendado la tarea de crear una prueba de concepto (Proof of Concept — PoC) en React: una aplicación que permita a los usuarios agregar, editar y eliminar tareas en las que se quiera trabajar, pero que también permita marcar las tareas como completadas sin eliminarlas. Este artículo te guiará en la organización de la estructura y los estilos básicos del componente <code>App</code>, de manera que esté listo para la definición e interactividad de componentes individuales, los cuales agregaremos más adelante.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Basando nuestra aplicación React en componentes</a></dt> - <dd>Hasta este momento, nuestra aplicación no hace gran cosa. Antes de que podamos hacerla funcionar, tenemos que dividirla en componentes descriptivos y manejables. React no tiene reglas estrictas para lo que, se considera o no, un componente, ¡eso depende de ti! En este artículo, te mostraremos una forma raznoable de dividir nuestra aplicación en componentes.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. Interactividad en React: eventos y estado</a></dt> - <dd>Habiendo elaborado nuestro plan de componentes, es hora de comenzar a actualizar nuestra aplicación, para que pase de ser una interfaz de usuario completamente estática a una que nos permita, realmente, interactuar y cambiar las cosas. Es eso mismo lo que haremos en este artículo, profundizando en los eventos y el estado a medida que avancemos.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. Interactividad en React: edición, filtrado, renderizado condicional</a></dt> - <dd>A medida que nos acercamos al final de nuestro viaje en React (al menos por ahora), agregaremos los toques finales a las áreas principales de funcionalidad en nuestra aplicación de lista de tareas. Esto incluye permitir la edición de tareas existentes y el filtrado de la lista de tareas entre todas las tareas, las completadas, y las incompletas. A lo largo del capítulo, veremos la renderización condicional de la interfaz de usuario.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accesibilidad en React</a></dt> - <dd>En el artículo final de nuestro tutorial, nos enfocaremos en la accesibilidad (broma intencional), incluyendo la gestión del enfoque en React, la cual puede mejorar la usabilidad y reducir la confusión para usuarios que navegan tanto, a través de lectores de pantalla, como solo del teclado.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. Recursos sobre React</a></dt> - <dd>En nuestro artículo final, te brindamos una lista de recursos sobre React, los cuales podrás utilizar para avanzar más en tu aprendizaje.</dd> -</dl> - -<h2 id="Tutoriales_de_Ember">Tutoriales de Ember</h2> - -<div class="blockIndicator note"> -<p><strong>Nota</strong>: Los tutoriales de Ember se probaron por última vez en mayo de 2020, con Ember/Ember CLI versión 3.18.0.</p> - -<p>Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Ember en nuestro <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">repositorio ember-todomvc-tutorial</a>. Para una versión en vivo, consulta <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (esto también incluye algunas características adicionales que no se cubren en este tutorial).</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Primeros pasos en Ember</a></dt> - <dd>En nuestro primer artículo de Ember veremos cómo funciona Ember y para qué resulta útil, instalaremos la cadena de herramientas de Ember de manera local, crearemos una aplicación de muestra, y luego realizaremos una configuración inicial para prepararla para el desarrollo.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Estructura de una aplicación Ember y cómo se basa en componentes</a></dt> - <dd>En este artículo, continuaremos planificando la estructura de nuestra aplicación Ember TodoMVC, agregando el HTML necesario y luego dividiendo esa estructura HTML en componentes.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Interactividad de Ember: eventos, clases, y estado</a></dt> - <dd>En este punto, comenzaremos a agregar un poco de interactividad a nuestra aplicación, dándole la capacidad de agregar y mostrar nuevos elementos de tareas por hacer. A medida que avanzamos, veremos el uso de eventos en Ember, la creación de clases de componentes para contener código JavaScript que controle las funciones interactivas, y la configuración de un servicio para hacer seguimiento del estado de los datos de nuestra aplicación.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Interactividad de Ember: funcionalidad del footer, renderizado condicional</a></dt> - <dd>Ahora es momento de comenzar a abordar la funcionalidad del footer en nuestra aplicación. Aquí haremos que el contador de tareas pendientes se actualice de manera que muestre el número correcto de tareas pendientes por completar, y aplicaremos correctamente los estilos a las tareas completadas (es decir, aquellos donde la casilla de verificación ha sido marcada). También conectaremos nuestro botón "Borrar completados". A lo largo del capítulo, aprenderemos sobre el uso de la renderización condicional en nuestras plantillas.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Enrutamiento en Ember</a></dt> - <dd>En este artículo aprendemos sobre enrutamiento o el filtrado basado en URL, como a veces se lo denomina. Lo usaremos para proporcionar una URL única para cada una de las tres vistas de tareas: "Todas", "Activas" y "Completadas".</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Recursos sobre y solución de problemas</a></dt> - <dd>En nuestro artículo final sobre Ember, te proporcionamos una lista de recursos que puedes utilizar para avanzar más en tu aprendizaje, además de información útil para la solución problemas y otra información.</dd> -</dl> - -<h2 id="Tutoriales_de_Vue">Tutoriales de Vue</h2> - -<div class="blockIndicator note"> -<p><strong>Nota</strong>: Los tutoriales de Vue se probaron por última vez en mayo de 2020, con Vue 2.6.11.</p> - -<p>Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Vue en nuestro <a href="https://github.com/mdn/todo-vue">repositorio todo-vue</a>. Para una verisón en vivo, consulta <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Primeros pasos en Vue</a></dt> - <dd>A continuación, presentamos Vue, el tercero de nuestros frameworks. En este artículo, veremos un poco sobre el origen de Vue, aprenderemos cómo instalarlo y crear un nuevo proyecto, estudiaremos la estructura de alto nivel de todo el proyecto y de un componente individual, veremos cómo ejecutar el proyecto localmente y prepararlo para comenzar a construir nuestro ejemplo.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creando nuestro primer componente de Vue</a></dt> - <dd>Ahora es momento de profundizar en Vue y crear nuestro propio componente personalizado: comenzaremos creando un componente para representar cada elemento en la lista de tareas. Durante el artículo, aprenderemos sobre algunos conceptos importantes, como llamar a componentes dentro de otros componentes, pasarles datos a través de props y guardar el estado de los datos.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Renderizando una lista de componentes de Vue</a></dt> - <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">En este punto, tenemos un componente completamente funcional; ahora estamos listos para agregar varios componentes <code>ToDoItem</code> a nuestra aplicación. En este artículo, veremos cómo agregar un conjunto de datos de elementos de tareas a nuestro componente <code>App.vue</code>, el cual luego repasaremos en bucle, mostrando dentro de los componentes de <code>ToDoItem</code> mediante el uso de la directiva <code>v-for</code>. </span></dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Agregar una nueva forma de tareas pendientes: eventos, métodos y modelos de Vue</a></dt> - <dd>Ahora tenemos datos de muestra listos y un ciclo que toma cada bit de datos y lo renderiza dentro de un <code>ToDoItem</code> en nuestra aplicación. Lo que realmente necesitamos a continuación es la capacidad de permitirle a nuestros usuarios que introuduzcan sus propios elementos de tareas pendientes en la aplicación, y para ello, necesitaremos un <code><input></code> de texto, un evento para efectuar una vez se envíen los datos, un método por accionar al momento del envío para agregar los datos y volver a renderizar la lista, y un modelo para controlar los datos. Esto es lo que cubriremos en este artículo.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Agregando estilos a los componentes de Vue con CSS</a></dt> - <dd>Por fin ha llegado el momento de hacer que nuestra aplicación luzca un poco mejor. En este artículo, exploraremos las diferentes formas de agregar estilos a los componentes de Vue con CSS.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Usando propiedades calculadas de Vue</a></dt> - <dd>En este artículo, agregaremos un contador que muestre el número de tareas completadas, utilizando una función de Vue llamada propiedades calculadas. Estos funcionan de manera similar a los métodos, pero solo se vuelven a ejecutar cuando cambia una de sus dependencias.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Renderización condicional en Vue: editando tareas existentes</a></dt> - <dd>Ahora es momento de agregar una de las principales piezas de la funcionalidad que aún nos falta: la capacidad de editar tareas existentes. Para hacer esto, aprovecharemos las capacidades de renderizado condicional de Vue, es decir, <code>v-if</code> y <code>v-else</code>, los cuales nos permiten alternar entre la vista de una tarea existente y una vista de edición donde podremos actualizar las etiquetas de las tareas. También veremos cómo agregar funcionalidad para eliminar tareas.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Gestión de enfoque con Vue refs</a></dt> - <dd>Ya estamos cerca de terminar con Vue. La última funcionalidad a considerar es la gestión del enfoque, o dicho de otra manera, cómo podemos mejorar la accesibilidad de nuestra aplicación desde el teclado. Veremos el uso de Vue refs para manejar esto, una característica avanzada que nos permite tener acceso directo a los nodos DOM subyacentes debajo del DOM virtual, o acceso directo desde un componente a la estructura DOM interna de un componente interno.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Recursos sobre Vue</a></dt> - <dd>Ahora, completaremos nuestro estudio de Vue brindándote una lista de recursos que podrás utilizar para avanzar en tu aprendizaje, además de algunos otros consejos útiles.</dd> -</dl> - -<h2 id="¿Cuales_frameworks_hemos_escogido">¿Cuales frameworks hemos escogido?</h2> - -<p>Hacemos pública nuestra serie inicial de artículos con guías enfocadas en tres de los principales frameworks que existen: React/ReactDOM, Ember, y Vue. Esto se debe a varias un razones:</p> - -<ul> - <li>Son opciones populares que estarán disponibles por un largo tiempo. Al igual que con cualquier otra herramienta de software, es bueno apegarse a opciones que son desarrolladas de manera activa, lo que indica que, probablemente, no serán descontinuadas dentro de poco, lo que las convierte en complementos atractivos para mostrar como habilidades a la hora de buscar un trabajo.</li> - <li>Tienen comunidades sólidas y una buena documentación. Es muy importante poder obtener ayuda al aprender un tema complejo, especialmente cuando recién se está comenzando.</li> - <li>No contamos con los recursos para cubrir todos los frameworks modernos. Una lista así resultaría muy difícil de mantener actualizada, ya que todo el tiempo están surgiendo nuevos frameworks.</li> - <li>Como principiante, tratar de escoger en qué concentrarte entre la gran cantidad de opciones disponibles es un gran problema. Por lo tanto, resulta útil mantener una lista corta.</li> -</ul> - -<p>Queremos decir esto desde un principio: <strong>no</strong> hemos escogido los frameworks en los que nos estamos enfocando porque pensamos que son los mejores o porque los respaldamos de alguna manera. Simplemente, consideramos que obtienen una puntuación alta de acuerdo a los criterios anteriores.</p> - -<p>Ten en cuenta que esperábamos poder incluir más frameworks en la publicación inicial, pero que decidimos publicar el contenido y agregar, más adelante, otras guías, en lugar de retrasarlo más. Si tu framework favorito no se encuentra listado en este contenido y te gustaría ayudar a cambiar esto, ¡no dudes en discutirlo con nosotros! Puedes contactarnos a través de <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, o <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, o enviarnos un correo electrónico a la <a href="mailto:mdn-admins@mozilla.org">lista mdn-admins</a>.</p> diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html deleted file mode 100644 index 09c28f11a9..0000000000 --- a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: Primeros pasos en React -slug: >- - Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started -tags: - - Aprender - - Aprendiz - - Principiante -translation_of: >- - Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> - -<p class="summary">En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerrequisitos:</th> - <td> - <p>Familiaridad con los lenguajes <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, y <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, conocimiento del <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/línea de comandos</a>.</p> - - <p>React usa una sintaxis HTML-en-JavaScript llamada JSX (JavaScript y XML). Estar familiarizado con HTML y JavaScript te ayudará a aprender JSX, y a identificar —en una mejor manera— si los errores en tu aplicación están relacionados con JavaScript o con el más específico dominio de React.</p> - </td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Configurar un entorno de desarrollo local para React, crear una aplicación inicial, y entender los aspectos básicos de su funcionamiento.</td> - </tr> - </tbody> -</table> - -<h2 id="Hola_React">Hola, React</h2> - -<p>Como su eslogan oficial señala, <a href="https://es.reactjs.org/">React</a> es una biblioteca para construir interfaces de usuario. React no es un <em>framework</em> — ni siquiera se limita a la web. React es utilizado con otras bibliotecas para renderizar en ciertos entornos. Por ejemplo, <a href="https://reactnative.dev/">React Native</a> puede usarse para desarrollar aplicaciones móviles; <a href="https://facebook.github.io/react-360/">React 360</a> permite crear aplicaciones de realidad virtual; además de otras posibilidades.</p> - -<p>Al desarrollar para la web, los desarrolladores usan React en conjunto con <a href="https://reactjs.org/docs/react-dom.html">ReactDOM</a>. React y ReactDOM son, a menudo, considerados al igual que —y utilizados para resolver los mismo problemas que— otros verdaderos frameworks de desarrollo web. Cuando nos referimos a React como un "framework", estamos trabajando con este significado coloquial.</p> - -<p>El objetivo principal de React es minimizar los errores que ocurren cuando los desarrolladores construyen interfaces de usuario. Esto lo hace mediante el uso de componentes — piezas de código lógicas y auto-contenidas que describen una parte de la interfaz del usuario. Estos componentes se pueden juntar para crear una interfaz de usuario completa, y React abstrae la mayor parte del trabajo de renderizado, permitiéndote enfocarte en el diseño de la interfaz.</p> - -<h2 id="Casos_de_uso">Casos de uso</h2> - -<p>A diferencia de los otros frameworks vistos en este módulo, React no impone reglas estrictas sobre convenciones de código u organización de archivos. Esto le permite a los equipos establecer las convenciones que funcionen mejor para ellos y adoptar React de la manera en que deseen. React puede manejar un solo botón, algunas piezas de una interfaz o la interfaz de usuario completa de una aplicación.</p> - -<p>Si bien React <em>puede</em> usarse para <a href="https://es.reactjs.org/docs/add-react-to-a-website.html">pequeñas piezas de una interfaz</a>, no resulta tan sencillo "introducirlo" en una aplicación como sería el caso de una biblioteca como jQuery —o incluso de un framework, como Vue—, por lo que viene a ser más abordable cuando construimos una aplicación completamente con React.</p> - -<p>Además, muchos de los beneficios de la experiencia del desarrollador de una aplicación React, como codificar interfaces con JSX, requieren un proceso de compilación. Agregar un compilador como Babel a un sitio web hace que el código se ejecute de manera lenta, por lo que los desarrolladores a menudo configuran dichas herramientas con un paso de compilación. Podrá decirse que React tiene un gran requisito de herramientas, pero se puede aprender.</p> - -<p>Este artículo se enfocará en el caso de uso de usar React para renderizar la interfaz de usuario completa de una aplicación, usando herramientas proporcionadas por la propia herramienta de Facebook <a href="https://create-react-app.dev/">create-react-app</a>.</p> - -<h2 id="¿Cómo_React_usa_JavaScript">¿Cómo React usa JavaScript?</h2> - -<p>React utiliza características modernas de JavaScript para muchos de sus patrones. El punto donde más se aleja de JavaScript se refleja en el uso de la sintaxis <a href="https://es.reactjs.org/docs/introducing-jsx.html">JSX</a>, la que, a su vez, amplía la sintaxis de JavaScript para que código similar a HTML pueda formar parte del mismo. Por ejemplo:</p> - -<pre class="brush: js notranslate">const heading = <h1>Mozilla Developer Network</h1>;</pre> - -<p>Esta constante "heading" se conoce como una <strong>expresión JSX</strong>. React puede usarla para representar la etiqueta <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> en nuestra aplicación.</p> - -<p>Supongamos que, por razones semánticas, queremos envolver nuestro encabezado en una etiqueta <code><a href="/en-US/docs/Web/HTML/Element/header"><header></a></code>. El enfoque JSX nos permite anidar nuestros elementos entre sí, tal como lo hacemos con HTML:</p> - -<pre class="brush: js notranslate">const header = ( - <header> - <h1>Mozilla Developer Network</h1> - </header> -);</pre> - -<div class="blockIndicator note"> -<p><strong>Nota</strong>: Los paréntesis en el fragmento anterior no son exclusivos de JSX y no tienen ningún efecto en la aplicación. Son una señal para ti (y tu computadora) de que las múltiples líneas de código que contiene forman parte de una misma expresión. También podríamos escribir la expresión del encabezado de esta manera:</p> - -<pre class="brush: js notranslate">const header = <header> - <h1>Mozilla Developer Network</h1> -</header></pre> - -<p>Sin embargo, esto luce un poco raro, ya que la etiqueta <code><a href="/en-US/docs/Web/HTML/Element/header"><header></a></code> que inicia la expresión no tiene sangría en la misma posición que su correspondiente etiqueta de cierre.</p> -</div> - -<p>Por supuesto, tu navegador no puede leer JSX sin ayuda. Al compilarla (usando una herramienta como <a href="https://babeljs.io/">Babel</a> o <a href="https://parceljs.org/">Parcel</a>), nuestra expresión de encabezado se vería así:</p> - -<pre class="brush: js notranslate">const header = React.createElement("header", null, - React.createElement("h1", null, "Mozilla Developer Network") -);</pre> - -<p>Es <em>posible</em> omitir el paso de la compilación y usar <code><a href="https://reactjs.org/docs/react-api.html#createelement">React.createElement()</a></code> para codificar la interfaz de usuario tú mismo. Sin embargo, al hacer esto, perderías el beneficio declarativo de JSX y tu código resultaría más difícil de leer. La compilación es un paso adicional en el proceso de desarrollo, pero muchos desarrolladores de la comunidad React piensan que la legibilidad de JSX vale la pena. Además, las herramientas populares hacen que la compilación de JSX a JavaScript sea parte de su proceso de configuración. No tendrás que configurar la compilación tú mismo, a menos que así lo quieras.</p> - -<p>Dado que JSX es una combinación de HTML y JavaScript, algunos desarrolladores lo encuentran intuitivo. Otros dicen que su naturaleza combinada lo hace confuso. Sin embargo, una vez que te sientas cómodo con JSX, te permitirá crear interfaces de usuario de forma más rápida e intuitiva, y permitirá que otros comprendan mejor tu base de código de un vistazo.</p> - -<p>Para leer más sobre JSX, consulta el artículo <a href="https://es.reactjs.org/docs/jsx-in-depth.html">JSX en profundidad</a> del equipo de React.</p> - -<h2 id="Configurando_tu_primera_aplicación_React">Configurando tu primera aplicación React</h2> - -<p>Hay muchas maneras de usar React, pero usaremos la herramienta create-react-app de la interfaz de línea de comandos (CLI, por sus siglas en inglés), como se mencionó anteriormente, la cual acelera el proceso de desarrollo de una aplicación React al instalar algunos paquetes y crear algunos archivos por ti, manejando las herramientas descritas anteriormente.</p> - -<p>Es posible <a href="https://es.reactjs.org/docs/add-react-to-a-website.html">agregar React a un sitio website sin usar create-react-app</a> copiando algunos elementos <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> en un archivo HTML, pero la CLI de create-react-app es un punto de partida común para las aplicaciones React. Su uso te permitirá dedicar más tiempo a crear tu aplicación y menos a preocuparte por la configuración.</p> - -<h3 id="Requerimientos">Requerimientos</h3> - -<p>Para usar create-react-app, necesitas tener instalado <a href="https://nodejs.org/en/">Node.js</a>. Se recomienda utilizar la versión de soporte a largo plazo (LTS, por sus siglas en inglés). Node incluye npm (el administrador de paquetes de nodos), y npx (el ejecutor de paquetes de nodos).</p> - -<p>También puedes usar el administrador de paquetes Yarn como alternativa, pero asumiremos que estarás usando npm en estos tutoriales. Consulta <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Conceptos básicos de administración de paquetes</a> para obtener más información sobre npm y yarn.</p> - -<p>Si estás usando Windows, necesitarás instalar algún software para darle paridad con el terminal Unix/macOS, y así poder usar los comandos del terminal mencionados en este tutorial. <strong>Gitbash</strong> (el cual viene como parte del <a href="https://gitforwindows.org/">conjunto de herramientas git para Windows</a>) o el <strong><a href="https://docs.microsoft.com/en-us/windows/wsl/about">Subsistema de Windows para Linux</a></strong> (<strong>WSL</strong>, por sus siglas en inglés) son ambos adecuados. Consulte el <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Curso intensivo de línea de comandos</a> para obtener más información sobre estos y sobre los comandos de terminal en general.</p> - -<p>También ten en cuenta que React y ReactDOM producen aplicaciones que solo funcionan en un conjunto bastante moderno de navegadores (IE9+ a través de algunos polyfills). Se recomienda el uso de un navegador moderno como Firefox, Safari o Chrome cuando trabajes con estos tutoriales.</p> - -<p>Además, consulta lo siguiente para obtener más información:</p> - -<ul> - <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">"¿Qué es npm?" en nodejs.org</a></li> - <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">"Introducing npx" en el blog de npm</a></li> - <li><a href="https://create-react-app.dev/">La documentación de create-react-app</a></li> -</ul> - -<h3 id="Inicializando_tu_aplicación">Inicializando tu aplicación</h3> - -<p>create-react-app recibe un argumento: el nombre que te gustaría darle a tu aplicación. create-react-app usa este nombre para crear una nueva carpeta, luego crea los archivos necesarios dentro de la misma. Asegúrate de <code>cd</code> al lugar donde te gustaría que se guarde tu aplicación en tu disco duro, luego ejecuta lo siguiente en tu terminal:</p> - -<pre class="brush: bash notranslate">npx create-react-app moz-todo-react</pre> - -<p>Esto crea una carpeta <code>moz-todo-react</code>, y hace varias cosas dentro de la misma:</p> - -<ul> - <li>Instala algunos paquetes npm esenciales para la funcionalidad de la aplicación.</li> - <li>Escribe scripts para iniciar y servir la aplicación.</li> - <li>Crea una estructura de archivos y carpetas que definen la arquitectura básica de la aplicación.</li> - <li>Inicializa la carpeta como un repositorio de git, si tienes git instalado en tu computadora.</li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Nota</strong>: si tienes instalado el administrador de paquetes yarn, create-react-app lo usará por defecto en lugar de npm. Si tienes ambos administradores de paquetes instalados y quieres, explícitamente, usar npm, puedes agregar el indicador <code>--use-npm</code> cuando ejecutes create-react-app:</p> - -<pre class="brush: bash notranslate">npx create-react-app moz-todo-react --use-npm</pre> -</div> - -<p>create-react-app mostrará una serie de mensajes en tu terminal mientras opera, ¡lo cual es normal! Esto puede tardar unos minutos, por lo que ahora podría ser un buen momento para preparar una taza de té.</p> - -<p>Una vez completado el proceso, <code>cd</code> a la carpeta <code>moz-todo-react</code> y ejecuta el comando <code>npm start</code>. Los scripts instalados por create-react-app comenzarán a servirse en un servidor local en <code>localhost:3000</code> y abrirán la aplicación en una nueva pestaña del navegador. Tu navegador mostrará algo como esto:</p> - -<p><img alt="Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application" src="https://mdn.mozillademos.org/files/17203/default-create-react-app.png" style="border-style: solid; border-width: 1px; height: 980px; width: 1600px;"></p> - -<h3 id="Estructura_de_la_aplicación">Estructura de la aplicación</h3> - -<p>create-react-app nos provee todo lo que necesitamos para desarrollar una aplicación React. Su estructura inicial de archivos luce así:</p> - -<pre class="notranslate">moz-todo-react -├── README.md -├── node_modules -├── package.json -├── package-lock.json -├── .gitignore -├── public -│ ├── favicon.ico -│ ├── index.html -│ └── manifest.json -└── src - ├── App.css - ├── App.js - ├── App.test.js - ├── index.css - ├── index.js - ├── logo.svg - └── serviceWorker.js</pre> - -<p>La carpeta <strong><code>src</code></strong> es donde pasaremos la mayor parte de nuestro tiempo, ya que es donde reside el código fuente de nuestra aplicación.</p> - -<p>La carpeta <strong><code>public</code></strong> contiene archivos que serán leidos por tu navegador mientras desarrollas la aplicación; el más importante de ellos es <code>index.html</code>. React introduce tu código en este archivo de manera que tu navegador pueda ejecutarlo. Hay alguno que otro marcado que ayuda a create-react-app a funcionar, así que ten cuidado de no editarlo a menos que sepas lo que estás haciendo. Deberías cambiar el texto dentro del elemento <code><a href="/en-US/docs/Web/HTML/Element/title"><title></a></code> en este archivo para reflejar el título de tu aplicación. ¡Los títulos de página precisos son importantes para la accesibilidad!</p> - -<p>La carpeta <code>public</code> también será publicada cuando crees y despliegues una versión para producción de tu aplicación. No cubriremos el despliegue en este tutorial, pero deberías poder usar una solución similar a la descrita en nuestro tutorial <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Despliegue de nuestra aplicación</a>.</p> - -<p>El archivo <code>package.json</code> contiene información sobre nuestro proyecto que Node.js/npm usa para mantenerlo organizado. Este archivo no es exclusivo de las aplicaciones React; create-react-app simplemente lo completa. No es necesario que entiendas este archivo en lo absoluto para completar este tutorial, sin embargo, si deseas obtener más información al respecto, puedes leer <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">What is the file `package.json`? en NodeJS.org</a>; también hablamos de ello en nuestro tutorial <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Conceptos básicos de administración de paquetes</a>.</p> - -<h2 id="Explorando_nuestro_primer_componente_React_—_<App>">Explorando nuestro primer componente React — <code><App/></code></h2> - -<p>En React, un <strong>componente</strong> es un módulo reutilizable que representa una parte de nuestra aplicación. Estas partes pueden ser grandes o pequeñas, pero, generalmente, están bien definidas: tienen un propósito único y obvio.</p> - -<p>Abramos <code>src/App.js</code>, ya que nuestro navegador nos pide que lo editemos. Este archivo contiene nuestro primer componente —<code>App</code>—, y algunas otras líneas de código:</p> - -<pre class="brush: js notranslate">import React from 'react'; -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> - </header> - </div> - ); -} -export default App;</pre> - -<p>El archivo <code>App.js</code> se compone de tres partes principales: algunas declaraciones <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> en la parte superior, el componente <code>App</code> en el medio, y una declaración <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></code> en la parte inferior. La mayoría de los componentes de React siguen este patrón.</p> - -<h3 id="Declaraciones_import">Declaraciones <code>import</code></h3> - -<p>Las declaraciones <code>import</code> en la parte superior del archivo le permiten a <code>App.js</code> utilizar código que ha sido definido en otra parte. Revisemos estas declaraciones más detalladamente.</p> - -<pre class="brush: js notranslate">import React from 'react'; -import logo from './logo.svg'; -import './App.css';</pre> - -<p>La primera declaración importa la biblioteca React como tal. Dado que React convierte el JSX que escribimos en <code>React.createElement()</code>, todos los componentes de React deben importar el módulo <code>React</code>. Si omites este paso, tu aplicación producirá un error.</p> - -<p>La segunda declaración importa un logotipo de <code>'./logo.svg'</code>. Observa el uso de <code>./</code> al principio de la ruta y la extensión <code>.svg</code> al final — estos nos indican que el archivo es local y que no es un archivo JavaScript. De hecho, el archivo <code>logo.svg</code> reside en nuestra carpeta raíz.</p> - -<p>No hace falta proveer una ruta o extensión al importar el módulo <code>React</code>, ya que este no es un archivo local. En cambio, aparece como una dependencia en nuestro archivo <code>package.json</code>. ¡Ten cuidado con esta distinción mientras trabajas en esta lección!</p> - -<p>La tercera declaración importa el CSS relacionado con nuestro componente <code>App</code>. Observa que no hay nombre de variable ni de directiva <code>from</code>. Esta sintaxis de importación en particular no es propia de la sintaxis de módulos de JavaScript. Esta proviene de Webpack, la herramienta que create-react-app usa para agrupar todos nuestros archivos JavaScript y enviarlos al navegador.</p> - -<h3 id="El_componente_App">El componente <code>App</code></h3> - -<p>Después de las importaciones, tenemos una función llamada <code>App</code>. Mientras que una mayor parte de la comunidad JavaScript prefiere nombres tipo <em>camel-case</em> como <code>helloWorld</code>, los componentes de React usan nombres de variables tipo <em>pascal-case</em>, como <code>HelloWorld</code>, para dejar en claro que un determinado elemento JSX es un componente de React y no una etiqueta HTML normal. Si llegaras a cambiar el nombre de la función <code>App</code> por <code>app</code>, tu navegador te mostraría un error.</p> - -<p>Vamos a darle un vistazo más detallado a <code>App</code>.</p> - -<pre class="brush: js notranslate">function App() { - return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> - </header> - </div> - ); -}</pre> - -<p>La función <code>App</code> devuelve una expresión JSX. Esta expresión define lo que tu navegador presenta en última instancia al DOM.</p> - -<p>Algunos elementos de la expresión tienen atributos, los cuales se escriben igual que en HTML, siguiendo un patrón de <code>atributo="valor"</code>. En la línea 3, la etiqueta de apertura <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> tiene un atributo <code>className</code>. Este es equivalente al atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code> de HTML, pues dado que JSX es JavaScript, no podemos usar la palabra <code>class</code> —la cual está reservada—, lo que significa que JavaScript ya la usa para un propósito específico y causaría problemas en nuestro código. Algunos otros atributos HTML también se escriben de manera diferente en JSX (de como se escriben en HTML), por el mismo tipo de razón. Los revisaremos a medida que nos crucemos con estos.</p> - -<p>Tómate un momento para cambiar la etiqueta <code><a href="/en-US/docs/Web/HTML/Element/p"><p></a></code> en la línea 6 para que diga "¡Hola, mundo!", luego guarda los cambios. Notarás que este cambio se procesa inmediatamente en el servidor de desarrollo que se ejecuta en <code>http://localhost:3000</code> en tu navegador. Ahora elimina la etiqueta <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> y guarda los cambios; el enlace "Learn React" habrá desaparecido.</p> - -<p>Ahora, tu componente <code>App</code> debería lucir así:</p> - -<pre class="brush: js notranslate">function App() { - return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - ¡Hola, mundo! - </p> - </header> - </div> - ); -}</pre> - -<h3 id="Declaraciones_export">Declaraciones <code>export</code></h3> - -<p>En la parte inferior del archivo <code>App.js</code>, la declaración <code>export default App</code> hace que nuestro componente <code>App</code> esté disponible para otros módulos.</p> - -<h2 id="Explorando_el_index">Explorando el index</h2> - -<p>Vamos a abrir el archivo <code>src/index.js</code>, ya que es en este donde el componente <code>App</code> está siendo utilizado. Este archivo es el punto de entrada para nuestra aplicación, e inicialmente luce así:</p> - -<pre class="brush: js notranslate">import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; - -ReactDOM.render(<App />, document.getElementById('root')); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister();</pre> - -<p>Al gual que <code>App.js</code>, el archivo comienza importando todos los módulos JS y otros activos que necesita para ejecutarse. <code>src/index.css</code> contiene estilos globales que se aplican a toda nuestra aplicación. Podemos ver que nuestro componente <code>App</code> también es importado acá; su importación es posible gracias a la declaración <code>export</code> en la parte inferior de <code>App.js</code>.</p> - -<p>En la línea 7, se invoca la función <code>ReactDOM.render()</code> de React con dos argumentos:</p> - -<ul> - <li>El componente que queremos renderizar, <code><App /></code> en este caso.</li> - <li>El elemento DOM dentro del cual queremos que se renderice el componente, en este caso, el elemento con un ID de <code>root</code>. Si miras dentro de <code>public/index.html</code>, verás que este es un elemento <code><div></code> justo dentro de <code><body></code>.</li> -</ul> - -<p>Todo esto le indica a React que queremos renderizar nuestra aplicación React con el componente <code>App</code> como raíz, o primer componente.</p> - -<div class="blockIndicator note"> -<p><strong>Nota</strong>: En JSX, los componentes de React y los elementos HTML deben tener, obligatoriamente, barras diagonales de cierre. Escribir solo <code><App></code> o solo <code><img></code> provocará un error.</p> -</div> - -<p>Los <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> son interesantes piezas de código que ayudan al rendimiento de las aplicaciones y permiten que las funciones de tus aplicaciones web funcionen sin conexión, pero estas no están dentro del alcance de este artículo. Puedes eliminar la línea 5, así como las líneas 9 a 12.</p> - -<p>Finalmente, tu archivo <code>index.js</code> debería verse así:</p> - -<pre class="brush: js notranslate">import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; - -ReactDOM.render(<App />, document.getElementById('root'));</pre> - -<h2 id="Variables_y_props">Variables y props</h2> - -<p>A continuación, usaremos algunas de nuestras habilidades de JavaScript para lograr sentirnos un poco más cómodos editando componentes y trabajando con datos en React. Hablaremos sobre cómo se usan las variables dentro de JSX, e introduciremos props, que son una forma de pasar datos a un componente (al que luego se puede acceder usando variables).</p> - -<h3 id="Variables_en_JSX">Variables en JSX</h3> - -<p>De vuelta en <code>App.js</code>, enfoquémonos en la línea 9:</p> - -<pre class="brush: js notranslate"><img src={logo} className="App-logo" alt="logo" /></pre> - -<p>Aquí, el valor del atributo <code>src</code> de la etiqueta <code><img /></code> está entre llaves. Así es como JSX reconoce las variables. Al encontrarse con <code>{logo}</code>, React sabrá que nos referimos a la importación del logotipo en la línea 2 de nuestra aplicación, y luego recuperará el archivo del logo y lo renderizará.</p> - -<p>Vamos a intentar crear una variable propia. Antes de la declaración return de <code>App</code>, agrega <code>const subject = "React";</code>. Tu componente <code>App</code> ahora debería verse así:</p> - -<pre class="brush: js notranslate">function App() { - const subject = "React"; - return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - ¡Hola, mundo! - </p> - </header> - </div> - ); -}</pre> - -<p>Cambia la línea 8, de manera que se use la variable <code>subject</code> en vez de la palabra "mundo", así:</p> - -<pre class="brush: js notranslate">function App() { - const subject = "React"; - return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - ¡Hola, {subject}! - </p> - </header> - </div> - ); -}</pre> - -<p>Al guardar, tu navegador debería mostrar "¡Hola, React!" en vez de "¡Hola, mundo!"</p> - -<p>Las variables son convenientes, pero la que acabamos de configurar no hace gran uso de las funciones de React. Es allí donde entran los props.</p> - -<h3 id="Props_de_componentes">Props de componentes</h3> - -<p>Un <strong>prop</strong> es cualquier dato que se pasa a un componente de React. Los props se escriben dentro de las llamadas a los componentes y utilizan la misma sintaxis que los atributos HTML: <code>prop="value"</code>. Abramos <code>index.js</code> y démosle a la llamada de nuestro <code><App/></code> su primer prop.</p> - -<p>Agrega un prop de <code>subject</code> a la llamada del componente <code><App /></code>, con un valor de <code>Clarice</code>. Al terminar, tu código debería verse similar a este:</p> - -<pre class="brush: js notranslate">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> - -<p>Volviendo a <code>App.js</code>, vamos a revisar nuevamente la función <code>App</code> como tal, la cual se lee así (acortando la declaración <code>return</code> por razones de brevedad):</p> - -<pre class="brush: js notranslate">function App() { - const subject = "React"; - return ( - // return statement - ); -}</pre> - -<p>Cambia la declaración de la función <code>App</code> de manera que tome <code>props</code> como un parámetro, y elimina la constante <code>subject</code>. Al igual que cualquier otro parámetro de una función, puedes pasar <code>props</code> a <code>console.log()</code> para imprimirlos en la consola de tu navegador. Continúa, haciendo esto antes de la declaración <code>return</code>, así:</p> - -<pre class="brush: js notranslate">function App(props) { - console.log(props); - return ( - // return statement - ); -}</pre> - -<p>Guarda tu archivo y revisa la consola JavaScript de tu navegador. Deberías ver registrado algo como esto:</p> - -<pre class="brush: js notranslate">Object { subject: "Clarice" }</pre> - -<p>La propiedad <code>subject</code> del objeto corresponde al prop <code>subject</code> que agregamos a la llamada de nuestro componente <code><App /></code>, y la cadena <code>Clarice</code> corresponde a su valor. Los props de componentes en React siempre se recopilan en objetos de esta manera.</p> - -<p>Ahora que <code>subject</code> es uno de nuestros props, usémoslo en <code>App.js</code>. Cambia la constante <code>subject</code> de manera que, en vez de definirla como la cadena <code>React</code>, estés leyendo el valor de <code>props.subject</code>. También puedes eliminar <code>console.log()</code>, si así lo quieres.</p> - -<pre class="brush: js notranslate">function App(props) { - const subject = props.subject; - return ( - // return statement - ); -}</pre> - -<p>Una vez guardes, la aplicación debería darte la bienvenida con un "¡Hola, Clarice!". Si regresas a <code>index.js</code>, editas el valor de <code>subject</code>, y guardas, el texto cambiará.</p> - -<h2 id="Resumen">Resumen</h2> - -<p>Esto nos lleva al final de nuestra introducción a React, la cual incluye cómo instalarlo de manera local, cómo crear una aplicación inicial, y cómo funcionan los conceptos básicos. En el próximo artículo comenzaremos a construir nuestra primera aplicación como tal: una lista de tareas pendientes. Sin embargo, antes de ello, recapitulemos algunas de las cosas que hemos aprendido.</p> - -<p>En React:</p> - -<ul> - <li>Los componentes pueden importar los módulos que necesitan y deben exportarse a sí mismos al final de sus archivos.</li> - <li>Las funciones de componentes se nombran con <code>PascalCase</code>.</li> - <li>Puedes leer las variables JSX poniéndolas entre llaves, <code>{así}</code>.</li> - <li>Algunos atributos JSX son diferentes a los atributos HTML, para evitar conflictos con las palabras reservadas de JavaScript. Por ejemplo, el atributo <code>class</code> de HTML se convierte en <code>className</code> en JSX. Ten en cuenta que los atributos de varias palabras se nombran con <code>camelCase</code>.</li> - <li>Los props se escriben como atributos dentro de las llamadas de componentes y se pasan a los componentes.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> - -<h2 id="En_este_módulo">En este módulo</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introducción a los frameworks del lado del cliente</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Características principales de los frameworks</a></li> - <li>React - <ul> - <li><a href="/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started">Primeros pasos en React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Comenzando con nuestra lista de tareas de React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Basando nuestra aplicación React en componentes</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">Interactividad de React: eventos y estado</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">Interactividad de React: edición, filtrado, renderizado condicional</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accesibilidad en React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">Recursos sobre React</a></li> - </ul> - </li> - <li>Ember - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Primeros pasos en Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Estructura de una aplicación Ember y cómo se basa en componentes</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Interactividad de Ember: eventos, clases, y estado</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Interactividad de Ember: funcionalidad del footer, renderizado condicional</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Enrutamiento en Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Recursos sobre y solución de problemas</a></li> - </ul> - </li> - <li>Vue - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Primeros pasos en Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creando nuestro primer componente de Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Renderizando una lista de componentes de Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Agregar una nueva forma de tareas pendientes: eventos, métodos y modelos de Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Agregando estilos a los componentes de Vue con CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Usando propiedades calculadas de Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Renderización condicional en Vue: editando tareas existentes</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Gestión de enfoque con Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Recursos sobre Vue</a></li> - </ul> - </li> - <li>Svelte - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Primeros pasos en Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Comenzando con nuestra aplicación Svelte de lista de tareas</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Comportamiento dinámico en Svelte: trabajando con variables y props</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Basando nuestra aplicación Svelte en componentes</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Svelte avanzado: reactividad, ciclo de vida, accesibilidad</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Trabajando con Svelte stores</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">Compatibilidad con TypeScript en Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Implementación y próximos pasos</a></li> - </ul> - </li> -</ul> diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html deleted file mode 100644 index ea24ac2a81..0000000000 --- a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Primeros pasos con Vue -slug: >- - Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> - -<p class="summary">Ahora vamos a introducir Vue, el tercero de nuestros frameworks. En este articulo vamos a ver un poco del background de Vue, aprenderemos cómo instalarlo y a crear un nuevo proyecto, estudiar la estructura de alto nivel de todo el proyecto y un componente individual, sabremos como correr el proyecto localmente, y tenerlo preparado para empezar a construir nuestro ejemplo.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Pre-requisitos:</th> - <td> - <p>Familiaridad con los motores de los lenguajes <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, y <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, conocimiento del <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p> - - <p>Los componentes Vue son escritos como una combinacion de objectos Javascript que administran los datos de la app y una sintaxis de plantilla basada en HTML que se enlaza con la estructura DOM subyacente. Para la instalación, y para usar algunas de las caracteristicas mas avanzadas de Vue (como Componentes de archivos simples o renderizado de funciones), vas a necesitar un terminar con node + npm instalados.</p> - </td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Configurar un entorno de desarrollo local de Vue, crear una app de inicio y entender los principios de su funcionamiento.</td> - </tr> - </tbody> -</table> - -<h2 id="Un_Vue_más_claro">Un Vue más claro</h2> - -<p>Vue es un framework moderno de Javascript que proveé facilidades muy utiles para el mejoramiento progresivo- al contrario de otros frameworks, puedes usar Vue para mejorar un HTML exstente. Esto permite usar Vue como un remplazo agregado para una libreria como <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/jQuery">JQuery</a>.</p> - -<p>Habiendo dicho esto, tambien puedes usar Vue para escribir completamente una aplicación de una sola página(SPAs).This allows you to create markup managed entirely by Vue, which can improve developer experience and performance when dealing with complex applications. It also allows you to take advantage of libraries for client-side routing and state management when you need to. Additionally, Vue takes a "middle ground" approach to tooling like client-side routing and state management. While the Vue core team maintains suggested libraries for these functions, they are not directly bundled into Vue. This allows you to select a different routing/state management library if they better fit your application.</p> - -<p>In addition to allowing you to progressively integrate Vue into your applications, Vue also provides a progressive approach to writing markup. Like most frameworks, Vue lets you create reusable blocks of markup via components. Most of the time, Vue components are written using a special HTML template syntax. When you need more control than the HTML syntax allows, you can write JSX or plain JavaScript functions to define your components.</p> - -<p>As you work through this tutorial, you might want to keep the <a href="https://vuejs.org/v2/guide/">Vue guide</a> and <a href="https://vuejs.org/v2/api/">API documentation</a> open in other tabs, so you can refer to them if you want more information on any sub topic.<br> - For a good (but potentially biased) comparison between Vue and many of the other frameworks, see <a href="https://vuejs.org/v2/guide/comparison.html">Vue Docs: Comparison with Other Frameworks</a>.</p> - -<h2 id="Installation">Installation</h2> - -<p>To use Vue in an existing site, you can drop one of the following <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.</p> - -<ul> - <li> - <p>Development Script (Unoptimized, but includes console warnings. Great for development</p> - - <pre class="brush: html notranslate"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></pre> - </li> - <li> - <p>Production Script (Optimized version, minimal console warnings. It is recommended that you specify a version number when including Vue on your site so that any framework updates do not break your live site without you knowing.)</p> - - <pre class="brush: html notranslate"><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></pre> - </li> -</ul> - -<p>However, this approach has some limitations. To build more complex apps, you’ll want to use the <a href="https://www.npmjs.com/package/vue">Vue NPM package</a>. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need:</p> - -<ol> - <li>Node.js 8.11+ installed.</li> - <li>npm or yarn.</li> -</ol> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: If you don't have the above installed, find out <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p> -</div> - -<p>To install the CLI, run the following command in your terminal:</p> - -<pre class="brush: bash notranslate">npm install --global @vue/cli</pre> - -<p>Or if you'd prefer to use yarn:</p> - -<pre class="brush: bash notranslate">yarn global add @vue/cli</pre> - -<p>Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run <code>vue create <project-name></code>. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.</p> - -<p>We’ll look at using this below.</p> - -<h2 id="Initializing_a_new_project">Initializing a new project</h2> - -<p>To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:</p> - -<ol> - <li>In terminal, <code>cd</code> to where you'd like to create your sample app, then run <code>vue create moz-todo-vue</code>.</li> - <li>Use the arrow keys and <kbd>Enter</kbd> to select the "Manually select features" option.</li> - <li>The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press <kbd>Enter</kbd> to proceed.</li> - <li>Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit <kbd>Enter</kbd> again. This will help us catch common errors, but not be overly opinionated.</li> - <li>Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit <kbd>Enter</kbd> to continue.</li> - <li>Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's <code>package.json</code> file. Select "In dedicated config files" and push <kbd>Enter</kbd>.</li> - <li>Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type <kbd>y</kbd> , otherwise type <kbd>n</kbd>.</li> -</ol> - -<p>The CLI will now begin scaffolding out your project, and installing all of your dependencies.</p> - -<p>If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag <code>--packageManager=<package-manager></code>, when you run <code>vue create</code>. So if you wanted to create the <code>moz-todo-vue</code> project with npm and you'd previously chosen yarn, you’d run <code>vue create moz-todo-vue --packageManager=npm</code>.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: We've not gone over all of the options here, but you can <a href="https://cli.vuejs.org">find more information on the CLI</a> in the Vue docs.</p> -</div> - -<h2 id="Project_structure">Project structure</h2> - -<p>If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:</p> - -<ul> - <li><code>.eslintrc.js</code>: This is a config file for <a href="https://eslint.org/">eslint</a>. You can use this to manage your linting rules.</li> - <li><code>babel.config.js</code>: This is the config file for <a href="https://babeljs.io/">Babel</a>, which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.</li> - <li><code>.browserslistrc</code>: This is a config for <a href="https://github.com/browserslist/browserslist">Browserslist</a>. You can use this to control which browsers your tooling optimizes for.</li> - <li><code>public</code>: This directory contains static assets that are published, but not processed by <a href="https://webpack.js.org/">Webpack</a> during build (with one exception; <code>index.html</code> gets some processing). - <ul> - <li><code>favicon.ico</code>: This is the favicon for your app. Currently, it's the Vue logo.</li> - <li><code>index.html</code>: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it. - <div class="note"><strong>Note</strong>: this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.</div> - </li> - </ul> - </li> - <li><code>src</code>: This directory contains the core of your Vue app. - <ul> - <li><code>main.js</code>: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the <code>index.html</code> file your app should be attached to. This file is often where you register global components or additional Vue libraries.</li> - <li><code>App.vue</code>: this is the top-level component in your Vue app. See below for more explanation of Vue components.</li> - <li><code>components</code>: this directory is where you keep your components. Currently it just has one example component.</li> - <li><code>assets</code>: This directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like <a href="https://sass-lang.com/">Sass/SCSS</a> or <a href="https://stylus-lang.com/">Stylus</a>.</li> - </ul> - </li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a <code>views</code> directory).</p> -</div> - -<h2 id=".vue_files_single_file_components">.vue files (single file components)</h2> - -<p>Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.</p> - -<p>While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in <code>.vue</code>. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.</p> - -<p>As a bonus, projects created with the Vue CLI are configured to use <code>.vue</code> files with Webpack out of the box. In fact, if you look inside the <code>src</code> folder in the project we created with the CLI, you'll see your first <code>.vue</code> file: <code>App.vue</code>.</p> - -<p>Let's explore this now.</p> - -<h3 id="App.vue">App.vue</h3> - -<p>Open your <code>App.vue</code> file — you’ll see that it has three parts: <code><template></code>, <code><script></code>, and <code><style></code>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.</p> - -<p><code><template></code> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: By setting the <code>lang</code> attribute on the <code><template></code> tag, you can use Pug template syntax instead of standard HTML — <code><template lang="pug"></code>. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.</p> -</div> - -<p><code><script></code> contains all of the non-display logic of your component. Most importantly, your <code><script></code> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a <code>render()</code> function.</p> - -<p>In the case of <code>App.vue</code>, our default export sets the name of the component to <code>app</code> and registers the <code>HelloWorld</code> component by adding it into the <code>components</code> property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.</p> - -<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'; - -export default { - name: 'app', - components: { - //You can register components locally here. - HelloWorld - } -};</pre> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: If you want to use <a href="https://www.typescriptlang.org/">TypeScript</a> syntax, you need to set the <code>lang</code> attribute on the <code><script></code> tag to signify to the compiler that you're using TypeScript — <code><script lang="ts"></code>.</p> -</div> - -<p><code><style></code> is where you write your CSS for the component. If you add a <code>scoped</code> attribute — <code><style scoped></code> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: If you select a CSS pre-processor when creating the project via the CLI, you can add a <code>lang</code> attribute to the <code><style></code> tag so that the contents can be processed by Webpack at build time. For example, <code><style lang="scss"></code> will allow you to use SCSS syntax in your styling information.</p> -</div> - -<h2 id="Running_the_app_locally">Running the app locally</h2> - -<p>The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a <code>serve</code> command to the project’s <code>package.json</code> file as an npm script, so you can easily run it.</p> - -<p>In your terminal, try running <code>npm run serve</code> (or <code>yarn serve</code> if you prefer yarn). Your terminal should output something like the following:</p> - -<pre class="notranslate">INFO Starting development server... -98% after emitting CopyPlugin - - DONE Compiled successfully in 18121ms - - App running at: - - Local: <http://localhost:8080/> - - Network: <http://192.168.1.9:8080/> - - Note that the development build is not optimized. - To create a production build, run npm run build.</pre> - -<p>If you navigate to the “local” address in a new browser tab (this should be something like <code>http://localhost:8080</code> as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.</p> - -<p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="https://mdn.mozillademos.org/files/17240/vue-default-app.png" style="border-style: solid; border-width: 1px; height: 779px; width: 1600px;"></p> - -<h2 id="Making_a_couple_of_changes">Making a couple of changes</h2> - -<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> element from the template section:</p> - -<pre class="brush: html notranslate"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd"><img alt="Vue logo" src="./assets/logo.png"></span></pre> - -<p>If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the <code>HelloWorld</code> component from our template.</p> - -<p>First of all delete this line:</p> - -<pre class="brush: html notranslate"><HelloWorld msg="Welcome to Your Vue.js App"/></pre> - -<p>If you save your <code>App.vue</code> file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <code><script></code> element that import and register the component:</p> - -<p>Delete these lines now:</p> - -<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'</pre> - -<pre class="brush: js notranslate">components: { - HelloWorld -}</pre> - -<p>Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <code><template></code>.</p> - -<p>Let’s add a new <code><h1></code> inside <code><div id="app"></code>. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:</p> - -<pre class="brush: html notranslate"><template> - <div id="app"> - <h1>To-Do List</h1> - </div> -</template></pre> - -<p><code>App.vue</code> will now show our heading, as you'd expect.</p> - -<h2 id="Summary">Summary</h2> - -<p>Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.</p> - -<p>With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.</p> - -<p>In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.</p> - -<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> - <li>React - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> - </ul> - </li> - <li>Ember - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> - </ul> - </li> - <li>Vue - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> - </ul> - </li> - <li>Svelte - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> - </ul> - </li> -</ul> diff --git a/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html b/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html deleted file mode 100644 index 6221b0382f..0000000000 --- a/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Understanding client-side web development tools -slug: Learn/Herramientas_y_pruebas/Understanding_client-side_tools -tags: - - Aprender - - CSS - - Despliegue - - HTML - - Herramientas - - JavaScript - - Novatos - - Transformación - - client-side - - lado del cliente -translation_of: Learn/Tools_and_testing/Understanding_client-side_tools ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Las herramientas del lado del cliente (<em>client-side</em> en inglés) pueden ser intimidantes, pero esta serie de artículos tiene como propósito ilustrar el propósito de algunos de los tipos de herramientas <em>client-side</em>, explicar las herramientas que puedes integrar, cómo instalarlas usando administradores de paquetes y cómo controlarlas usando la línea de comandos. Terminanos esta sección dando un ejemplo de cadena de herramientas para mostrarte cómo puedes ser más productivo</p> - -<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Inicia ahora con nuestra "Introducción a las herraminetas <em>client-side</em>"</a></strong></p> - -<h2 id="Requisitos_previos">Requisitos previos</h2> - -<p>Debes aprender el núcleo básico de los lenguajes <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a> y <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, antes de intentar usar las herramientas aquí descritas.</p> - -<div class="in-page-callout webdev"> -<h3 id="¿Quieres_convertirte_en_un_desarrollador_front-end">¿Quieres convertirte en un desarrollador <em>front-end</em>?</h3> - -<p>Tenemos un curso que incluye toda la información esencial que necesitas para lograr tu objetivo.</p> -<a class="cta primary" href="/docs/Learn/Front-end_web_developer">Inicia ahora</a></div> - -<h2 id="Guías">Guías</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">1. Introducción a las herramientas <em>client-side</em></a></dt> - <dd>En este artículo damos una introducción a las herramientas modernas de la web, los tipos de herramientas disponibles, donde te las puedes encontrar en el cliclo de desarrollo de aplicaciones web y como buscar ayuda con las herramientas individuales.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">2. Introducción a la linea de comandos</a></dt> - <dd>En tu proceso de desarrollo seguramente vas a requeria correr algunos comandos en la terminal (o "línea de comandos"). Este artículo da una introducción a la terminal, los comandos básicos que vas a necesitar para utilizarla, cómo integrar diferentes comandos y cómo agregar tu propia interfaz de línea de comandos (<em>command line interface</em> - CLI en inglés).</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">3. Introducción al manejo de paquetes</a></dt> - <dd>En este artículo exploramos los sistemas de administración de paquetes en detalle para entender cómo los podemos usar en nuestros proyectos, ya sea para instalar dependencias a nuestro proyecto, descargar actualizaciones y mucho más.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">4. Introduciendo una cadena de herramientas completa</a></dt> - <dd>En los últimos dos artículos en esta serie vamos a solidificar tu conocimiento de las herramientas para el desarrollo web construyendo una cadena de herramients. Iniciaremos configurando un ambiente de desarrollo y colocando herramentas de transformación para desplegar nuestra aplicación en Netlify. En este artículo introducimos un estudio de caso, configuramos nuestro ambiente de desarrollo y configuramos herramientas de transformación de código.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">5. Desplegando nuestra aplicación</a></dt> - <dd>En el artículo final de esta serie, utilizamos nuestra cadena de herramientas que construimos en el artículo previo y la extendemos para desplegar nuestra aplicación muestra. Subimos nuestro código a GitHub, desplegamos usando Netlify e incluso te enseñamos a realizar una prueba en el proceso.</dd> -</dl> |