Как научиться реагировать — дорожная карта от начинающего до продвинутого

kak nauchitsya reagirovat — dorozhnaya karta ot nachinayushhego do prodvinutogo

Эй, люди!

Это руководство для людей, которые начинают работать с 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

Это хорошо написанная статья, освещающая основы React. А также очень ясно объясняет конкретные темы.

Наконец, но не менее важно, узнайте, как подключаться к API с помощью приложений React:

Получение API с помощью React.js от Итана Джарелла

Начните строить какие-то проекты

  1. Простое приложение для дел
  2. Простое приложение-калькулятор
  3. Постройте корзину для покупок
  4. Показывайте статистику пользователей GitHub с помощью API GitHub

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

React Router помогает создавать маршруты для одностраничных программ. Он очень мощный и прост в использовании с программой React.

Чтобы начать:

Учебник React Router от Пола Шермана

React Router и поступление в SPA от Learn Code Academy

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

Этих статей предостаточно, чтобы начать работу с маршрутизацией React.

Проекты

  1. Простое применение CURD
  2. Клон Hacker News

Если вам действительно интересно узнать больше о маршрутизаторе, просмотрите следующее руководство:

Полное руководство React Router от React Training

Webpack

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:

API React-DOM от React

И следуйте приведенным ниже инструкциям, чтобы получить углубленные знания:

Рендеринг сервера React от Тайлера МакГинниса

Визуализация сервера маршрутизатора React от Roilan Salinas

Руководство по визуализации React на стороне сервера от Денниса Броцки

Redux

Redux — это библиотека JavaScript, предназначенная для поддержки состояния программы. Когда вы создаете сложную программу, это придаст дополнительные затраты на управление состояниями компонентов. Redux помогает сохранять все ваши состояния в одном источнике. И, конечно, React хорошо играет с Redux:)

Чтобы начать:

Учебник Redux от Learn Code Academy

Учебник Redux для начинающих от Валентино Гальярди

React Redux от CSS Tricks

Этих руководств более чем достаточно, чтобы начать работу с Redux. Однако я не могу не упомянуть нижеследующий учебник. Оно того стоит 🙂

Начало работы с Redux от Дэна Абрамова

Ресурсы

Прекрасный React

Если вам понравилась статья, не забудьте поделиться ею:)

Добавить комментарий

Ваш адрес email не будет опубликован.