В конце этой статьи мы вместе создадим приложение списка дел.

Быстрые заметки

  • В этой статье предполагается, что вы никогда раньше не программировали.
  • Мы сразу приступим к кодированию.
  • Шаги с пояснениями отмечены связанной звездочкой *.

Что такое React.js?

React.js — это библиотека JavaScript с открытым исходным кодом, созданная и поддерживаемая Facebook.

Эта библиотека позволяет создавать современные пользовательские интерфейсы, которые являются хорошо структурированными и интерактивными.

Зачем учиться реагировать?

Просто изучите, если вам интересно. Вот список компаний, использующих React.

Скорее всего, вы ежедневно взаимодействуете с пользовательским интерфейсом на основе React. Если вы используете Facebook, Netflix, Duolingo, Instagram, Paypal или Airbnb, вы смотрите на экран, созданный с помощью React.js.

Как только вы погрузитесь в React, вы, вероятно, поймете, почему он стал таким популярным выбором для фронтенд-разработки.

Опять же, эта статья предназначена для начинающих, которые никогда раньше не программировали.

Создание приложения Todo List

Часть I: Конфигурация

  1. Перейдите на 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.

Обратите внимание на каждый символ кода, который вы пишете. Всегда нужно быть точным и обдуманным.

  1. В своем HTML-окне введите код в приведенном ниже фрагменте: *

2. Теперь ваше окно будет выглядеть так:

3. Щелкните стрелку вниз в окне HTML:

4. Нажмите Свернуть HTML-редактор:

5. Теперь ваше окно будет выглядеть так. Нам нужно все пространство, которое мы можем получить для кода React.js (JavaScript):

Часть III: Создание компонента React

  1. Введите следующий код в окно JS: *

2. Теперь ваше окно будет выглядеть так:

3. Над этой строкой введите следующий код: *

4. Теперь ваш экран будет выглядеть так: * Обратите внимание на слово привет, которое отображается вашим компонентом React App.

Часть IV: Настройка поля ввода и кнопки

  1. Удалите слово привет и введите вместо него следующий код: *

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. Конструктор обновлений для обработки состояния задач

  1. Добавьте todos к начальному состоянию компонента. Обновите свой конструктор, чтобы он выглядел так: *

2. Теперь ваше окно будет выглядеть так:

Часть IX. Применение функции, которая добавляет элементы списка дел при нажатии кнопки добавления.

  1. В самом верху (выше 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. Обновление представления для отображения списка задач

  1. Оберните элементы input и button новыми элементами div. Обновите функцию рендеринга, чтобы она выглядела так:

2. Теперь ваше окно будет выглядеть так:

3. Снова обновите метод render, чтобы подготовить список дел внутри нового набора divs в элементе ul (неупорядоченный список): *

4. Ваше окно будет выглядеть как на картинке ниже. Обратите внимание, что наше поле ввода и кнопка исчезают, так как мы вводим ошибку, т. е. неопределенную ссылку на todoList:

5. Обновите метод render еще раз, чтобы присвоить ссылку todoList константе, представляющей сопоставленный список задач:

6. Теперь ваше окно будет выглядеть так:

7. Теперь вы сможете добавлять задачи в свой список в окне предварительного просмотра внизу.

Часть XI. Разделите код на отдельные компоненты.

  1. Скопируйте группу <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: Добавьте функцию для удаления элементов списка задач

  1. В компоненте 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: Стиль

  1. Обновите <ul> в компоненте TodoList, указав имя класса Bootstrap list-unstyled. Это удалит из списка довольно уродливые маркеры:

2. Весь ваш код JavaScript теперь должен выглядеть так:

3. Обновите элемент <input> с именем класса .form-control, а его родительский элемент <div> с именем класса .form-group:

4. Теперь весь ваш код JavaScript должен выглядеть так:

5. Перетащите окно CSS:

6. Теперь ваше окно должно выглядеть так:

7. Скопируйте и вставьте следующий код в окно css:

8. Ваше окно CodePen теперь будет выглядеть так:

9. Добавляйте и удаляйте задачи:

Надеюсь, это было весело. В будущем уроке мы узнаем, как создать это вне CodePen и в самом окне браузера.

Спасибо.