Попробуйте создать собственный React
Написать собственную библиотеку непросто. Особенно, когда речь заходит о крупных фреймворках. В этом руководстве автор пошагово объясняет, как переписать React с нуля, следуя разработанной архитектуре реального кода React, но без всех оптимизаций и редко использующихся методов:
https://pomb.us/build-your-own-react/
#react
Написать собственную библиотеку непросто. Особенно, когда речь заходит о крупных фреймворках. В этом руководстве автор пошагово объясняет, как переписать React с нуля, следуя разработанной архитектуре реального кода React, но без всех оптимизаций и редко использующихся методов:
https://pomb.us/build-your-own-react/
#react
December 15, 2022
React + Typescript — что нужно знать?
Шпаргалка для тех, кто уже знаком с React, но только начинает изучать TypeScript. Основные темы:
— типизация пропов компонентов,
— функциональные компоненты и хуки,
— типы или интерфейсы и их сравнение,
— решение часто встречающихся багов.
Сохраняйте в закладки, чтобы не потерять:
https://my-js.org/docs/cheatsheet/react-typescript/
#react
Шпаргалка для тех, кто уже знаком с React, но только начинает изучать TypeScript. Основные темы:
— типизация пропов компонентов,
— функциональные компоненты и хуки,
— типы или интерфейсы и их сравнение,
— решение часто встречающихся багов.
Сохраняйте в закладки, чтобы не потерять:
https://my-js.org/docs/cheatsheet/react-typescript/
#react
December 26, 2022
Создаём 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
January 15, 2023
Как фронтендеру стать мобильным разработчиком?
Существует мнение, что фронтенд-разработчик, который умеет писать на 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
January 23, 2023
Создаём приложение для чата с помощью 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
January 29, 2023
React: проблемы, с которыми часто сталкиваются разработчики
Герой статьи подробно разобрал самые распространённые ошибки, с которыми сталкиваются не только начинающие, но и опытные разработчики, а именно:
1. Проблема передачи допустимого ключа массивам элементов.
2. Рендеринг и мутирование состояния.
3. Порядок компонентов и их оптимизация.
Причины и способы решения этих проблем — в статье:
https://nuancesprog.ru/p/16664/
#react
Герой статьи подробно разобрал самые распространённые ошибки, с которыми сталкиваются не только начинающие, но и опытные разработчики, а именно:
1. Проблема передачи допустимого ключа массивам элементов.
2. Рендеринг и мутирование состояния.
3. Порядок компонентов и их оптимизация.
Причины и способы решения этих проблем — в статье:
https://nuancesprog.ru/p/16664/
#react
February 9, 2023
Работа с картами на React с помощью Pigeon Maps и Mapbox
Разработчики из Evil Martians делятся подробный гайдом, как создать красивую карту для веб-приложения на React. В статье разбираются все шаги реализации проекта: дизайн, концепция, сбор данных, внедрение логики и многое другое:
https://evilmartians.com/chronicles/how-to-build-a-better-react-map-with-pigeon-maps-and-mapbox
#react
Разработчики из Evil Martians делятся подробный гайдом, как создать красивую карту для веб-приложения на React. В статье разбираются все шаги реализации проекта: дизайн, концепция, сбор данных, внедрение логики и многое другое:
https://evilmartians.com/chronicles/how-to-build-a-better-react-map-with-pigeon-maps-and-mapbox
#react
February 19, 2023
5 библиотек для React-разработчика, которые стоит попробовать
1. React Joyride помогает создать пошаговое руководство и интерактивную экскурсию по приложению.
2. React Beautiful DnD — для перетаскивания (drag and drop) с поддержкой мыши и клавиатуры. Также библиотека поддерживает вертикальные, горизонтальные передвижения и между списками.
3. Enzyme — это библиотека JavaScript, созданная командой AirBnB для тестирования компонентов React.
4. React Spring — популярная библиотека для анимаций.
5. Styled Components используется для стилизации приложений. Позволяет отслеживать компоненты и добавлять только их стили.
#react
1. React Joyride помогает создать пошаговое руководство и интерактивную экскурсию по приложению.
2. React Beautiful DnD — для перетаскивания (drag and drop) с поддержкой мыши и клавиатуры. Также библиотека поддерживает вертикальные, горизонтальные передвижения и между списками.
3. Enzyme — это библиотека JavaScript, созданная командой AirBnB для тестирования компонентов React.
4. React Spring — популярная библиотека для анимаций.
5. Styled Components используется для стилизации приложений. Позволяет отслеживать компоненты и добавлять только их стили.
#react
March 10, 2023
Создаём клон Netflix на React
В этом видеоуроке вы создадите приложение, которое похоже на популярную платформу с использованием React, Redux Toolkit, Nodejs и MongoDB для хранения данных. А с помощью TMDB API можно получить весь список фильмов и жанров:
https://youtu.be/HgaJW2I4Mbk
#react
В этом видеоуроке вы создадите приложение, которое похоже на популярную платформу с использованием React, Redux Toolkit, Nodejs и MongoDB для хранения данных. А с помощью TMDB API можно получить весь список фильмов и жанров:
https://youtu.be/HgaJW2I4Mbk
#react
March 19, 2023
React: тестируем компоненты с помощью Jest и Testing Library
В этой статье вы сможете найти множество полезной информации:
— создание шаблона React-приложения с помощью Vite;
— создание компонента для получения приветствия от сервера;
— установка и настройка Jest, Testing Library;
— тестирование компонента с помощью снимков Jest, а также Testing Library, используя стандартные возможности, кастомный рендер и кастомные запросы.
#js #react
В этой статье вы сможете найти множество полезной информации:
— создание шаблона React-приложения с помощью Vite;
— создание компонента для получения приветствия от сервера;
— установка и настройка Jest, Testing Library;
— тестирование компонента с помощью снимков Jest, а также Testing Library, используя стандартные возможности, кастомный рендер и кастомные запросы.
#js #react
November 26, 2023
React Router: что это и как использовать
React Router – это библиотека для навигации между разными частями веб-приложения, созданными на React. Она помогает создавать одностраничные приложения, которые при переходе подгружают не всю страницу, а только необходимые компоненты.
А узнать, как её установить и создать свои первые простые и вложенные маршруты вы сможете узнать в этой полезной статье.
#js #веб #react
React Router – это библиотека для навигации между разными частями веб-приложения, созданными на React. Она помогает создавать одностраничные приложения, которые при переходе подгружают не всю страницу, а только необходимые компоненты.
А узнать, как её установить и создать свои первые простые и вложенные маршруты вы сможете узнать в этой полезной статье.
#js #веб #react
December 13, 2023
React Native vs. Flutter: что лучше?
Если только планируете вливаться в мобильную разработку, то можете стать перед выбором стека. Flutter и React Native — два основных инструмента для создания кроссплатформенных мобильных приложений. Оба позволяют разрабатывать приложения для iOS, Android и веб из одной кодовой базы.
Flutter предоставляет обширную библиотеку виджетов и плагинов, в то время как React Native — сторонние библиотеки и базовые компоненты.
Держите на заметку статью, где автор на практическом примере показывает разницу этих двух инструментов. Он создал чат-приложение с использованием Firebase в качестве бэкенда. React Native использует JavaScript и TypeScript, в то время как Flutter — язык Dart, оптимизированный для компиляции на разные платформы.
#mobile #react #flutter
Если только планируете вливаться в мобильную разработку, то можете стать перед выбором стека. Flutter и React Native — два основных инструмента для создания кроссплатформенных мобильных приложений. Оба позволяют разрабатывать приложения для iOS, Android и веб из одной кодовой базы.
Flutter предоставляет обширную библиотеку виджетов и плагинов, в то время как React Native — сторонние библиотеки и базовые компоненты.
Держите на заметку статью, где автор на практическом примере показывает разницу этих двух инструментов. Он создал чат-приложение с использованием Firebase в качестве бэкенда. React Native использует JavaScript и TypeScript, в то время как Flutter — язык Dart, оптимизированный для компиляции на разные платформы.
#mobile #react #flutter
February 9, 2024
Учим React за месяц
React — это крутая JavaScript-библиотека, которую используют для создания сайтов, мобильных приложений и даже игр.
Если давно в планах есть изучение React, но растягивать процесс не хочется, то начните с 30DaysOfReact — это учебник, который подойдет как новичкам, так и опытным разработчикам. Там можно найти задачи, темы и материалы для ежедневного изучения.
@prog_point #web #frontend #react
React — это крутая JavaScript-библиотека, которую используют для создания сайтов, мобильных приложений и даже игр.
Если давно в планах есть изучение React, но растягивать процесс не хочется, то начните с 30DaysOfReact — это учебник, который подойдет как новичкам, так и опытным разработчикам. Там можно найти задачи, темы и материалы для ежедневного изучения.
@prog_point #web #frontend #react
July 2, 2024
Forwarded from Сохранёнки программиста
Курс по React для начинающих
Курс начинается с основ и постепенно переходит к более сложным темам, охватывая всё от установки окружения до взаимодействия с бекендом.
Тут рассказывают, что такое React и как создавать приложения, используя Create React App и Vite. Среди основных тем, разобранных в этом курсе: props, state, события, стилизацию, создание пользовательских хуков и продвинутое использование состояний и хуков, таких как useRef, useEffect и useCallback.
https://youtu.be/kz23xxukY5s?si=hViyMF55q28nDlVh
#курс #react #web #ru
Курс начинается с основ и постепенно переходит к более сложным темам, охватывая всё от установки окружения до взаимодействия с бекендом.
Тут рассказывают, что такое React и как создавать приложения, используя Create React App и Vite. Среди основных тем, разобранных в этом курсе: props, state, события, стилизацию, создание пользовательских хуков и продвинутое использование состояний и хуков, таких как useRef, useEffect и useCallback.
https://youtu.be/kz23xxukY5s?si=hViyMF55q28nDlVh
#курс #react #web #ru
YouTube
React JS c Нуля – ПОЛНЫЙ Курс для начинающих (2025)
🔥Станьте фронтенд разработчиком с нуля, освойте JavaScript, React, TypeScript и устройтесь на первую работу :
👉https://resuni.ru/aXbpK
💻Бесплатный курс по HTML & CSS:
👉https://resuni.ru/rflWx
🕊️ Другие полезные курсы:
Полный курс по JavaScript для начинающих:…
👉https://resuni.ru/aXbpK
💻Бесплатный курс по HTML & CSS:
👉https://resuni.ru/rflWx
🕊️ Другие полезные курсы:
Полный курс по JavaScript для начинающих:…
August 9, 2024
Media is too big
VIEW IN TELEGRAM
Разработка и деплой сайта с нуля и анимацией
В этом видео вы узнаете, как создать сайт с большим количеством разной анимации, например, одной из самых популярных — parallax-эффект.
Вы научитесь работать с компонентами, используя библиотеку ReactJS, познакомитесь с Framer motion, организуете хранилище с Redux Toolkit (RTK), добавите контент через платформу Contentful и с помощью Graphql получите реальные данные на вашем сайте.
#видео #туториал #веб #react
В этом видео вы узнаете, как создать сайт с большим количеством разной анимации, например, одной из самых популярных — parallax-эффект.
Вы научитесь работать с компонентами, используя библиотеку ReactJS, познакомитесь с Framer motion, организуете хранилище с Redux Toolkit (RTK), добавите контент через платформу Contentful и с помощью Graphql получите реальные данные на вашем сайте.
#видео #туториал #веб #react
September 3, 2024
Как создать приложение Todo на React
Полезный туториал для фронтенд-разработчиков, в котором вы с нуля создадите приложение для ведения дел. Вы научитесь использовать хуки, а также продвинутые функции JavaScript.
Стартуем здесь.
#фронтенд #javascript #react
Полезный туториал для фронтенд-разработчиков, в котором вы с нуля создадите приложение для ведения дел. Вы научитесь использовать хуки, а также продвинутые функции JavaScript.
Стартуем здесь.
#фронтенд #javascript #react
October 23, 2024
Разработка Telegram Mini App с помощью React
Telegram Mini App — это веб-приложения, которые открываются внутри мессенджера Telegram. Эти приложения создаются с использованием стандартных веб-технологий, таких как HTML, CSS и JavaScript, и выглядят как обыкновенные сайты.
Сейчас они становятся всё популярнее, поэтому вам точно стоит иметь в запасе навык их создания. В этой статье вы узнаете, как создать собственный Mini App, используя React.
#react #telegram
Telegram Mini App — это веб-приложения, которые открываются внутри мессенджера Telegram. Эти приложения создаются с использованием стандартных веб-технологий, таких как HTML, CSS и JavaScript, и выглядят как обыкновенные сайты.
Сейчас они становятся всё популярнее, поэтому вам точно стоит иметь в запасе навык их создания. В этой статье вы узнаете, как создать собственный Mini App, используя React.
#react #telegram
November 18, 2024
ReactJS на изи: что реально нужно знать фронтенд-разработчику в 2025 году
У это библиотеки есть много нюансов, которые упускают новички. И часто это выливается в ошибки. В этой статье мы рассмотрим концепции React, которые упускают во время обучения: процесс рендеринга, предотвращение избыточных обновлений, работу с concurrent-режимом и приоритетами.
#react
У это библиотеки есть много нюансов, которые упускают новички. И часто это выливается в ошибки. В этой статье мы рассмотрим концепции React, которые упускают во время обучения: процесс рендеринга, предотвращение избыточных обновлений, работу с concurrent-режимом и приоритетами.
#react
March 17
Разбираемся в useMemo и useCallback
Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки! Многие разработчики React cломали голову над этими двумя хуками.
Цель этой статьи — прояснить всю путаницу, которая возникает с использованием этих хуков. Вы узнаете, что они делают, почему они полезны и как получить от них максимальную пользу.
#react@tproger_web
Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки! Многие разработчики React cломали голову над этими двумя хуками.
Цель этой статьи — прояснить всю путаницу, которая возникает с использованием этих хуков. Вы узнаете, что они делают, почему они полезны и как получить от них максимальную пользу.
#react@tproger_web
May 24
Media is too big
VIEW IN TELEGRAM
Разработка и деплой сайта с нуля и анимацией
В этом видео вы узнаете, как создать сайт с большим количеством разной анимации, например, одной из самых популярных — parallax-эффект.
Вы научитесь работать с компонентами, используя библиотеку ReactJS, познакомитесь с Framer motion, организуете хранилище с Redux Toolkit (RTK), добавите контент через платформу Contentful и с помощью Graphql получите реальные данные на вашем сайте.
#видео #туториал #веб #react
В этом видео вы узнаете, как создать сайт с большим количеством разной анимации, например, одной из самых популярных — parallax-эффект.
Вы научитесь работать с компонентами, используя библиотеку ReactJS, познакомитесь с Framer motion, организуете хранилище с Redux Toolkit (RTK), добавите контент через платформу Contentful и с помощью Graphql получите реальные данные на вашем сайте.
#видео #туториал #веб #react
May 25