React Intermediate Tutorial: 3 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:51

React Intermediate Tutorial

Вижте готовия продукт тук.

Какво ще научите?

Ще създадете прост списък със задачи с React.js и ще научите за по-сложните части на React. Предпоставки (силно препоръчителни) попълнете ръководството за начало на React.js. Познаване на HTMLA познаване на CSS Основни команди на черупка Достойни познания в JavaScript

Консумативи

Целият софтуер ще бъде разгледан в урока.

Ще ви е необходим компютър със инсталиран следния софтуер:

• npm/прежда
• IDE, която поддържа js
• Уеб браузър

Стъпка 1: React Intermediate Tutorial

Приготвяме се да започнем

Защо React.js?

С React.js целта е да се използва повторно код. Например, да кажем, че имате лента за навигация, която имате на 100 страници. Ако трябва да добавите нова страница, тогава трябва да промените лентата за навигация на всяка страница, което означава, че трябва да направите същото за 100 страници. Дори при макроси това става много досадно.

Инсталиране на необходимия софтуер/пакети

Ще имаш нужда:

npm/прежда

Как да инсталирате:

1. Отидете и инсталирайте най -новата LTS на Node.js
2. ОПЦИЯ: ако предпочитате прежда като мениджър на пакети, инсталирайте прежда, като въведете в powershell npm install -g прежда
3. Отворете powershell/cmd.exe
4. Придвижете се до директорията, в която искате да създадете вашия проект
5. Въведете npx create-response-app.

Завършихте фазата на настройка. за да го тествате, отворете powershell, отворете директорията на вашия проект и въведете npm start. трябва да заредите уеб страница в браузъра си по подразбиране.

Стъпка 2: Стъпка 1: Първи стъпки

За да започнете, изтрийте следните файлове от директорията /src:

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

Не се нуждаем от тези файлове.

Нека също така организираме нашата файлова система. Създайте тези директории в /src /:

• js
• css

поставете App.js в js dir и App.css в css dir.

След това нека реорганизираме зависимостите.

в index.js премахнете вноса за serviceWorker и index.css. Изтрийте serviceWorker.register (). Пренасочете пътищата за App.

в App.js премахнете вноса за logo.svg, тъй като вече не се нуждаем от него. Пренасочване на App.css. изтрийте функцията App () и експортирайте за App.

В React имаме 2 начина за дефиниране на елементи. Имаме функции и класове. функциите са за по -малко сложни елементи, а класовете обикновено са за по -сложни компоненти. Тъй като списъкът с задачи е по -сложен от куп HTML, ще използваме синтаксиса на класа.

Добавете това към кода си:

pastebin.com/nGXeCpaH

html ще влезе в рамките на 2 диви.

нека дефинираме Елемента.

pastebin.com/amjd0jnb

забележете как определихме стойността в състоянието. Това ще ни трябва по -късно.

във функцията за изобразяване заменете hi с {this.state.value}

ние изобразяваме стойността, преминала през състоянието, което сме дефинирали.

така че нека да го тестваме!

във функцията за изобразяване на App го заменете с това:

pastebin.com/aGLX4jVE

тя трябва да показва стойност: "тест".

нека видим дали можем да изобразяваме множество задачи!

вместо да накараме React да изобразява само един елемент, можем да създадем масив от и да каже на React да изобразява масива вместо това.

променете функцията за визуализация на на:

pastebin.com/05nqsw71

това трябва да направи 10 различни задачи. Забележете как добавихме ключове. Тези ключове се използват като идентификатори за реакция и ние, ако имаме нужда от тях.

Сега, когато нашият списък със задачи работи, ние намираме начин да заредим задачите. Тук идва нашата държава.

нека добавим конструктор към нашия.

pastebin.com/9jHAz2AS

В този конструктор преместихме taskArray далеч от функцията за визуализация в състояние. изтрийте цикъла taskArray и for във функцията за визуализация. променете taskArray в div в this.state.taskArray.

Досега вашият код на App.js трябва да изглежда така:

pastebin.com/1iNtUnE6

Стъпка 3: Добавяне на начин за добавяне и премахване на обекти

Нека добавим начин за добавяне и премахване на обекти. Нека го планираме.

Какво ни трябва?

• Начин за потребителя да добавя обекти
• Място за съхранение на обекти
• Начин за извличане на обектите

Какво ще използваме?

• Елемент
• API за localstorage w/ JSON

Нека започнем с входния елемент.

под {this.state.taskArray}, добавете въвеждане и бутон към кода си

Добавяне

Сега трябва да има въвеждане на текст и бутон Добавяне.

В момента не прави нищо, така че нека добавим 6 метода към нашия метод на App.

Нуждаем се от метод, когато бутонът е щракнат, а също и когато някой въведе въведеното. Нуждаем се и от начин за генериране на масив от задачи, както и за запазване, зареждане и премахване на задачи.

нека добавим тези 6 метода:

бутон Щракнете ()

inputTyped (evt)

generatedTaskArray ()

saveTasks (задачи)

getTasks ()

removeTask (id)

нека също така добавим тази променлива към нашето състояние:

вход

Ние също трябва да обвържем нашите функции с това.

pastebin.com/syx465hD

Нека започнем да добавяме функционалност.

добавете 2 атрибута към подобното така:

това прави така, че когато потребителят въведе нещо във входа, той изпълнява функцията.

добавете атрибут onClick към Добавянето така:

Добавяне

когато потребителят натисне бутона, функцията се изпълнява.

сега, когато html частта е готова, нека да продължим с функционалността.

Вече написах предварително интерфейса на localStorage API, така че заменете функциите saveTasks, getTasks и removeTask с това:

pastebin.com/G02cMPbi

нека започнем с функцията inputTyped.

когато потребителят пише, трябва да променим вътрешната стойност на входа.

нека направим това, като използваме функцията setState, предоставена с React.

this.setState ({вход: evt.target.value});

по този начин можем да получим стойността на входа.

след като това стане, можем да работим върху функцията buttonClick.

трябва да добавим задача към списъка със задачи. първо изтегляме списъка със задачи от localStorage, редактираме го и след това го запазваме. След това извикваме повторно изобразяване на taskList, за да го актуализираме.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

получаваме задачите, бутаме входната стойност в задачите и след това я запазваме. След това генерираме масив от задачи.

сега нека да работим по функцията generatedTaskArray ().

ние трябва да:

• вземете задачи
• създайте масив от компоненти на задачата
• предайте компонентите на задачата за изобразяване

можем да получим задачите и да ги съхраним в променлива с getTasks ()

var tasks = getTasks (). tasks

тогава трябва да създадем масив и да го попълним.

pastebin.com/9gNXvNWe

би трябвало да работи сега.

ПРОГРАМЕН КОД:

github.com/bluninja1234/todo_list_instructables

ДОПЪЛНИТЕЛНИ ИДЕИ:

Функция за премахване (много проста, добавете onclick и изтрийте с помощта на removeTask от ключовия индекс)

CSS (също прост, напишете свой собствен или използвайте bootstrap)