React Intermediate Tutorial: 3 шага

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:50

React Intermediate Tutorial

Посмотреть готовый продукт можно здесь.

Что ты узнаешь?

Вы создадите простой список дел с помощью React.js и узнаете о более сложных частях реакции. Предварительные требования (настоятельно рекомендуются), завершение руководства по началу работы с react.js Знание HTML Знание команд CSSBasic Shell Достойные знания JavaScript

Запасы

Все программное обеспечение будет рассмотрено в руководстве.

Вам понадобится компьютер со следующим программным обеспечением:

• нпм / пряжа
• IDE, поддерживающая js
• Веб-браузер

Шаг 1. React Intermediate Tutorial

Начиная

Почему React.js?

С React.js суть заключается в повторном использовании кода. Например, предположим, что у вас есть панель навигации на 100 страницах. Если вам нужно добавить новую страницу, вам нужно изменить панель навигации на каждой странице, что означает, что вы должны сделать то же самое для 100 страниц. Даже с макросами это становится очень утомительно.

Установка необходимого программного обеспечения / пакетов

Тебе понадобится:

нпм / пряжа

Как установить:

1. Пойдите и установите последнюю версию LTS Node.js
2. ДОПОЛНИТЕЛЬНО: если вы предпочитаете yarn в качестве менеджера пакетов, установите yarn, набрав в powershell npm install -g yarn
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 и App.css в каталог css.

Затем давайте реорганизуем зависимости.

в index.js удалите импорт для serviceWorker и index.css. Удалите serviceWorker.register (). Перенаправьте пути для приложения.

в App.js удалите импорт для logo.svg, так как он нам больше не нужен. Перенаправьте App.css. удалите функцию App () и экспорт для App.

В React у нас есть 2 способа определения элементов. У нас есть функции и классы. функции предназначены для менее сложных элементов, а классы - для более сложных компонентов. Поскольку список задач сложнее, чем набор HTML, мы будем использовать синтаксис класса.

Добавьте это в свой код:

pastebin.com/nGXeCpaH

html войдет в 2 div.

давайте определим элемент.

pastebin.com/amjd0jnb

обратите внимание, как мы определили ценность в состоянии. Нам это понадобится позже.

в функции рендеринга замените hi на {this.state.value}

мы визуализируем значение, прошедшее через определенное нами состояние.

так что давайте проверим это!

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

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 локального хранилища с JSON

Начнем с элемента ввода.

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

Добавлять

Теперь должен быть текстовый ввод и кнопка «Добавить».

Прямо сейчас он ничего не делает, поэтому давайте добавим 6 методов в наш метод App.

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

добавим эти 6 методов:

buttonClick ()

inputTyped (evt)

generateTaskArray ()

saveTasks (задачи)

getTasks ()

removeTask (идентификатор)

давайте также добавим эту переменную в наше состояние:

Вход

Нам также нужно привязать наши функции к this.

pastebin.com/syx465hD

Приступим к добавлению функциональности.

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

это делает так, что когда пользователь вводит что-либо во входных данных, он выполняет функцию.

добавьте атрибут onClick в Add следующим образом:

Добавлять

когда пользователь нажимает кнопку, функция выполняется.

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

Я уже заранее написал интерфейс API localStorage, поэтому замените функции saveTasks, getTasks и removeTask следующими:

pastebin.com/G02cMPbi

начнем с функции inputTyped.

когда пользователь вводит, нам нужно изменить внутреннее значение ввода.

давайте сделаем это с помощью функции setState, предоставляемой с помощью response.

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

таким образом мы можем получить значение ввода.

как только это будет сделано, мы сможем работать с функцией buttonClick.

нам нужно добавить задачу в список задач. мы сначала извлекаем список задач из localStorage, редактируем его, а затем сохраняем. Затем мы вызываем повторную визуализацию списка задач, чтобы обновить его.

var taskList = this.getTasks ();

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

this.saveTasks (список задач);

this.generateTaskArray ();

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

теперь давайте поработаем над функцией generateTaskArray ().

нам нужно:

• получать задания
• создать массив компонентов задачи
• передать компоненты задачи для рендеринга

мы можем получить задачи и сохранить их в переменной с помощью getTasks ()

var tasks = getTasks (). tasks

Затем нам нужно создать массив и заполнить его.

pastebin.com/9gNXvNWe

теперь он должен работать.

ИСХОДНЫЙ КОД:

github.com/bluninja1234/todo_list_instructables

ДОПОЛНИТЕЛЬНЫЕ ИДЕИ:

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

CSS (тоже простой, напишите свой или используйте бутстрап)