Tutorial de React Intermediate: 3 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

Tutorial de React Intermedio

Vea el producto terminado aquí.

¿Que aprenderás?

Creará una lista simple de tareas pendientes con React.js y aprenderá sobre las partes más complicadas de reaccionar. Los requisitos previos (muy recomendados) completan la guía de introducción a react.js. Conocimiento de HTMLA Conocimiento de CSS Comandos básicos de shell Conocimiento decente en JavaScript

Suministros

Todo el software se cubrirá en el tutorial.

Necesitará una computadora con el siguiente software instalado:

• npm / hilo
• Un IDE que admita js
• Un navegador web

Paso 1: Tutorial de React Intermedio

Empezando

¿Por qué React.js?

Con React.js, el objetivo es reutilizar el código. Por ejemplo, digamos que tiene una barra de navegación que tiene en 100 páginas. Si necesita agregar una nueva página, entonces debe cambiar la barra de navegación en cada página, lo que significa que debe hacer lo mismo para 100 páginas. Incluso con macros, esto se vuelve muy tedioso.

Instalación de paquetes / software necesarios

Necesitará:

npm / hilo

Cómo instalar:

1. Vaya e instale el último LTS de Node.js
2. OPCIONAL: si prefiere hilo como su administrador de paquetes, instale hilo escribiendo en powershell npm install -g yarn
3. Abra powershell / cmd.exe
4. Navegue al directorio en el que le gustaría crear su proyecto
5. Escriba npx create-react-app.

Ha completado la fase de configuración. para probarlo, abra PowerShell, navegue hasta el directorio de su proyecto y escriba npm start. Debería cargar una página web en su navegador predeterminado.

Paso 2: Paso 1: Primeros pasos

Para comenzar, elimine los siguientes archivos de su directorio / src:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

No necesitamos estos archivos.

Organicemos también nuestro sistema de archivos. Cree estos directorios en / src /:

• js
• css

coloque App.js en el directorio js y App.css en el directorio css.

A continuación, reorganicemos las dependencias.

en index.js, elimine las importaciones de serviceWorker e index.css. Elimine serviceWorker.register (). Vuelva a enrutar las rutas de la aplicación.

en App.js, elimine la importación de logo.svg, ya que ya no lo necesitamos. Redirigir App.css. elimine la función App () y la exportación para App.

En React, tenemos 2 formas de definir elementos. Tenemos funciones y clases. las funciones son para elementos menos complicados y las clases son generalmente para componentes más complicados. Debido a que una lista de tareas es más complicada que un montón de HTML, usaremos la sintaxis de la clase.

Agregue esto a su código:

pastebin.com/nGXeCpaH

el html irá dentro de los 2 divs.

definamos el elemento.

pastebin.com/amjd0jnb

observe cómo definimos el valor en el estado. Lo necesitaremos más tarde.

en la función de render, reemplace hola con {this.state.value}

estamos representando el valor pasado del estado que definimos.

¡así que probémoslo!

en la función de renderizado de la aplicación, reemplácela con esto:

pastebin.com/aGLX4jVE

debería mostrar un valor: "prueba".

¡Veamos si podemos renderizar múltiples tareas!

en lugar de hacer que React represente solo un elemento, podemos crear una matriz de y decirle a react que represente la matriz en su lugar.

cambie la función de render de a esto:

pastebin.com/05nqsw71

esto debería representar 10 tareas diferentes. Observe cómo agregamos claves. Estas claves se utilizan como identificadores para reaccionar y nosotros, en caso de que las necesitemos.

Ahora que nuestra lista de tareas está funcionando, encontramos una manera de cargar las tareas. Aquí es donde entra nuestro estado.

agreguemos un constructor a nuestro.

pastebin.com/9jHAz2AS

En este constructor, movimos el taskArray de la función de render al estado. elimine el taskArray y el bucle for en la función de renderizado. cambie el taskArray en el div en this.state.taskArray.

A estas alturas, su código de App.js debería verse así:

pastebin.com/1iNtUnE6

Paso 3: agregar una forma de agregar y eliminar objetos

Agreguemos una forma de agregar y eliminar objetos. Planeémoslo.

¿Qué necesitamos?

• Una forma para que el usuario agregue objetos.
• Un lugar para almacenar objetos.
• Una forma de recuperar los objetos.

¿Qué vamos a utilizar?

• Un elemento
• La API de almacenamiento local con JSON

Comencemos con el elemento de entrada.

debajo de {this.state.taskArray}, agregue una entrada y un botón a su código

Agregar

Debería haber una entrada de texto y un botón Agregar ahora.

No hace nada en este momento, así que agreguemos 6 métodos a nuestro método de aplicación.

Necesitamos un método para cuando se hace clic en el botón y también cuando alguien escribe la entrada. También necesitamos una forma de generar la matriz de tareas, así como guardar, cargar y eliminar tareas.

agreguemos estos 6 métodos:

buttonClick ()

inputTyped (evt)

generateTaskArray ()

saveTasks (tareas)

getTasks ()

removeTask (id)

agreguemos también esta variable a nuestro estado:

aporte

También necesitamos vincular nuestras funciones a esto.

pastebin.com/syx465hD

Comencemos a agregar funcionalidad.

agregue 2 atributos a los similares así:

esto hace que cuando el usuario escriba algo en la entrada, ejecute la función.

agregue un atributo onClick al Agregar así:

Agregar

cuando el usuario hace clic en el botón, la función se ejecuta.

ahora que la parte html está lista, sigamos con la funcionalidad.

Ya he escrito previamente la interfaz de la API localStorage, así que reemplace las funciones saveTasks, getTasks y removeTask con esto:

pastebin.com/G02cMPbi

comencemos con la función inputTyped.

cuando el usuario escribe, necesitamos cambiar el valor interno de la entrada.

hagámoslo usando la función setState proporcionada con react.

this.setState ({input: evt.target.value});

de esta manera, podemos obtener el valor de la entrada.

una vez hecho esto, podemos trabajar en la función buttonClick.

necesitamos agregar una tarea a la lista de tareas. Primero extraemos la lista de tareas de localStorage, la editamos y luego la guardamos. Luego llamamos a una repetición de la lista de tareas para actualizarla.

var taskList = this.getTasks ();

taskList.tasks.push (this.state.input);

this.saveTasks (lista de tareas);

this.generateTaskArray ();

obtenemos las tareas, introducimos el valor de entrada en las tareas y luego lo guardamos. Luego generamos la matriz de tareas.

ahora, trabajemos en la función generateTaskArray ().

Necesitamos que:

• conseguir tareas
• crear una serie de componentes de tareas
• pasar los componentes de la tarea para renderizar

podemos obtener las tareas y almacenarlas en una variable con getTasks ()

var tasks = getTasks (). tasks

luego necesitamos crear una matriz y completarla.

pastebin.com/9gNXvNWe

debería estar funcionando ahora.

CÓDIGO FUENTE:

github.com/bluninja1234/todo_list_instructables

IDEAS ADICIONALES:

Función de eliminación (muy simple, agregue un clic y elimine usando removeTask del índice de la clave)

CSS (también simple, escriba el suyo propio o use bootstrap)