Привет ребят!
Это руководство написано для друзей, которые плохо знакомы с React, и в каждом разделе я тщательно собрал лучшие видео и статьи, чтобы облегчить нам обучение.
Примечание: я не имею никакого отношения к упомянутым ниже сайтам, чисто мои личные мысли.
Предварительные знания
- Базовое понимание HTML, CSS и JavaScript
- Базовое понимание возможностей ES6, вот статьястатьяПредставляя функции ES6, с самого начала вы должны знать как минимум следующие функции: 1.Let, 2.Const, 3.Стрелочные функции, 4.Импорт и экспорт, 5.Классы.
- Основное использование npm
Готов начать
Вы можете использовать онлайн-редактор кода для практики, или вы можете использоватьCreate React App
я соответственноJSFiddleа такжеCodepenСоздайте среду разработки на
Чтобы освоить все основы React, вы можете начать со следующих руководств:
РеагироватьReact official documentation
Кент С. ДоддсBeginners guide to React
Самер БунаFundamentals of React
Теперь вы должны понимать основы React, которых нам достаточно для разработки простого веб-приложения с использованием React.
Итак, теперь вы можете взглянуть на официальное руководство по React:React Official tutorial, это хорошая статья, которая охватывает основы React и очень четко объясняет некоторые конкретные темы.
И последнее, но не менее важное: узнайте, как подключить ваше приложение React к API:
Итан ДжарреллFetching API with React.js
начать писать несколько проектов
- Простое приложение для дел
- Простое приложение-калькулятор
- Создайте корзину
- Используйте API Github для отображения пользовательской статистики Github.
React Router
React Router помогает вам создавать маршруты для вашего одностраничного приложения, он очень мощный и простой в использовании.
Начните немедленно:
Пол ШерманReact Router tutorial
Изучите Академию кодаReact Router and intro to SPA
Scotch.ioRouting React apps
Этих статей достаточно, чтобы начать работу с маршрутизацией React.
проект
- Простое CRUD-приложение
- Клон Хакер Новости
Если вы действительно заинтересованы в изучении Router, вы можете ознакомиться со следующими руководствами:
Обучение РеагированиюПолное руководство по React Router
Webpack
Webpack — известный сборщик модулей JavaScript, который помогает вашему проекту поддерживать зависимости в статических файлах, поэтому разработчикам не нужно этого делать.
Наряду с Webpack есть загрузчики, которые помогают проектам выполнять определенные задачи.
Чтобы узнать больше о Webpack, следуйте приведенному ниже руководству:
Эндрю РэйWhen and why to use Webpack
Изучите Академию кодаWebpack tutorial
Для создания собственной среды реагирования с помощью WebPack вы можете взглянуть на следующий репозиторий GitHub:
Ханиф РошанReact SPA template
Приведенного выше руководства достаточно, чтобы начать работу с Webpack, но для более глубокого понимания вы можете ознакомиться со следующими руководствами:
ВыжитьJSWebpack introduction
рендеринг сервера
Серверный рендеринг — одна из самых крутых функций React, которую можно использовать с любой серверной технологией.
Серверный рендеринг React (SSR) помогает создавать компоненты на сервере и отображать их в виде HTML в браузере.React вступает в игру, когда все модули JavaScript загружаются в браузер. Простой!
Во-первых, взгляните на API React-DOM:
РеагироватьReact-DOM API
Для более глубокого понимания вы можете следовать следующим руководствам:
Тайлер МакГиннисReact server rendering
Ройлан СалинасReact router server rendering
Деннис БроцкиReact Server side rendering guide
Redux
Redux — это библиотека JavaScript, разработанная для поддержания состояния приложения. При создании сложных приложений возникают дополнительные затраты на управление состоянием между компонентами. Redux помогает вам хранить все состояние в одном источнике. Конечно, React хорошо работает с Redux!
Начинать:
Изучите Академию кодаRedux tutorial
Валентино ГальярдиRedux tutorial for beginners
CSS-трюкиReact Redux
Этих руководств достаточно, чтобы начать работу с Redux. Тем не менее, я также не мог не упомянуть учебник ниже. Это стоит того:
Дэн АбрамовGetting started with Redux
ресурс
Если вам нравится эта статья, пожалуйста, не забудьте поделиться этим