React Intermediate Tutorial: 3 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:12

React Intermediate Tutorial

Veure el producte acabat aquí.

Què aprendràs?

Creeu una llista de tasques senzilles amb React.js i coneixereu les parts més complicades de react. Els requisits previs (molt recomanables) completen la guia d'inici de react.js. Coneixement d'HTML. Coneixement de CSS. Ordres bàsiques de l'intèrpret d'ordres. Coneixement decent en JavaScript.

Subministraments

Tot el programari es tractarà al tutorial.

Necessitareu un ordinador amb el programari següent instal·lat:

• npm / fil
• Un IDE que admet js
• Un navegador web

Pas 1: Reaccioneu el tutorial intermedi

Començant

Per què React.js?

Amb React.js, es tracta de reutilitzar el codi. Per exemple, suposem que teniu una barra de navegació que teniu a 100 pàgines. Si heu d'afegir una pàgina nova, heu de canviar la barra de navegació de cada pàgina, és a dir, que heu de fer el mateix per a 100 pàgines. Fins i tot amb macros, això es fa molt tediós.

Instal·lació de paquets i programari requerits

Necessitarà:

npm / fil

Com instal · lar:

1. Aneu i instal·leu la versió més recent de LTS de Node.js
2. OPCIONAL: si preferiu el fil com a gestor de paquets, instal·leu el fil escrivint el llenguatge powershell npm install -g
3. Obriu powershell / cmd.exe
4. Aneu al directori on voleu crear el vostre projecte
5. Escriviu npx create-react-app.

Heu completat la fase de configuració. per provar-lo, obriu el PowerShell, aneu al directori del projecte i escriviu npm start. hauríeu de carregar una pàgina web al navegador predeterminat.

Pas 2: Pas 1: Introducció

Per començar, suprimiu els fitxers següents del directori / src:

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

No necessitem aquests fitxers.

Organitzem també el nostre sistema de fitxers. Creeu aquests directoris a / src /:

• js
• css

poseu App.js al directori js i App.css al directori css.

A continuació, reorganitzem les dependències.

a index.js, elimineu les importacions de serviceWorker i index.css. Suprimiu serviceWorker.register (). Torneu a encaminar els camins de l'aplicació.

a App.js, elimineu la importació de logo.svg, ja que ja no la necessitem. Torneu a encaminar App.css. suprimiu la funció App () i l'exportació per a l'aplicació.

A React, tenim 2 maneres de definir elements. Tenim funcions i classes. les funcions són per a ítems menys complicats i les classes generalment són per a components més complicats. Com que una llista de tasques és més complicada que un munt d’HTML, utilitzarem la sintaxi de la classe.

Afegiu-lo al vostre codi:

pastebin.com/nGXeCpaH

l'html anirà dins dels 2 divs.

definim l'element.

pastebin.com/amjd0jnb

observeu com definim el valor a l'estat. Ho necessitarem més endavant.

a la funció de renderització, substituïu hi per {this.state.value}

estem representant el valor que es transmet des de l’estat que hem definit.

doncs, provem-ho!

a la funció de renderització de l'aplicació, substituïu-la per aquesta:

pastebin.com/aGLX4jVE

hauria de mostrar un valor: "test".

a veure si podem representar diverses tasques.

en lloc d'obtenir React per representar només un element, podem crear una matriu de i dir react per representar la matriu.

canvieu la funció de renderització de la següent:

pastebin.com/05nqsw71

això hauria de representar 10 tasques diferents. Fixeu-vos en com hem afegit les claus. Aquestes claus s’utilitzen com a identificadors per reaccionar i nosaltres, en cas que els necessitem.

Ara que la nostra llista de tasques funciona, trobem una manera de carregar-les. Aquí és on entra el nostre estat.

afegim un constructor al nostre.

pastebin.com/9jHAz2AS

En aquest constructor, hem allunyat la taskArray de la funció de renderització a l'estat. suprimiu el taskArray i el bucle for de la funció de renderització. canvieu el taskArray del div a this.state.taskArray.

A hores d’ara, el vostre codi App.js hauria de tenir aquest aspecte:

pastebin.com/1iNtUnE6

Pas 3: afegir una manera d'afegir i eliminar objectes

Afegim una manera d'afegir i eliminar objectes. Planifiquem-ho.

Què necessitem?

• Una manera perquè l'usuari afegeixi objectes
• Un lloc per guardar objectes
• Una manera de recuperar els objectes

Què farem servir?

• Un element
• L'API localstorage amb JSON

Comencem per l'element d'entrada.

a sota de {this.state.taskArray}, afegiu una entrada i un botó al vostre codi

Afegeix

Ara hi hauria d’haver una entrada de text i un botó Afegeix.

Ara mateix no fa res, així que afegim 6 mètodes al nostre mètode d'aplicació.

Necessitem un mètode per fer clic al botó i també quan algú escrigui l'entrada. També necessitem una manera de generar la matriu de tasques, així com desar, carregar i eliminar tasques.

afegim aquests 6 mètodes:

buttonClick ()

inputTyped (evt)

generateTaskArray ()

saveTasks (tasques)

getTasks ()

removeTask (identificador)

afegim també aquesta variable al nostre estat:

entrada

També hem de vincular les nostres funcions a això.

pastebin.com/syx465hD

Comencem a afegir funcionalitats.

afegiu 2 atributs a similars:

això fa que quan l'usuari escrigui qualsevol cosa a l'entrada, executi la funció.

afegiu un atribut onClick a Afegeix així:

Afegeix

quan l'usuari fa clic al botó, la funció s'executa.

ara que s'ha acabat la part html, continuem amb la funcionalitat.

Ja he escrit prèviament la interfície de l'API localStorage, així que substituïu les funcions saveTasks, getTasks i removeTask amb això:

pastebin.com/G02cMPbi

Comencem per la funció inputTyped.

quan l'usuari escriu, hem de canviar el valor intern de l'entrada.

fem-ho mitjançant la funció setState que es proporciona amb react.

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

d'aquesta manera, podem obtenir el valor de l'entrada.

un cop fet això, podem treballar amb la funció buttonClick.

hem d’afegir una tasca a la llista de tasques. primer traiem la llista de tasques de localStorage, l’editem i després la desem. A continuació, cridem a un rerender de la llista de tasques per actualitzar-la.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

obtenim les tasques, introduïm el valor d’entrada a les tasques i després el desem. A continuació, generem la matriu de tasques.

ara, anem a treballar amb la funció generateTaskArray ().

necessitem:

• aconseguir tasques
• creeu un conjunt de components de tasca
• passar els components de la tasca a renderitzar

podem obtenir les tasques i emmagatzemar-les en una variable amb getTasks ()

var tasques = getTasks (). tasques

llavors hem de crear una matriu i omplir-la.

pastebin.com/9gNXvNWe

hauria de funcionar ara.

CODI FONT:

github.com/bluninja1234/todo_list_instructables

IDEES EXTRA:

Funció d'eliminació (molt senzilla, afegiu un clic i elimineu-la mitjançant l'eliminació de tasques de l'índex de claus)

CSS (també senzill, escriviu el vostre o utilitzeu bootstrap)