В конце этой статьи мы вместе создадим приложение списка дел.
Быстрые заметки
- В этой статье предполагается, что вы никогда раньше не программировали.
- Мы сразу приступим к кодированию.
- Шаги с пояснениями отмечены связанной звездочкой *.
Что такое React.js?
React.js — это библиотека JavaScript с открытым исходным кодом, созданная и поддерживаемая Facebook.
Эта библиотека позволяет создавать современные пользовательские интерфейсы, которые являются хорошо структурированными и интерактивными.
Зачем учиться реагировать?
Просто изучите, если вам интересно. Вот список компаний, использующих React.
Скорее всего, вы ежедневно взаимодействуете с пользовательским интерфейсом на основе React. Если вы используете Facebook, Netflix, Duolingo, Instagram, Paypal или Airbnb, вы смотрите на экран, созданный с помощью React.js.
Как только вы погрузитесь в React, вы, вероятно, поймете, почему он стал таким популярным выбором для фронтенд-разработки.
Опять же, эта статья предназначена для начинающих, которые никогда раньше не программировали.
Создание приложения Todo List
Часть I: Конфигурация
- Перейдите на https://codepen.io/ и в верхней части навигации нажмите:
Create
, а затемNew Pen
: *
2. Оказавшись внутри, нажмите Настройки в верхней панели навигации:
3. В окне настроек нажмите JavaScript:*
4. Найдите свое меню препроцессора JavaScript:*
5. Откройте меню препроцессора JavaScript и выберите Babel
: *
6. Окно настроек теперь будет выглядеть так:
7. Найдите меню Быстрое добавление в нижней части окна настроек:
8. Откройте меню Быстрое добавление и выберите React
: *
9. Окно настроек теперь будет выглядеть так:
10. Снова откройте меню Быстрое добавление и выберите React DOM
: *
11. Ваше окно настроек теперь будет выглядеть так: *
12. В том же окне настроек нажмите CSS на верхней панели выбора: *
13. Теперь ваше окно будет выглядеть так:
14. Внутри окна прокрутите вниз и найдите меню Быстрое добавление:
15. Откройте меню Быстрое добавление и выберите Bootstrap 4
: *
16. Окно настроек теперь будет выглядеть так: *
17. Закройте окно настроек. Вы вернетесь в главное окно редактирования кода: *
18. Щелкните стрелку вниз в окне CSS.
19. Выберите Свернуть редактор CSS:
20. Теперь ваш экран будет выглядеть так:
Часть II: Настройка HTML
Примечание. Это начало раздела кодирования в этом руководстве.
Пожалуйста, имейте в виду, что многие языки программирования чувствительны к регистру. JavaScript чувствителен к регистру, и большая часть кода в этом руководстве будет написана на JavaScript.
Обратите внимание на каждый символ кода, который вы пишете. Всегда нужно быть точным и обдуманным.
- В своем HTML-окне введите код в приведенном ниже фрагменте: *
2. Теперь ваше окно будет выглядеть так:
3. Щелкните стрелку вниз в окне HTML:
4. Нажмите Свернуть HTML-редактор:
5. Теперь ваше окно будет выглядеть так. Нам нужно все пространство, которое мы можем получить для кода React.js (JavaScript):
Часть III: Создание компонента React
- Введите следующий код в окно JS: *
2. Теперь ваше окно будет выглядеть так:
3. Над этой строкой введите следующий код: *
4. Теперь ваш экран будет выглядеть так: * Обратите внимание на слово привет, которое отображается вашим компонентом React App
.
Часть IV: Настройка поля ввода и кнопки
2. Теперь ваше окно будет выглядеть так: * Обратите внимание на поле ввода и кнопку, которые ваш компонент React App
теперь отображает в предварительном просмотре ниже.
Часть V: Настройка конструктора с начальным состоянием компонента
1. Добавьте этот код над вашим методом render
и ниже class App extends React.Component {
*
2. Теперь ваше окно будет выглядеть так:
Часть VI: Присвоение значения состояния полю ввода
1. Присвойте полю input
значение, соответствующее состоянию компонента. Обновите свой <input />
, чтобы он выглядел так: *
2. Теперь ваше окно будет выглядеть так:
Часть VII: Назначение функции для поля ввода для обновления состояния компонента
1. Определите функцию JavaScript, которая обновляет состояние компонента при вводе вводимого текста. Введите следующее над вашим методом render
: *
2. Теперь ваше окно будет выглядеть так:
3. Обновите свой input
, чтобы он использовал этот новый метод handleInputChange
в своем обработчике событий onChange
. Обновите свой input
, чтобы он выглядел так: *
4. Ваше окно будет выглядеть так:
5. Нам потребуется bind
нашу новую onChange
функцию в контексте нашего компонента. Обновите свой конструктор, чтобы он выглядел так: *
6. Ваше окно будет выглядеть так:
7. На данный момент мы сказали нашему полю ввода установить inputValue
состояния на то, что введено в наше поле ввода. Чтобы увидеть это в действии, мы можем распечатать состояние в нашем JSX *. Введите {this.state.inputValue}
прямо над закрывающим div
(то есть </div>
). Ваш экран должен выглядеть так:
8. Попробуйте ввести текст в поле ввода и посмотрите, что произойдет. Я напишу «щенок». Обратите внимание, что текст пишется одновременно рядом с полем ввода при вводе содержимого. Мой экран теперь выглядит так:
9. Удалите только что добавленный {this.state.inputValue}
. Ваш экран должен выглядеть так:
Часть VIII. Конструктор обновлений для обработки состояния задач
- Добавьте
todos
к начальному состоянию компонента. Обновите свой конструктор, чтобы он выглядел так: *
2. Теперь ваше окно будет выглядеть так:
Часть IX. Применение функции, которая добавляет элементы списка дел при нажатии кнопки добавления.
- В самом верху (выше
class App extends React.Component
) добавьте строку: *
2. Теперь ваше окно будет выглядеть так:
3. Добавьте следующий код о вашем методе render
: *
4. Теперь ваше окно будет выглядеть так:
5. Обновите элемент button
следующим кодом: *
6. Теперь ваше окно будет выглядеть так:
7. Аналогично шагу 5 части VII, нам нужно связать нашу функцию addTodo
с контекстом компонента в нашем конструкторе следующим образом:
8. Теперь ваше окно будет выглядеть так:
9. Теперь давайте установим, что происходит, открыв нашу консоль JavaScript. Я использую Mac OSX и Google Chrome, поэтому внутри Chrome я могу нажать command
+ option
+ j
, чтобы открыть консоль JS. Перейдите по этой ссылке, чтобы ознакомиться с хорошим списком команд, которые показывают, как открыть консоль в разных браузерах и операционных системах. Ваше окно будет выглядеть так с открытой консолью:
10. Теперь будем выводить в консоль информацию о состоянии нашего компонента. Непосредственно внутри вашего метода render()
введите следующее: *
11. Теперь ваше окно будет выглядеть, как на картинке ниже. Обратите внимание, что объект, представляющий состояние нашего компонента, выводится на консоль:
12. Мы можем развернуть и осмотреть этот объект в консоли, нажав на стрелку слева от объекта. Там мы увидим свойства объекта:
13. Добавьте текст в поле ввода и посмотрите, как свойство состояния inputValue
регистрируется в консоли при изменении ввода.
14. Нажмите кнопку добавления и обратите внимание, что массив todos
показывает одно значение.
15. Разверните объект state
и массив todos
, чтобы увидеть сам элемент задачи:
16. Удалите оператор console.log(this.state);
и закройте консоль. Ваше окно будет выглядеть так:
Часть X. Обновление представления для отображения списка задач
- Оберните элементы
input
иbutton
новыми элементамиdiv
. Обновите функцию рендеринга, чтобы она выглядела так:
2. Теперь ваше окно будет выглядеть так:
3. Снова обновите метод render
, чтобы подготовить список дел внутри нового набора div
s в элементе ul
(неупорядоченный список): *
4. Ваше окно будет выглядеть как на картинке ниже. Обратите внимание, что наше поле ввода и кнопка исчезают, так как мы вводим ошибку, т. е. неопределенную ссылку на todoList
:
5. Обновите метод render
еще раз, чтобы присвоить ссылку todoList
константе, представляющей сопоставленный список задач:
6. Теперь ваше окно будет выглядеть так:
7. Теперь вы сможете добавлять задачи в свой список в окне предварительного просмотра внизу.
Часть XI. Разделите код на отдельные компоненты.
- Скопируйте группу
<div>
с<ul>
внутри, то есть код ниже, который находится в строках 28–30.
2. Выше class App extends React.Component {
и ниже window.id = 0;
создайте компонент без сохранения состояния TodoList
, используя код, скопированный на предыдущем шаге внутри оператора return
. Это должно выглядеть так: *
3. Ваше окно должно выглядеть так:
4. Константа todoList
есть в нашем компоненте TodoList
, но она больше не определена, потому что this.state.todos
не имеет определения внутри нашего компонента TodoList
.
Переместите строку ниже из компонента App
в компонент TodoList
:
5. Теперь ваш компонент TodoList
должен выглядеть так:
6. Ваше окно должно выглядеть так:
7. this.state.todos
— это неопределенное значение в нашем компоненте TodoList
. Нам нужно передать это значение через реквизиты от родительского компонента App
дочернему компоненту TodoList
. Обновите функцию render
в компоненте App
, чтобы она выглядела, как показано ниже. Обратите внимание, что мы включаем компонент TodoList
в метод рендеринга компонента App
и передаем ему реквизит с именем todos
:
8. Ваше окно будет выглядеть так:
9. Подводя итог, весь ваш код JavaScript должен выглядеть следующим образом:
10. Теперь, когда мы передаем реквизиты нашему компоненту TodoList
, мы можем обновить компонент TodoList
, чтобы получить реквизит todos
следующим образом:
11. Теперь весь ваш JS-код должен выглядеть так:
Часть XII: Добавьте функцию для удаления элементов списка задач
- В компоненте
App
добавьте функциюremoveTodo
под функциейaddTodo
, которая выглядит следующим образом:
2. Теперь ваше окно будет выглядеть так:
3. Передайте свою функцию removeTodo
компоненту TodoList
в качестве реквизита следующим образом:
4. Теперь ваше окно будет выглядеть так:
5. Аналогично шагу 5 части VII и шагу 7 части IX нам нужно привязать removeTodo
к контексту нашего компонента App
в конструкторе. Конструктор компонента App
должен выглядеть так:
6. Теперь ваше окно будет выглядеть так:
7. Обновите компонент TodoList
, чтобы он получил функцию prop removeTodo
и использовал ее в <button>
внутри вашего todo <li>
следующим образом:
9. Ваш код JavaScript должен выглядеть так:
10. Теперь вы сможете добавлять и удалять задачи из списка задач.
Часть XIII: Стиль
- Обновите
<ul>
в компонентеTodoList
, указав имя класса Bootstraplist-unstyled
. Это удалит из списка довольно уродливые маркеры:
2. Весь ваш код JavaScript теперь должен выглядеть так:
3. Обновите элемент <input>
с именем класса .form-control
, а его родительский элемент <div>
с именем класса .form-group
:
4. Теперь весь ваш код JavaScript должен выглядеть так:
5. Перетащите окно CSS:
6. Теперь ваше окно должно выглядеть так:
7. Скопируйте и вставьте следующий код в окно css:
8. Ваше окно CodePen теперь будет выглядеть так:
9. Добавляйте и удаляйте задачи:
Надеюсь, это было весело. В будущем уроке мы узнаем, как создать это вне CodePen и в самом окне браузера.
Спасибо.