Хей, хора!
Това ръководство е за хора, които започват с React. Подготвил съм внимателно най-добрите видеоклипове и статии във всеки раздел, за да улесня обучението.
Забележка: Не съм свързан с нито един от уебсайтовете, споменати по-долу. Това е чисто моето виждане.
Предпоставки
- Основни познания по HTML, CSS и JavaScript.
- Основно разбиране на характеристиките на ES6. Ето моята статия, обясняваща някои от характеристиките на ES6.
За да започнете, трябва поне да знаете следните характеристики:
1. Нека
2. Конст
3. Функции със стрелки
4. Внос и износ
5. Класове
- Основно разбиране за това как да използвате npm.
Приготвяме се да започнем
Можете да използвате онлайн редактори на кодове, за да практикувате, или можете да използвате Create React App.
Настроил съм среда за разработка в JSFiddle и в Codepen.
За да разберете всички основи на React, можете да започнете със следните уроци:
React официална документация от React
Ръководство за начинаещи към React от Кент С. Додс
Основи на реакцията от Самер Буна
Досега трябва да имате основна представа за основите на React. Достатъчно е да започнете да разработвате прости уеб приложения в React.
Сега погледнете официалния урок на React:
React Официален урок от React
Това е добре написана статия, обхващаща основите на React. И също така много ясно обяснява конкретните теми.
Не на последно място научете как да се свързвате с API с React приложения:
Извличане на API с React.js от Ethan Jarrell
Започнете да изграждате някои проекти
- Просто todo-приложение
- Просто приложение за калкулатор
- Изградете количка за пазаруване
- Показване на потребителските статистики на GitHub с помощта на GitHub API
React Router
React Router ви помага да създавате маршрути до вашите приложения за една страница. Той е много мощен и лесен за използване с вашето приложение React.
За да започнете:
Урок на React Router от Пол Шърман
React Router и въведение в SPA от Learn Code Academy
Рутиране на React приложения от Scotch.io
Тези статии са повече от достатъчни, за да започнете с React routing.
Проекти
- Просто приложение на CURD
- Клон на хакерски новини
Ако наистина се интересувате да научите много за рутера, вижте следното ръководство:
Пълно ръководство на 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 от Дан Абрамов
Ресурси
Страхотна реакция
Ако харесвате статията, не забравяйте да я споделите :)