Как да се научим да реагираме - Пътна карта от начинаещ до напреднал

Програмиране

Хей, хора!

Това ръководство е за хора, които започват с 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 от Ethan Jarrell

Започнете да изграждате някои проекти

  1. Просто todo-приложение
  2. Просто приложение за калкулатор
  3. Изградете количка за пазаруване
  4. Показване на потребителските статистики на GitHub с помощта на GitHub API

React Router

React Router ви помага да създавате маршрути до вашите приложения за една страница. Той е много мощен и лесен за използване с вашето приложение React.

За да започнете:

Урок на React Router от Пол Шърман

React Router и въведение в SPA от Learn Code Academy

Рутиране на React приложения от Scotch.io

Тези статии са повече от достатъчни, за да започнете с React routing.

Проекти

  1. Просто приложение на CURD
  2. Клон на хакерски новини

Ако наистина се интересувате да научите много за рутера, вижте следното ръководство:

Пълно ръководство на React Router от React Training

Webpack

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

Webpack се предлага и с товарачи. Товарачите помагат за изпълнението на конкретни задачи около вашия проект.

За да научите много повече за Webpack, следвайте следните уроци.

Кога и защо да използваме Webpack от Andrew Ray

Урок за Webpack от Learn Code Academy

За да настроите локалната си среда React с помощта на Webpack, можете да се обърнете към следното GitHub репо:

Шаблон React SPA от Ханиф Рошан

Мисля, че горните уроци са достатъчни, за да започнете с Webpack. За да получите задълбочени познания обаче, можете да се обърнете към следните ръководства:

Въведение в уебпак от SurviveJS

Официални документи на Webpack

Предаване на сървър

Рендерирането на сървъри е една от най-страхотните функции в React. Може да се използва с всяка от back-end технологиите.

Рендерирането от страна на сървъра (SSR) в React ви помага да създавате компоненти в сървъра и да го правите като HTML във вашия браузър. И когато всички модули на JavaScript се изтеглят в браузъра, React излиза на сцената. Просто!

На първо място, разгледайте API на React-DOM:

React-DOM API от React

И следвайте уроците по-долу, за да получите задълбочени познания:

Реагиране на сървърно изобразяване от Тайлър Макгинис

Реагиране на сървърно изобразяване на рутер от Roilan Salinas

Ръководство за рендиране на React Server от Денис Броцки

Redux

Redux е JavaScript библиотека, разработена за поддържане на състояния на приложенията. Когато изграждате сложно приложение, то ще добави режийни за управление на състояния между компонентите. Redux ви помага да съхранявате всичките си състояния в един източник. И разбира се, React играе добре с Redux :)

За да започнете:

Урок за Reduxот Learn Code Academy

Redux урок за начинаещи от Valentino Gagliardi

React Redux от CSS трикове

Тези уроци са повече от достатъчни за започване на работа с Redux. Въпреки това, не мога да се противопоставя на споменаването на урока по-долу. Заслужава си :)

Първи стъпки с Redux от Дан Абрамов

Ресурси

Страхотна реакция

Ако харесвате статията, не забравяйте да я споделите :)