Як навчитися реагувати - дорожня карта від початківця до просунутого

Гей, люди!

Цей посібник призначений для людей, які починають з React. Я ретельно підготував найкращі відео та статті в кожному розділі, щоб полегшити навчання.

Примітка: Мене не пов’язує жоден із веб-сайтів, згаданих нижче. Це суто мій погляд.

Передумови

  1. Базові знання HTML, CSS та JavaScript.
  2. Базове розуміння особливостей ES6. Ось моя стаття, що пояснює деякі особливості ES6.

    Для початку слід принаймні знати такі особливості:

    1. Нехай

    2. Конст

    3. Функції стрілки

    4. Імпорт та експорт

    5. Заняття

  3. Базове розуміння використання npm.

Починаємо

Ви можете використовувати онлайн-редактори коду, щоб потренуватися, або ви можете використовувати Create React App.

Я налаштував середовище розробки в JSFiddle і в Codepen.

Щоб зрозуміти всі основи React, ви можете розпочати з таких підручників:

Офіційна документація React від React

Посібник для початківців React від Кента К. Доддса

Основи реакції Самера Буни

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

Тепер погляньте на офіційний посібник React:

React Офіційний посібник від React

Це добре написана стаття, що висвітлює основи React. І це також дуже чітко пояснює конкретні теми.

Нарешті, але не менш важливо, дізнайтеся, як підключитися до API за допомогою програм React:

Отримання API за допомогою React.js від Етана Джарелла

Почніть будувати кілька проектів

  1. Простий додаток
  2. Простий додаток для калькулятора
  3. Побудуйте кошик для покупок
  4. Відображення статистики користувача GitHub за допомогою API GitHub

Маршрутизатор React

React Router допомагає створювати маршрути до ваших односторінкових додатків. Це дуже потужний і простий у використанні додаток React.

Для початку:

Підручник з React Router Пола Шермана

Зреагуйте на маршрутизатор та вступ до SPA від Learn Code Academy

Маршрутизація програм React від Scotch.io

Цих статей більш ніж достатньо для того, щоб ви розпочали роботу з React-маршрутизацією.

Проекти

  1. Простий додаток CURD
  2. Клон новин хакерів

Якщо вам дійсно цікаво дізнатись більше про маршрутизатор, перегляньте наступний посібник:

Повний посібник React Router від React Training

Веб-пакет

Webpack - це відомий пакет модулів JavaScript. Webpack допомагає підтримувати залежності як статичні файли для вашого проекту, тому розробникам не потрібно це робити.

Webpack також постачається з навантажувачами. Завантажувачі допомагають виконувати конкретні завдання навколо вашого проекту.

Щоб дізнатися набагато більше про Webpack, дотримуйтесь наступних посібників.

Коли і навіщо використовувати Webpack Ендрю Рей

Підручник з Webpack від Learn Code Academy

Щоб налаштувати локальне середовище React за допомогою Webpack, ви можете звернутися до такого репозиторію GitHub:

Шаблон React SPA від Ханіфа Рошана

Я думаю, що наведених вище посібників достатньо, щоб розпочати роботу з Webpack. Однак, щоб отримати поглиблені знання, ви можете звернутися до таких посібників:

Вступ до Webpack від SurviveJS

Офіційні документи Webpack

Візуалізація сервера

Візуалізація сервера - одна з найцікавіших функцій React. Його можна використовувати з будь-якою із фонових технологій.

Візуалізація на стороні сервера (SSR) у React допомагає створювати компоненти на сервері та відображати їх як HTML у вашому браузері. І коли всі модулі JavaScript завантажуються у браузер, React виходить на сцену. Просто!

Перш за все, погляньте на React-DOM API:

React-DOM API від React

І дотримуйтесь наведених нижче посібників, щоб отримати поглиблені знання:

Реагування сервера на рендеринг Тайлера Макгінніса

Візуалізація сервера реагування маршрутизатора Ройланом Салінасом

Посібник з рендерингу на стороні сервера React, Денніс Броцкі

Redux

Redux - це бібліотека JavaScript, розроблена для підтримки станів додатків. Коли ви створюєте складний додаток, він додасть накладні витрати для управління станами між компонентами. Redux допомагає зберігати всі ваші штати в одному джерелі. І звичайно, React добре грає з Redux :)

Для початку:

Підручник Reduxвід Learn Code Academy

Підручник Redux для початківців Валентино Гальярді

React Redux від CSS Tricks

Цих посібників більш ніж достатньо для початку роботи з Redux. Однак я не можу не втриматися, щоб не згадати і підручник нижче. Воно того варто :)

Початок роботи з Redux Ден Абрамов

Ресурси

Чудова реакція

Якщо вам сподобалась стаття, не забудьте поділитися нею :)