Изучаем React за 30 дней

React — популярная JavaScript-библиотека, которая используется при создании веб-сайтов, мобильных приложений и даже игр.

Если вы давно хотели изучить React, то можно начать с 30DaysOfReact — это руководство как для начинающих, так и для опытных разработчиков JavaScript, где собраны задачи и материалы для изучения на каждый день:

Репозиторий: https://github.com/Asabeneh/30-Days-Of-React

#react

​Реализуем текстовый редактор на React

В статье подробно описываются шаги по реализации кастомного текстового редактор, в котором:

— поддерживаются интерактивные элементы и хоткеи,
— можно форматировать стили элементов и текста,
— и импортировать/экспортировать контент в HTML.

Всё это можно реализовать с помощью React и пакета Draft.js. Как? Подробнее в статье:

https://habr.com/ru/company/kts/blog/576682/

#react

​Пет-проект: пишем игру на JS/TS и развиваем навык работы с кодом

Мини-игра, в которой нужно как можно быстрее напечатать буквы, знаки препинания и воспроизвести фразу. Для реализации игры, кроме TypeScript, понадобится установить библиотеку Webpack и React.

В статье — пошаговое руководство, как создать игру, добавить словарь с цитатами, счётчик букв и знаков, а также конфетти в случае победы:

https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/

#js #react

Разработка пользовательских хуков для React

Хуки впервые появились ещё‎ в React 16.8 и позволили расширить возможности функциональных компонентов. Структура приложений, построенных на использовании хуков, оказалась настолько удобной, что хуки стали основой React-разработки.

Если вы только начинаете знакомиться с React и хуками, то эта статья поможет вам разобраться в этой важной и актуальной теме максимально доступным и понятным языком:

https://tproger.ru/articles/razrabotka-polzovatelskih-hukov-dlja-react/

#react

Как создать интересные 3D-сцены с помощью React Three Fiber

В этой статье разбирается React Three Fiber для создания анимированной 3D-визуализации. По сути, это просто компонент, который вы можете поместить в любое приложение React.

С помощью этого руководства вы узнаете, как настраивать сцены, научитесь добавлять освещение и включение эффектов постобработки:

https://varun.ca/modular-webgl/

#react

Попробуйте создать собственный React

Написать собственную библиотеку непросто. Особенно, когда речь заходит о крупных фреймворках. В этом руководстве автор пошагово объясняет, как переписать React с нуля, следуя разработанной архитектуре реального кода React, но без всех оптимизаций и редко использующихся методов:

https://pomb.us/build-your-own-react/

#react