Создаём библиотеку компонентов с помощью React и TypeScript
Подробное руководство, как создать собственную библиотеку, состоящую из одного простого компонента — кнопки с помощью Vite, React и TypeScript. В статье используется Storybook — это библиотека UI, которая позволяет документировать и собирать компоненты на JS.
Также автор объясняет, как подготовить уже готовую библиотеку для публикации в реестре npm:
https://habr.com/ru/company/timeweb/blog/691338/
#typescript #react
Подробное руководство, как создать собственную библиотеку, состоящую из одного простого компонента — кнопки с помощью 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 — популярная 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
В статье подробно описываются шаги по реализации кастомного текстового редактор, в котором:
— поддерживаются интерактивные элементы и хоткеи,
— можно форматировать стили элементов и текста,
— и импортировать/экспортировать контент в 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
Мини-игра, в которой нужно как можно быстрее напечатать буквы, знаки препинания и воспроизвести фразу. Для реализации игры, кроме 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
Хуки впервые появились ещё в React 16.8 и позволили расширить возможности функциональных компонентов. Структура приложений, построенных на использовании хуков, оказалась настолько удобной, что хуки стали основой React-разработки.
Если вы только начинаете знакомиться с React и хуками, то эта статья поможет вам разобраться в этой важной и актуальной теме максимально доступным и понятным языком:
https://tproger.ru/articles/razrabotka-polzovatelskih-hukov-dlja-react/
#react
This media is not supported in your browser
VIEW IN TELEGRAM
Как создать интересные 3D-сцены с помощью React Three Fiber
В этой статье разбирается React Three Fiber для создания анимированной 3D-визуализации. По сути, это просто компонент, который вы можете поместить в любое приложение React.
С помощью этого руководства вы узнаете, как настраивать сцены, научитесь добавлять освещение и включение эффектов постобработки:
https://varun.ca/modular-webgl/
#react
В этой статье разбирается React Three Fiber для создания анимированной 3D-визуализации. По сути, это просто компонент, который вы можете поместить в любое приложение React.
С помощью этого руководства вы узнаете, как настраивать сцены, научитесь добавлять освещение и включение эффектов постобработки:
https://varun.ca/modular-webgl/
#react
Попробуйте создать собственный React
Написать собственную библиотеку непросто. Особенно, когда речь заходит о крупных фреймворках. В этом руководстве автор пошагово объясняет, как переписать React с нуля, следуя разработанной архитектуре реального кода React, но без всех оптимизаций и редко использующихся методов:
https://pomb.us/build-your-own-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
Шпаргалка для тех, кто уже знаком с 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
В этом видеоуроке показывается, как реализовать — клон 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
Существует мнение, что фронтенд-разработчик, который умеет писать на 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
Небольшое приложение со входом в аккаунт через учётную запись 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