Создаём библиотеку компонентов с помощью React и TypeScript

Подробное руководство, как создать собственную библиотеку, состоящую из одного простого компонента — кнопки с помощью Vite, React и TypeScript. В статье используется Storybook — это библиотека UI, которая позволяет документировать и собирать компоненты на JS.

Также автор объясняет, как подготовить уже готовую библиотеку для публикации в реестре npm:


https://habr.com/ru/company/timeweb/blog/691338/

#typescript #react

Изучаем 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

React + Typescript — что нужно знать?

Шпаргалка для тех, кто уже знаком с React, но только начинает изучать TypeScript. Основные темы:

— типизация пропов компонентов,
— функциональные компоненты и хуки,
— типы или интерфейсы и их сравнение,
— решение часто встречающихся багов.

Сохраняйте в закладки, чтобы не потерять:

https://my-js.org/docs/cheatsheet/react-typescript/

#react

​Создаё‎м 3 проекта на React за 8 часов

В этом видеоуроке показывается, как реализовать — клон YouTube, профессиональное приложение для фитнес-упражнений и Lyriks — улучшенную версию Spotify. Вы научитесь создавать современные пользовательские интерфейсы с помощью Tailwind CSS, управлять состоянием с помощью React Context API, а также получать данные используя RapidAPI.

В конце курса у вас будет 3 профессиональных портфолио:

https://youtu.be/dyFVwXROzZk

#react

Как фронтендеру стать мобильным разработчиком?

Существует мнение, что фронтенд-разработчик, который умеет писать на React, может создать простое Android-приложение.

Герой статьи сравнил концепции и функции в Jetpack Compose и React, чтобы выяснить, насколько они отличаются:

https://habr.com/ru/company/samokat_tech/blog/707038/

#react #frontend

​Создаём приложение для чата с помощью ReactJS и Firebase

Небольшое приложение со входом в аккаунт через учётную запись Google с помощью Firebase Authentication (SDK). Это инструмент Firebase, который поддерживает различные методы аутентификации, такие как пароли, номера телефонов, Google, Facebook, Twitter, GitHub и другие.

Все сообщения из чата пользователя хранятся в облаке Firestore. Cloud Firestore сохраняет данные в документах в виде пар ключ-значение.

В этой статье вы найдёте пошаговое руководство, как настроить проект в Firebase и React, и создадите полноценное приложение для чата:

https://www.freecodecamp.org/news/building-a-real-time-chat-app-with-reactjs-and-firebase/

#react

React: проблемы, с которыми часто сталкиваются разработчики

Герой статьи подробно разобрал самые распространённые ошибки, с которыми сталкиваются не только начинающие, но и опытные разработчики, а именно:

1. Проблема передачи допустимого ключа массивам элементов.
2. Рендеринг и мутирование состояния.
3. Порядок компонентов и их оптимизация.

Причины и способы решения этих проблем — в статье:

https://nuancesprog.ru/p/16664/

#react

​Работа с картами на React с помощью Pigeon Maps и Mapbox

Разработчики из Evil Martians делятся подробный гайдом, как создать красивую карту для веб-приложения на React. В статье разбираются все шаги реализации проекта: дизайн, концепция, сбор данных, внедрение логики и многое другое:

https://evilmartians.com/chronicles/how-to-build-a-better-react-map-with-pigeon-maps-and-mapbox

#react

5 библиотек для React-разработчика, которые стоит попробовать

1. React Joyride помогает создать пошаговое руководство и интерактивную экскурсию по приложению.

2. React Beautiful DnD — для перетаскивания (drag and drop) с поддержкой мыши и клавиатуры. Также библиотека поддерживает вертикальные, горизонтальные передвижения и между списками.

3. Enzyme — это библиотека JavaScript, созданная командой AirBnB для тестирования компонентов React.

4. React Spring — популярная библиотека для анимаций.

5. Styled Components используется для стилизации приложений. Позволяет отслеживать компоненты и добавлять только их стили.

#react

​Создаём клон Netflix на React

В этом видеоуроке вы создадите приложение, которое похоже на популярную платформу с использованием React, Redux Toolkit, Nodejs и MongoDB для хранения данных. А с помощью TMDB API можно получить весь список фильмов и жанров:

https://youtu.be/HgaJW2I4Mbk

#react

​React: тестируем компоненты с помощью Jest и Testing Library

В этой статье вы сможете найти множество полезной информации:
— создание шаблона React-приложения с помощью Vite;
— создание компонента для получения приветствия от сервера;
— установка и настройка Jest, Testing Library;
— тестирование компонента с помощью снимков Jest, а также Testing Library, используя стандартные возможности, кастомный рендер и кастомные запросы.

#js #react

React Router: что это и как использовать

React Router – это библиотека для навигации между разными частями веб-приложения, созданными на React. Она помогает создавать одностраничные приложения, которые при переходе подгружают не всю страницу, а только необходимые компоненты.

А узнать, как её установить и создать свои первые простые и вложенные маршруты вы сможете узнать в этой полезной статье.

#js #веб #react

​​React Native vs. Flutter: что лучше?

Если только планируете вливаться в мобильную разработку, то можете стать перед выбором стека. Flutter и React Native — два основных инструмента для создания кроссплатформенных мобильных приложений. Оба позволяют разрабатывать приложения для iOS, Android и веб из одной кодовой базы.

Flutter предоставляет обширную библиотеку виджетов и плагинов, в то время как React Native — сторонние библиотеки и базовые компоненты.

Держите на заметку статью, где автор на практическом примере показывает разницу этих двух инструментов. Он создал чат-приложение с использованием Firebase в качестве бэкенда. React Native использует JavaScript и TypeScript, в то время как Flutter — язык Dart, оптимизированный для компиляции на разные платформы.

#mobile #react #flutter

​​Учим React за месяц

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

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

@prog_point #web #frontend #react

Курс по React для начинающих

Курс начинается с основ и постепенно переходит к более сложным темам, охватывая всё от установки окружения до взаимодействия с бекендом.

Тут рассказывают, что такое React и как создавать приложения, используя Create React App и Vite. Среди основных тем, разобранных в этом курсе: props, state, события, стилизацию, создание пользовательских хуков и продвинутое использование состояний и хуков, таких как useRef, useEffect и useCallback.

https://youtu.be/kz23xxukY5s?si=hViyMF55q28nDlVh

#курс #react #web #ru