From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../client-side_javascript_frameworks/index.html | 133 ++++++ .../react_getting_started/index.html | 476 +++++++++++++++++++++ .../vue_getting_started/index.html | 294 +++++++++++++ 3 files changed, 903 insertions(+) create mode 100644 files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.html create mode 100644 files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html create mode 100644 files/es/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html (limited to 'files/es/learn/tools_and_testing/client-side_javascript_frameworks') diff --git a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.html new file mode 100644 index 0000000000..e9bdd36eca --- /dev/null +++ b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -0,0 +1,133 @@ +--- +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 +--- +
{{LearnSidebar}}
+ +

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.

+ +

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.

+ +

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:

+ + + +

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.

+ +

Empieza ahora con "Introducción a los frameworks del lado del cliente"

+ +

Prerrequisitos

+ +

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: HTML, CSS, y —especialmente— JavaScript.

+ +

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.

+ +

Guías introductorias

+ +
+
1. Introducción a los frameworks del lado del cliente
+
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.
+
2. Características principales de los frameworks
+
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.
+
+ +

Tutoriales de React

+ +
+

Nota: 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.

+ +

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 repositorio todo-react. Para una versión en vivo, consulta https://mdn.github.io/todo-react-build/.

+
+ +
+
1. Primeros pasos en React
+
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.
+
2. Comenzando con nuestra lista de tareas de React
+
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 App, de manera que esté listo para la definición e interactividad de componentes individuales, los cuales agregaremos más adelante.
+
3. Basando nuestra aplicación React en componentes
+
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.
+
4. Interactividad en React: eventos y estado
+
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.
+
5. Interactividad en React: edición, filtrado, renderizado condicional
+
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.
+
6. Accesibilidad en React
+
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.
+
7. Recursos sobre React
+
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.
+
+ +

Tutoriales de Ember

+ +
+

Nota: Los tutoriales de Ember se probaron por última vez en mayo de 2020, con Ember/Ember CLI versión 3.18.0.

+ +

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 repositorio ember-todomvc-tutorial. Para una versión en vivo, consulta https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (esto también incluye algunas características adicionales que no se cubren en este tutorial).

+
+ +
+
1. Primeros pasos en Ember
+
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.
+
2. Estructura de una aplicación Ember y cómo se basa en componentes
+
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.
+
3. Interactividad de Ember: eventos, clases, y estado
+
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.
+
4. Interactividad de Ember: funcionalidad del footer, renderizado condicional
+
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.
+
5. Enrutamiento en Ember
+
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".
+
6. Recursos sobre y solución de problemas
+
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.
+
+ +

Tutoriales de Vue

+ +
+

Nota: Los tutoriales de Vue se probaron por última vez en mayo de 2020, con Vue 2.6.11.

+ +

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 repositorio todo-vue. Para una verisón en vivo, consulta https://mdn.github.io/todo-vue/dist/.

+
+ +
+
1. Primeros pasos en Vue
+
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.
+
2. Creando nuestro primer componente de Vue
+
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.
+
3. Renderizando una lista de componentes de Vue
+
En este punto, tenemos un componente completamente funcional; ahora estamos listos para agregar varios componentes ToDoItem a nuestra aplicación. En este artículo, veremos cómo agregar un conjunto de datos de elementos de tareas a nuestro componente App.vue, el cual luego repasaremos en bucle, mostrando dentro de los componentes de ToDoItem mediante el uso de la directiva v-for.
+
4. Agregar una nueva forma de tareas pendientes: eventos, métodos y modelos de Vue
+
Ahora tenemos datos de muestra listos y un ciclo que toma cada bit de datos y lo renderiza dentro de un ToDoItem 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 <input> 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.
+
5. Agregando estilos a los componentes de Vue con CSS
+
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.
+
6. Usando propiedades calculadas de Vue
+
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.
+
7. Renderización condicional en Vue: editando tareas existentes
+
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, v-if y v-else, 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.
+
8. Gestión de enfoque con Vue refs
+
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.
+
9. Recursos sobre Vue
+
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.
+
+ +

¿Cuales frameworks hemos escogido?

+ +

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:

+ + + +

Queremos decir esto desde un principio: no 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.

+ +

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 Matrix, o Discourse, o enviarnos un correo electrónico a la lista mdn-admins.

diff --git a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html new file mode 100644 index 0000000000..09c28f11a9 --- /dev/null +++ b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -0,0 +1,476 @@ +--- +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 +--- +
{{LearnSidebar}}
+ +
{{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")}}
+ +

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.

+ + + + + + + + + + + + +
Prerrequisitos: +

Familiaridad con los lenguajes HTML, CSS, y JavaScript, conocimiento del terminal/línea de comandos.

+ +

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.

+
Objetivo:Configurar un entorno de desarrollo local para React, crear una aplicación inicial, y entender los aspectos básicos de su funcionamiento.
+ +

Hola, React

+ +

Como su eslogan oficial señala, React es una biblioteca para construir interfaces de usuario. React no es un framework — ni siquiera se limita a la web. React es utilizado con otras bibliotecas para renderizar en ciertos entornos. Por ejemplo, React Native puede usarse para desarrollar aplicaciones móviles; React 360 permite crear aplicaciones de realidad virtual; además de otras posibilidades.

+ +

Al desarrollar para la web, los desarrolladores usan React en conjunto con ReactDOM. 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.

+ +

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.

+ +

Casos de uso

+ +

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.

+ +

Si bien React puede usarse para pequeñas piezas de una interfaz, 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.

+ +

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.

+ +

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 create-react-app.

+ +

¿Cómo React usa JavaScript?

+ +

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 JSX, 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:

+ +
const heading = <h1>Mozilla Developer Network</h1>;
+ +

Esta constante "heading" se conoce como una expresión JSX. React puede usarla para representar la etiqueta <h1> en nuestra aplicación.

+ +

Supongamos que, por razones semánticas, queremos envolver nuestro encabezado en una etiqueta <header>. El enfoque JSX nos permite anidar nuestros elementos entre sí, tal como lo hacemos con HTML:

+ +
const header = (
+  <header>
+    <h1>Mozilla Developer Network</h1>
+  </header>
+);
+ +
+

Nota: 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:

+ +
const header = <header>
+    <h1>Mozilla Developer Network</h1>
+</header>
+ +

Sin embargo, esto luce un poco raro, ya que la etiqueta <header> que inicia la expresión no tiene sangría en la misma posición que su correspondiente etiqueta de cierre.

+
+ +

Por supuesto, tu navegador no puede leer JSX sin ayuda. Al compilarla (usando una herramienta como Babel o Parcel), nuestra expresión de encabezado se vería así:

+ +
const header = React.createElement("header", null,
+  React.createElement("h1", null, "Mozilla Developer Network")
+);
+ +

Es posible omitir el paso de la compilación y usar React.createElement() 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.

+ +

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.

+ +

Para leer más sobre JSX, consulta el artículo JSX en profundidad del equipo de React.

+ +

Configurando tu primera aplicación React

+ +

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.

+ +

Es posible agregar React a un sitio website sin usar create-react-app copiando algunos elementos <script> 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.

+ +

Requerimientos

+ +

Para usar create-react-app, necesitas tener instalado Node.js. 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).

+ +

También puedes usar el administrador de paquetes Yarn como alternativa, pero asumiremos que estarás usando npm en estos tutoriales. Consulta Conceptos básicos de administración de paquetes para obtener más información sobre npm y yarn.

+ +

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. Gitbash (el cual viene como parte del conjunto de herramientas git para Windows) o el Subsistema de Windows para Linux (WSL, por sus siglas en inglés) son ambos adecuados. Consulte el Curso intensivo de línea de comandos para obtener más información sobre estos y sobre los comandos de terminal en general.

+ +

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.

+ +

Además, consulta lo siguiente para obtener más información:

+ + + +

Inicializando tu aplicación

+ +

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 cd al lugar donde te gustaría que se guarde tu aplicación en tu disco duro, luego ejecuta lo siguiente en tu terminal:

+ +
npx create-react-app moz-todo-react
+ +

Esto crea una carpeta moz-todo-react, y hace varias cosas dentro de la misma:

+ + + +
+

Nota: 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 --use-npm cuando ejecutes create-react-app:

+ +
npx create-react-app moz-todo-react --use-npm
+
+ +

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é.

+ +

Una vez completado el proceso, cd a la carpeta moz-todo-react y ejecuta el comando npm start. Los scripts instalados por create-react-app comenzarán a servirse en un servidor local en localhost:3000 y abrirán la aplicación en una nueva pestaña del navegador. Tu navegador mostrará algo como esto:

+ +

Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application

+ +

Estructura de la aplicación

+ +

create-react-app nos provee todo lo que necesitamos para desarrollar una aplicación React. Su estructura inicial de archivos luce así:

+ +
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
+ +

La carpeta src es donde pasaremos la mayor parte de nuestro tiempo, ya que es donde reside el código fuente de nuestra aplicación.

+ +

La carpeta public contiene archivos que serán leidos por tu navegador mientras desarrollas la aplicación; el más importante de ellos es index.html. 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 <title> en este archivo para reflejar el título de tu aplicación. ¡Los títulos de página precisos son importantes para la accesibilidad!

+ +

La carpeta public 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 Despliegue de nuestra aplicación.

+ +

El archivo package.json 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 What is the file `package.json`? en NodeJS.org; también hablamos de ello en nuestro tutorial Conceptos básicos de administración de paquetes.

+ +

Explorando nuestro primer componente React — <App/>

+ +

En React, un componente 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.

+ +

Abramos src/App.js, ya que nuestro navegador nos pide que lo editemos. Este archivo contiene nuestro primer componente —App—, y algunas otras líneas de código:

+ +
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;
+ +

El archivo App.js se compone de tres partes principales: algunas declaraciones import en la parte superior, el componente App en el medio, y una declaración export en la parte inferior. La mayoría de los componentes de React siguen este patrón.

+ +

Declaraciones import

+ +

Las declaraciones import en la parte superior del archivo le permiten a App.js utilizar código que ha sido definido en otra parte. Revisemos estas declaraciones más detalladamente.

+ +
import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+ +

La primera declaración importa la biblioteca React como tal. Dado que React convierte el JSX que escribimos en React.createElement(), todos los componentes de React deben importar el módulo React. Si omites este paso, tu aplicación producirá un error.

+ +

La segunda declaración importa un logotipo de './logo.svg'. Observa el uso de ./ al principio de la ruta y la extensión .svg al final — estos nos indican que el archivo es local y que no es un archivo JavaScript. De hecho, el archivo logo.svg reside en nuestra carpeta raíz.

+ +

No hace falta proveer una ruta o extensión al importar el módulo React, ya que este no es un archivo local. En cambio, aparece como una dependencia en nuestro archivo package.json. ¡Ten cuidado con esta distinción mientras trabajas en esta lección!

+ +

La tercera declaración importa el CSS relacionado con nuestro componente App. Observa que no hay nombre de variable ni de directiva from. 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.

+ +

El componente App

+ +

Después de las importaciones, tenemos una función llamada App. Mientras que una mayor parte de la comunidad JavaScript prefiere nombres tipo camel-case como helloWorld, los componentes de React usan nombres de variables tipo pascal-case, como HelloWorld, 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 App por app, tu navegador te mostraría un error.

+ +

Vamos a darle un vistazo más detallado a App.

+ +
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>
+  );
+}
+ +

La función App devuelve una expresión JSX. Esta expresión define lo que tu navegador presenta en última instancia al DOM.

+ +

Algunos elementos de la expresión tienen atributos, los cuales se escriben igual que en HTML, siguiendo un patrón de atributo="valor". En la línea 3, la etiqueta de apertura <div> tiene un atributo className. Este es equivalente al atributo class de HTML, pues dado que JSX es JavaScript, no podemos usar la palabra class —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.

+ +

Tómate un momento para cambiar la etiqueta <p> 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 http://localhost:3000 en tu navegador. Ahora elimina la etiqueta <a> y guarda los cambios; el enlace "Learn React" habrá desaparecido.

+ +

Ahora, tu componente App debería lucir así:

+ +
function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          ¡Hola, mundo!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Declaraciones export

+ +

En la parte inferior del archivo App.js, la declaración export default App hace que nuestro componente App esté disponible para otros módulos.

+ +

Explorando el index

+ +

Vamos a abrir el archivo src/index.js, ya que es en este donde el componente App está siendo utilizado. Este archivo es el punto de entrada para nuestra aplicación, e inicialmente luce así:

+ +
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();
+ +

Al gual que App.js, el archivo comienza importando todos los módulos JS y otros activos que necesita para ejecutarse. src/index.css contiene estilos globales que se aplican a toda nuestra aplicación. Podemos ver que nuestro componente App también es importado acá; su importación es posible gracias a la declaración export en la parte inferior de App.js.

+ +

En la línea 7, se invoca la función ReactDOM.render() de React con dos argumentos:

+ + + +

Todo esto le indica a React que queremos renderizar nuestra aplicación React con el componente App como raíz, o primer componente.

+ +
+

Nota: En JSX, los componentes de React y los elementos HTML deben tener, obligatoriamente, barras diagonales de cierre. Escribir solo <App> o solo <img> provocará un error.

+
+ +

Los Service workers 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.

+ +

Finalmente, tu archivo index.js debería verse así:

+ +
import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+ +

Variables y props

+ +

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).

+ +

Variables en JSX

+ +

De vuelta en App.js, enfoquémonos en la línea 9:

+ +
<img src={logo} className="App-logo" alt="logo" />
+ +

Aquí, el valor del atributo src de la etiqueta <img /> está entre llaves. Así es como JSX reconoce las variables. Al encontrarse con {logo}, 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á.

+ +

Vamos a intentar crear una variable propia. Antes de la declaración return de App, agrega const subject = "React";. Tu componente App ahora debería verse así:

+ +
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>
+  );
+}
+ +

Cambia la línea 8, de manera que se use la variable subject en vez de la palabra "mundo", así:

+ +
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>
+  );
+}
+ +

Al guardar, tu navegador debería mostrar "¡Hola, React!" en vez de "¡Hola, mundo!"

+ +

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.

+ +

Props de componentes

+ +

Un prop 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: prop="value". Abramos index.js y démosle a la llamada de nuestro <App/> su primer prop.

+ +

Agrega un prop de subject a la llamada del componente <App />, con un valor de Clarice. Al terminar, tu código debería verse similar a este:

+ +
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
+ +

Volviendo a App.js, vamos a revisar nuevamente la función App como tal, la cual se lee así (acortando la declaración return por razones de brevedad):

+ +
function App() {
+  const subject = "React";
+  return (
+    // return statement
+  );
+}
+ +

Cambia la declaración de la función App de manera que tome props como un parámetro, y elimina la constante subject. Al igual que cualquier otro parámetro de una función, puedes pasar props a console.log() para imprimirlos en la consola de tu navegador. Continúa, haciendo esto antes de la declaración return, así:

+ +
function App(props) {
+  console.log(props);
+  return (
+    // return statement
+  );
+}
+ +

Guarda tu archivo y revisa la consola JavaScript de tu navegador. Deberías ver registrado algo como esto:

+ +
Object { subject: "Clarice" }
+ +

La propiedad subject del objeto corresponde al prop subject que agregamos a la llamada de nuestro componente <App />, y la cadena Clarice corresponde a su valor. Los props de componentes en React siempre se recopilan en objetos de esta manera.

+ +

Ahora que subject es uno de nuestros props, usémoslo en App.js. Cambia la constante subject de manera que, en vez de definirla como la cadena React, estés leyendo el valor de props.subject. También puedes eliminar console.log(), si así lo quieres.

+ +
function App(props) {
+  const subject = props.subject;
+  return (
+    // return statement
+  );
+}
+ +

Una vez guardes, la aplicación debería darte la bienvenida con un "¡Hola, Clarice!". Si regresas a index.js, editas el valor de subject, y guardas, el texto cambiará.

+ +

Resumen

+ +

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.

+ +

En React:

+ + + +

{{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")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html new file mode 100644 index 0000000000..ea24ac2a81 --- /dev/null +++ b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -0,0 +1,294 @@ +--- +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 +--- +
{{LearnSidebar}}
+ +
{{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")}}
+ +

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.

+ + + + + + + + + + + + +
Pre-requisitos: +

Familiaridad con los motores de los lenguajes  HTML, CSS, y  JavaScript languages, conocimiento del terminal/command line.

+ +

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.

+
Objetivo:Configurar un entorno de desarrollo local de Vue, crear una app de inicio y entender los principios de su funcionamiento.
+ +

Un Vue más claro

+ +

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 JQuery.

+ +

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.

+ +

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.

+ +

As you work through this tutorial, you might want to keep the Vue guide and API documentation open in other tabs, so you can refer to them if you want more information on any sub topic.
+ For a good (but potentially biased) comparison between Vue and many of the other frameworks, see Vue Docs: Comparison with Other Frameworks.

+ +

Installation

+ +

To use Vue in an existing site, you can drop one of the following <script> 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.

+ + + +

However, this approach has some limitations. To build more complex apps, you’ll want to use the Vue NPM package. 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:

+ +
    +
  1. Node.js 8.11+ installed.
    2. +
  2. npm or yarn.
    3. +
+ +
+

Note: If you don't have the above installed, find out more about installing npm and Node.js here.

+
+ +

To install the CLI, run the following command in your terminal:

+ +
npm install --global @vue/cli
+ +

Or if you'd prefer to use yarn:

+ +
yarn global add @vue/cli
+ +

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 vue create <project-name>. 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.

+ +

We’ll look at using this below.

+ +

Initializing a new project

+ +

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:

+ +
    +
  1. In terminal, cd to where you'd like to create your sample app, then run vue create moz-todo-vue.
    2. +
  2. Use the arrow keys and Enter to select the "Manually select features" option.
    3. +
  3. 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 Enter to proceed.
    4. +
  4. Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit Enter again. This will help us catch common errors, but not be overly opinionated.
    5. +
  5. 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 Enter to continue.
    6. +
  6. 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 package.json file. Select "In dedicated config files" and push Enter.
    7. +
  7. 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 y , otherwise type n.
    8. +
+ +

The CLI will now begin scaffolding out your project, and installing all of your dependencies.

+ +

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 --packageManager=<package-manager>, when you run vue create.  So if you wanted to create the moz-todo-vue project with npm and you'd previously chosen yarn, you’d run vue create moz-todo-vue --packageManager=npm.

+ +
+

Note: We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.

+
+ +

Project structure

+ +

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:

+ + + +
+

Note: 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 views directory).

+
+ +

.vue files (single file components)

+ +

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.

+ +

While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in .vue. 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.

+ +

As a bonus, projects created with the Vue CLI are configured to use .vue files with Webpack out of the box. In fact, if you look inside the src folder in the project we created with the CLI, you'll see your first .vue file: App.vue.

+ +

Let's explore this now.

+ +

App.vue

+ +

Open your App.vue file — you’ll see that it has three parts: <template>, <script>, and <style>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.

+ +

<template> 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.

+ +
+

Note: By setting the lang attribute on the <template> tag, you can use Pug template syntax instead of standard HTML — <template lang="pug">. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.

+
+ +

<script> contains all of the non-display logic of your component. Most importantly, your <script> 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 render() function.

+ +

In the case of App.vue, our default export sets the name of the component to app and registers the HelloWorld component by adding it into the components 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.

+ +
import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'app',
+  components: {
+    //You can register components locally here.
+    HelloWorld
+  }
+};
+ +
+

Note: If you want to use TypeScript syntax, you need to set the lang attribute on the <script> tag to signify to the compiler that you're using TypeScript — <script lang="ts">.

+
+ +

<style> is where you write your CSS for the component. If you add a scoped attribute — <style scoped> — 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.

+ +
+

Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a lang attribute to the <style> tag so that the contents can be processed by Webpack at build time. For example, <style lang="scss"> will allow you to use SCSS syntax in your styling information.

+
+ +

Running the app locally

+ +

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 serve command to the project’s package.json file as an npm script, so you can easily run it.

+ +

In your terminal, try running npm run serve (or yarn serve if you prefer yarn). Your terminal should output something like the following:

+ +
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.
+ +

If you navigate to the “local” address in a new browser tab (this should be something like http://localhost:8080 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.

+ +

default vue app render, with vue logo, welcome message, and some documentation links

+ +

Making a couple of changes

+ +

Let's make our first change to the app — we’ll delete the Vue logo. Open the App.vue file, and delete the <img> element from the template section:

+ +
<img alt="Vue logo" src="./assets/logo.png">
+ +

If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the HelloWorld component from our template.

+ +

First of all delete this line:

+ +
<HelloWorld msg="Welcome to Your Vue.js App"/>
+ +

If you save your App.vue 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 <script> element that import and register the component:

+ +

Delete these lines now:

+ +
import HelloWorld from './components/HelloWorld.vue'
+ +
components: {
+  HelloWorld
+}
+ +

Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <template>.

+ +

Let’s add a new <h1> inside <div id="app">. 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:

+ +
<template>
+  <div id="app">
+    <h1>To-Do List</h1>
+  </div>
+</template>
+ +

App.vue will now show our heading, as you'd expect.

+ +

Summary

+ +

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.

+ +

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.

+ +

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.

+ +

{{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")}}

+ +

In this module

+ + -- cgit v1.2.3-54-g00ecf