Maximice sus habilidades de reacción: cree una aplicación de lista de tareas pendientes de principio a fin (con TypeScript + Vite)

En esta publicación de blog, repasaremos todo lo que necesita para y una aplicación React básica. Ya sea que sea un principiante que acaba de comenzar con React o un desarrollador experimentado que busca mejorar sus habilidades, esta guía es para usted. comprender crear Esta guía lo guiará a través de todo el proceso de creación de una aplicación de lista de tareas totalmente funcional, incluido el diseño, el diseño, la administración del estado y más. Usaremos componentes funcionales y ganchos. Aprenderemos cómo usar el estado y los accesorios para pasar datos entre componentes y cómo manejar la entrada del usuario y actualizar el estado de su aplicación. Al final de esta guía, tendremos una sólida comprensión de cómo crear una aplicación React desde cero, y podrá aprovechar sus nuevos conocimientos para crear sus propios proyectos React. ¡Entonces empecemos! * Puede encontrar el código de la aplicación que vamos a construir y la versión en vivo . aquí aquí una breve introducción Usaremos TypeScript para escribir el código y Vite para desarrollar y crear la aplicación. Mecanografiado es un lenguaje de programación fuertemente tipado que se basa en JavaScript. En términos prácticos, si ya conoce JavaScript, todo lo que necesita aprender a usar TypeScript es cómo usar tipos e interfaces. TypeScript Los tipos e interfaces nos permiten definir los tipos de datos que estamos usando en el código. Con esto, podemos detectar errores desde el principio y evitar problemas en el futuro. Por ejemplo, si una función toma un pero le pasamos una , TypeScript se quejará de inmediato: number string const someFunc = (parameter: number) => {...}; someFunc('1') // Argument of type 'string' is not assignable to parameter of type 'number'. Si estuviéramos usando JavaScript, probablemente solo detectaríamos el error más adelante. No siempre necesitamos especificar el tipo, ya que TypeScript puede inferirlos automáticamente la mayoría de las veces. Puede aprender los conceptos básicos de TypeScript . (O simplemente ignore los tipos). aquí Vite La forma más común de activar una aplicación React probablemente sea usando . Usaremos (pronunciado como "veet") en su lugar. Pero no se preocupe, es igual de simple, pero más eficiente. create-react-app Vite Con herramientas como (utilizado por create-react-app bajo el capó), toda su aplicación debe estar agrupada en un solo archivo antes de que pueda ser enviada al navegador. Vite, por otro lado, aprovecha los módulos ES nativos en el navegador para hacer que la agrupación sea más eficiente con , sirviendo partes del código fuente según sea necesario. webpack Rollup Vite también puede acelerar en gran medida el tiempo de desarrollo con Hot Module Replacement, lo que significa que cada vez que se realizan cambios en el código fuente, solo se actualizan los cambios, en lugar de toda la aplicación. Además de eso, Vite ofrece soporte nativo para Typescript, JSX y TSX, CSS y más. De manera similar a create-react-app, Vite ofrece una herramienta llamada create-vite, que nos permite comenzar rápidamente un nuevo proyecto usando plantillas básicas, incluidas opciones para Vanilla JS, o usando bibliotecas como React. Para ser claros, no una herramienta como Vite o create-react-app para crear aplicaciones React, pero nos facilitan la vida al encargarse de configurar el proyecto, empaquetar el código, usar transpiladores y mucho más. necesitamos Buceando en React JSX/TSX React nos permite agregar marcado directamente en el código que luego se compilará en JavaScript simple. Esto se llama . Cuando usamos JSX, podemos guardar nuestros archivos como .jsx para JavaScript o .tsx para TypeScript. JSX Se parece a esto: const element = Hello, world! ; Es similar a HTML, pero está incrustado en el archivo JavaScript y nos permite manipular el marcado con lógica de programación. También podemos agregar código JavaScript dentro de JSX, siempre que esté entre llaves. Por ejemplo, si tenemos una matriz de texto que queremos representar como elementos de párrafo diferentes, podemos hacer esto: const paragraphs = ["First", "Second", "Third"]; paragraphs.map((paragraph) => {paragraph}

); Y sería compilado a algo como esto: First

Second

Third

Pero si tratamos de hacer precisamente eso, no funcionará. Esto se debe a que React funciona con componentes y JSX debe renderizarse dentro de estos componentes. Reaccionar componentes Los componentes de React se pueden escribir usando de JavaScript o simplemente simples. Nos centraremos en los componentes de función, ya que son la forma más actualizada y recomendada de escribir componentes de React en la actualidad. clases funciones Un componente se define mediante una función que devolverá el JSX que el navegador compilará y procesará. Entonces, para extender el ejemplo anterior, si queremos representar los elementos del párrafo, se vería así: // Define the component const Component = () => { const paragraphs = ["First", "Second", "Third"]; return ( <> {paragraphs.map((paragraph) => ( {paragraph}

))} ); }; // Use the component in the same way you use an HTML element in the JSX const OtherComponent = () => { return ; }; Accesorios Ahora tal vez queramos reutilizar este componente con información diferente. Podemos hacerlo usando accesorios, que es solo un objeto de JavaScript que contiene algunos datos. En nuestro ejemplo, en lugar de codificar la matriz, podríamos pasarla al componente. El resultado será el mismo, pero ahora el componente será reutilizable. Si usamos TypeScript, debemos especificar los tipos de datos dentro del objeto props (no hay contexto para lo que son, por lo que TypeScript no puede inferirlos), que en este caso es una matriz de cadenas ( ). string[] const Component = (props: { paragraphs: string[] }) => { <> {props.paragraphs.map((paragraph) => ( {paragraph}

))} ; }; const OtherComponent = () => { const paragraphs = ["First", "Second", "Third"]; return ; }; Estado Si queremos hacer un componente interactivo, necesitaremos almacenar información en el estado del componente, para que pueda "recordarlo". Por ejemplo, si queremos definir un contador simple que muestre la cantidad de veces que se hace clic en un botón, necesitamos una forma de almacenar y actualizar este valor. React nos permite hacerlo con el gancho (un es una función que le permite "engancharse" al ). useState gancho estado de React y las características del ciclo de vida Llamamos al gancho con el valor inicial, y nos devuelve una matriz con el valor en sí y una función para actualizarlo. useState import { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); return ( <> {count} setCount(count + 1)}>Increment count ); }; Con este conocimiento, ahora estamos listos para comenzar a construir nuestra aplicación React. Creando el proyecto dependencias Para usar Vite vamos a necesitar **nodo **y un administrador de paquetes. Para instalar el nodo, simplemente elija una de las opciones según su sistema y configuraciones. Si está usando Linux o una Mac, también puede instalarlo usando . aquí Homebrew El administrador de paquetes puede ser o . En esta publicación vamos a usar . npm yarn npm Creando el proyecto A continuación, es el momento de crear el proyecto. En la terminal, navegamos al directorio donde se creará el proyecto, luego ejecutamos el comando create-vite. $ npm create vite@latest Es posible que se nos solicite instalar paquetes adicionales (como create-vite). Escriba y presione enter para continuar. y Need to install the following packages: create-vite@4.0.0 Ok to proceed? (y) A continuación, se nos pedirá que ingresemos la información del proyecto. Introduzca el del proyecto. Elegí . nombre my-react-project ? Project name: › my-react-project Seleccione como el "marco". React React es técnicamente , pero no te preocupes por eso. una biblioteca y no un marco ? Select a framework: › - Use arrow-keys. Return to submit. Vanilla Vue ❯ React Preact Lit Svelte Others Seleccione como variante. TypeScript + SWC (siglas de Speedy Web Compiler) es un compilador superrápido de TypeScript/JavaScript escrito en Rust. Afirman ser "20 veces más rápido que Babel en un solo hilo y 70 veces más rápido en cuatro núcleos". SWC ? Select a variant: › - Use arrow-keys. Return to submit. JavaScript TypeScript JavaScript + SWC ❯ TypeScript + SWC Listo, el proyecto está creado. Para iniciarlo en modo de desarrollo, debemos cambiar al directorio del proyecto, instalar las dependencias y ejecutar el comando dev script. cd my-react-project npm install npm run dev Después de unos segundos, veremos algo similar a esto: VITE v4.0.4 ready in 486 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help Si abrimos nuestro navegador y navegamos a / veremos la página predeterminada de Vite + React: http://localhost:5173 Esto significa que todo es como debe ser y podemos comenzar a trabajar en nuestra aplicación. Construyendo la aplicación Estructura de archivos y configuración inicial Si abrimos el proyecto en nuestro editor de código o IDE de elección, deberíamos ver una estructura de archivos como esta: Podemos eliminar algunos de los archivos repetitivos, ya que no los usaremos (todos los archivos .svg y .css). El código en la función de la aplicación se puede eliminar para dejarnos esto: function App() { return ( ) } export default App Volveremos a este archivo más tarde. Estilismo El estilo no es el enfoque aquí, pero usaremos Tailwind CSS, que es una biblioteca que nos permite diseñar elementos HTML al agregarles clases. Siga para ver los estilos reflejados en su propio proyecto. estas instrucciones De lo contrario, puede ignorar las clases en el código. Pensando en el diseño: disposición de los componentes El proceso de diseño es una parte integral del desarrollo de una aplicación y no debe pasarse por alto. Para construir nuestra aplicación de lista de tareas, primero debemos pensar en el diseño de los componentes. Comenzamos simulando una interfaz de usuario básica y describiendo una jerarquía de los componentes involucrados. Si no eres diseñador, no es necesario que sea perfecto o la interfaz de usuario final en términos de colores y ubicación exacta todavía; es más importante pensar en la estructura de los componentes. Lo ideal es que nuestros componentes sean responsables de una sola cosa, siguiendo el . principio de responsabilidad única En la imagen a continuación, los nombres en púrpura son los componentes que vamos a construir; todo lo demás son elementos HTML nativos. Si están uno dentro del otro, significa que probablemente habrá una relación padre-hijo. Props: construyendo una versión estática Después de tener un boceto, podemos comenzar a construir una versión estática de la aplicación. Es decir, solo los elementos de la interfaz de usuario, pero sin interactividad todavía. Esta parte es bastante sencilla e implica escribir mucho y pensar poco una vez que aprendes a hacerlo. Puedes encontrar el código de la versión estática en este , en la rama “static-version”. El código para la aplicación completamente funcional es la rama principal. repositorio de GitHub Envase Como se describió anteriormente, vamos a tener un Contenedor que se reutilizará para cada sección de la aplicación. Este Contenedor muestra una de las formas de componer diferentes elementos: haciéndolos pasar como hijos. // src/components/Container.tsx const Container = ({ children, title, }: { children: JSX.Element | JSX.Element[]; title?: string; }) => { return ( {title && {title} } {children} ); }; export default Container; Toma un objeto props con un parámetro de tipo . Esto significa que podemos componerlo con cualquier otro elemento HTML o cualquier otro componente que creemos. Se puede representar donde queramos dentro del contenedor, en este caso dentro del segundo div. children JSX.Element | JSX.Element[] En nuestra aplicación, representará cada sección (definida a continuación) cuando las usemos dentro del componente de la aplicación. El Contenedor también toma una propiedad opcional llamada , que se representará dentro de un h2 siempre que exista. string title // src/App.tsx import Container from "./components/Container"; import Input from "./components/Input"; import Summary from "./components/Summary/Summary"; import Tasks from "./components/Tasks/Tasks"; function App() { return ( ); } export default App; Resumen La primera sección es un resumen (componente Resumen) que muestra tres elementos (SummaryItem): el número total de tareas, el número de tareas pendientes y el número de tareas completadas. Esta es otra forma de componer componentes: simplemente utilícelos en la declaración de retorno de otro componente. (Sin embargo, es importante nunca un componente dentro de otro componente, ya que eso puede conducir a representaciones y errores innecesarios). definir Por ahora solo podemos usar datos estáticos en los dos componentes. // src/components/Summary/SummaryItem.tsx const SummaryItem = ({ itemName, itemValue, }: { itemName: string; itemValue: number; }) => { return ( {itemName} {itemValue} ); }; export default SummaryItem; // src/components/Summary/Summary.tsx import SummaryItem from "./SummaryItem"; const Summary = () => { return ( <> ); }; export default Summary; Notará que SummaryItem toma dos accesorios: , de tipo cadena, y , de tipo . Estos accesorios se pasan cuando el componente SummaryItem se usa dentro del componente Summary y luego se procesan en SummaryItem JSX. itemName itemValue number Tareas De manera similar, para la sección de tareas (la última) tenemos un componente Tareas que representa los componentes TaskItem. También con datos estáticos por ahora. Más tarde necesitaremos pasar un y un como accesorios al componente TaskItem para que sea reutilizable y dinámico. nombre de tarea estado // src/components/Tasks/TaskItem.tsx const TaskItem = () => { return ( Task name Delete ); }; export default TaskItem; // src/components/Tasks/Tasks.tsx import TaskItem from "./TaskItem"; const Tasks = () => { return ( ); }; export default Tasks; Aporte Finalmente, el componente Entrada es un formulario con una etiqueta, una entrada de tipo texto y un botón para “Agregar tarea”. Por ahora no hace nada, pero pronto cambiaremos eso. // src/components/Input.tsx const InputContainer = () => { return ( Enter your next task: Add task ); }; export default InputContainer; Estado: agregando interactividad Para agregar interactividad en React, necesitamos almacenar información en el estado del componente. Pero antes de hacer eso, debemos pensar en cómo queremos que cambien los datos con el tiempo. Necesitamos identificar de estos datos e identificar debemos usar para almacenar este estado. una representación mínima qué componentes Una representación mínima del estado El estado debe contener toda la información necesaria para que nuestra aplicación sea interactiva, pero nada más. Si podemos calcular un valor a partir de un valor diferente, debemos mantener solo uno de ellos en el estado. Esto hace que nuestro código no solo sea menos detallado, sino también menos propenso a errores que involucran valores de estado contradictorios. En nuestro ejemplo, podríamos pensar que necesitamos realizar un seguimiento de los valores de las tareas totales, las tareas pendientes y las tareas realizadas. Pero para realizar el seguimiento de las tareas, basta con tener un solo arreglo con objetos que representen cada tarea y su estado (pendiente o finalizada). const tasks = [ { name: "task one", done: false, }, { name: "task two", done: true, }, ]; Con estos datos, siempre podemos encontrar toda la otra información que necesitamos en el momento del renderizado utilizando métodos de matriz. También evitamos la posibilidad de contradicciones, como tener un total de 4 tareas, pero solo 1 pendiente y 1 tarea finalizada, por ejemplo. También necesitamos estado en nuestro formulario (en el componente de entrada) para que podamos hacerlo interactivo. Donde el estado debe vivir Piénselo de esta manera: ¿qué componentes necesitan acceder a los datos que vamos a almacenar en el estado? Si es un solo componente, el estado puede vivir en este componente mismo. Si hay más de un componente que necesita los datos, entonces debe encontrar el padre común para estos componentes. En nuestro ejemplo, solo se debe acceder al estado necesario para controlar el componente de entrada allí, por lo que puede ser local para este componente. // src/components/Input.tsx import { useState } from "react"; const InputContainer = () => { const [newTask, setNewTask] = useState(""); // Initialize newTask and setNewTask return ( Enter your next task: setNewTask(e.target.value)} // Set newTask to the input value whenever the user types something /> Add task ); }; export default InputContainer; Lo que esto hace es mostrar nuestro valor en la entrada y llamar a la función cada vez que cambia la entrada (es decir, cuando el usuario escribe algo). newTask setNewTask No veremos cambios inmediatos en la interfaz de usuario, pero esto es necesario para que podamos controlar la entrada y tener acceso a su valor para usarlo más tarde. Sin embargo, el estado para realizar un seguimiento de las tareas debe manejarse de manera diferente, ya que debe accederse a él en los componentes SummaryItem (necesitamos mostrar el número de tareas totales, pendientes y realizadas), así como en los componentes TaskItem (necesitamos para mostrar las tareas en sí). Y debe estar en el mismo estado porque esta información siempre debe estar sincronizada. Echemos un vistazo a nuestro árbol de componentes (puede usar las para esto). herramientas de desarrollo de React Podemos ver que el primer componente principal común es App. Así que aquí es donde va a vivir nuestro estado para las tareas. Con el estado en su lugar, todo lo que quedará será pasar los datos como accesorios a los componentes que necesitan usarlos. (Todavía no nos preocupa cómo realizar y persistir los cambios en el estado principal, esa es la siguiente parte). // src/App.tsx import { useState } from "react"; import { v4 as uuidv4 } from "uuid"; import Container from "./components/Container"; import Input from "./components/Input"; import Summary from "./components/Summary/Summary"; import Tasks from "./components/Tasks/Tasks"; export interface Task { name: string; done: boolean; id: string; } const initialTasks = [ { name: "task one", done: false, id: uuidv4(), }, { name: "task two", done: true, id: uuidv4(), }, ]; function App() { const [tasks, setTasks] = useState (initialTasks); return ( ); } export default App; Aquí estamos inicializando el valor de las tareas con datos ficticios ( ), solo para que podamos visualizarlo antes de que finalice la aplicación. Más tarde, podemos cambiarlo a una matriz vacía, por lo que un nuevo usuario no verá ninguna tarea al abrir la aplicación desde cero. initialTasks Además del y las propiedades , también estamos agregando una identificación a nuestros objetos de tareas, ya que será necesario en breve. name done Estamos definiendo una con los tipos del valor en los objetos de la tarea y pasándola a la función . Esto es necesario en este caso, ya que TypeScript no podrá inferirlo cuando cambiamos el valor inicial de las a una matriz vacía, o cuando lo pasamos como accesorios. interface useState tasks Finalmente, observe que estamos pasando las tareas como accesorios a los componentes Resumen y Tareas. Estos componentes deberán cambiarse para adaptarse a eso. // src/components/Summary/Summary.tsx import { Task } from "../../App"; import SummaryItem from "./SummaryItem"; const Summary = ({ tasks }: { tasks: Task[] }) => { const total = tasks.length; const pending = tasks.filter((t) => t.done === false).length; const done = tasks.filter((t) => t.done === true).length; return ( <> ); }; export default Summary; Actualizamos el componente Resumen para que ahora acepte como accesorio. También definimos el valor , y , que se transmitirá como accesorios a los componentes en lugar de los elementos estáticos que teníamos antes. tasks total pending done itemValue // src/components/Tasks/Tasks.tsx import { Task } from "../../App"; import TaskItem from "./TaskItem"; const Tasks = ({ tasks }: { tasks: Task[] }) => { return ( {tasks.map((t) => ( ))} ); }; export default Tasks; // src/components/Tasks/TaskItem.tsx import { useState } from "react"; const TaskItem = ({ name }: { name: string }) => { const [done, setDone] = useState(false); return ( setDone(!done)} /> {name} Delete ); }; export default TaskItem; Para el componente Tasks, también tomamos s como accesorio y asignamos su propiedad de a los componentes TaskItem. Como resultado, obtenemos un componente TaskItem para cada objeto dentro de la matriz de . También actualizamos el componente TaskItem para aceptar el como accesorio. task name tasks name Aquí es donde la identificación es útil, ya que necesitamos pasar una clave única cada vez que tenemos una lista de componentes secundarios. Si no agregamos la clave, esto podría . (En una aplicación de producción, lo más probable es que la identificación provenga del backend). provocar errores en la renderización El resultado por ahora es este: Ya podemos ver los números de resumen y los nombres de las tareas que reflejan nuestros datos ficticios. Pero todavía nos falta una forma de agregar o eliminar tareas. Agregar flujo de datos inverso Para finalizar nuestra aplicación, necesitamos una forma de cambiar el estado del componente de la aplicación (donde están los datos de las tareas) de los componentes secundarios Input y TaskItem. Para hacer eso, podemos usar las funciones generadas por el para definir controladores de eventos y pasarlos como accesorios. Una vez que hacemos eso, simplemente los llamamos durante la interacción del usuario apropiada desde los componentes secundarios. useState Asegúrese de , ya que esto provocará errores. Siempre reemplace el objeto de estado por uno nuevo cuando lo actualice. nunca cambiar el estado cada vez que lo actualice A continuación se muestra nuestro componente de aplicación final con los controladores declarados y transmitidos como apoyos a los componentes de entrada y tareas. devuelve una nueva matriz con las tareas antiguas más la nueva. devuelve una nueva matriz con la propiedad opuesta, para el especificado. devuelve una nueva matriz sin la tarea con la especificada. handleSubmit toggleDoneTask done id handleDeleteTask id // src/App.tsx import { FormEvent, useState } from "react"; import { v4 as uuidv4 } from "uuid"; import Container from "./components/Container"; import Input from "./components/Input"; import Summary from "./components/Summary/Summary"; import Tasks from "./components/Tasks/Tasks"; export interface Task { name: string; done: boolean; id: string; } function App() { const [tasks, setTasks] = useState ([]); const handleSubmit = (e: FormEvent , value: string) => { e.preventDefault(); const newTask = { name: value, done: false, id: uuidv4(), }; setTasks((tasks) => [...tasks, newTask]); }; const toggleDoneTask = (id: string, done: boolean) => { setTasks((tasks) => tasks.map((t) => { if (t.id === id) { t.done = done; } return t; }) ); }; const handleDeleteTask = (id: string) => { setTasks((tasks) => tasks.filter((t) => t.id !== id)); }; return ( ); } export default App; Este es el componente de entrada final que usa para actualizar el estado del componente de la aplicación. handleSubmit // src/components/Input.tsx import { FormEvent, useState } from "react"; const InputContainer = ({ handleSubmit, }: { handleSubmit: (e: FormEvent , value: string) => void; }) => { const [newTaskName, setNewTaskName] = useState(""); return ( { handleSubmit(e, newTaskName); setNewTaskName(""); }} > Enter your next task: setNewTaskName(e.target.value)} /> Add task ); }; export default InputContainer; Este es el componente Tareas final, que actualizamos para pasar los accesorios de la aplicación a TaskItem. También agregamos un operador ternario para devolver "¡No hay tareas todavía!" cuando no hay tareas. // src/components/Tasks/Tasks.tsx import { Task } from "../../App"; import TaskItem from "./TaskItem"; const Tasks = ({ tasks, toggleDone, handleDelete, }: { tasks: Task[]; toggleDone: (id: string, done: boolean) => void; handleDelete: (id: string) => void; }) => { return ( {tasks.length ? ( tasks.map((t) => ( )) ) : ( No tasks yet! )} ); }; export default Tasks; Y este es el componente TaskItem final, usando y para actualizar el estado del componente de la aplicación. toggleDone handleDelete // src/components/Tasks/TaskItem.tsx const TaskItem = ({ name, done, id, toggleDone, handleDelete, }: { name: string; done: boolean; id: string; toggleDone: (id: string, done: boolean) => void; handleDelete: (id: string) => void; }) => { return ( toggleDone(id, !done)} /> {name} handleDelete(id)} > Delete ); }; export default TaskItem; ¡Y aquí está nuestra aplicación final después de agregar algunas tareas! Si está programando, puede implementar su propia aplicación siguiendo . estas instrucciones Puede encontrar el repositorio con todo el código que revisamos , y la versión en vivo de la aplicación . aquí aquí Ultimas palabras En conclusión, crear una aplicación de lista de tareas puede ser una excelente manera de aprender y solidificar nuestra comprensión de React y sus principios. Al dividir el proceso en pequeños pasos y seguir las mejores prácticas, podemos crear una aplicación funcional en un período de tiempo relativamente corto. Hemos cubierto: los conceptos clave de componentes, estado y flujo de datos inverso. el diseño y la arquitectura de la aplicación. mejores prácticas como el principio de responsabilidad única Al seguir los pasos descritos en esta guía, ahora debería tener una comprensión sólida de cómo crear una aplicación React simple y poder aplicarla a sus propios proyectos. ¡Feliz codificación!