®️Основные различия между React.js и React Native
Есть ли разница между React.js и React Native?
В демонстрационных целях я создал два проекта:
1. Для React Native с помощью команды: yarn create expo-app AwesomeProject.
2. Для React.js с помощью команды: npx create-next-app reactjs-awesome-project.
Рассмотрим соответствующие файлы package.json.
Рис. 1 Файл package.json проекта, созданного для React Native
Рис. 2. Файл package.json проекта, созданного для React.js
Как видите, оба проекта используют одну версию React-библиотеки. Если обратить внимание на строку 15 рис. 1 и строку 21 рис. 2, то можно заметить, что проект React Native основан на зависимости react-native, а проект React.js — на react-dom.
Итак, оба проекта используют React-библиотеку, а значит, сравнение React.js и React Native можно свести к сравнению React Dom и React Native.
Чтобы выявить различия между React DOM и React Native и понять, легко ли веб-разработчику React перейти к разработке с React Native, изучим сначала три основные библиотеки: React.js, React DOM и React Native.
Посмотрим, что они представляет собой и как работают.⬇️
📌 Читать
@react_js
Есть ли разница между React.js и React Native?
В демонстрационных целях я создал два проекта:
1. Для React Native с помощью команды: yarn create expo-app AwesomeProject.
2. Для React.js с помощью команды: npx create-next-app reactjs-awesome-project.
Рассмотрим соответствующие файлы package.json.
Рис. 1 Файл package.json проекта, созданного для React Native
Рис. 2. Файл package.json проекта, созданного для React.js
Как видите, оба проекта используют одну версию React-библиотеки. Если обратить внимание на строку 15 рис. 1 и строку 21 рис. 2, то можно заметить, что проект React Native основан на зависимости react-native, а проект React.js — на react-dom.
Итак, оба проекта используют React-библиотеку, а значит, сравнение React.js и React Native можно свести к сравнению React Dom и React Native.
Чтобы выявить различия между React DOM и React Native и понять, легко ли веб-разработчику React перейти к разработке с React Native, изучим сначала три основные библиотеки: React.js, React DOM и React Native.
Посмотрим, что они представляет собой и как работают.
📌 Читать
@react_js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10🥱6👍4❤1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Shapes, Clip-Path and CSS Grid — демонстрация CSS Shapes, CSS-свойства clip-path и CSS Grid. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
https://codepen.io/mandymichael/pen/axZyoP
@react_tg
#анимация #css #javascript
https://codepen.io/mandymichael/pen/axZyoP
@react_tg
👍8❤1🔥1
🔥 Дайджест полезных материалов из мира React за неделю
Почитать:
— Как мы заинжектили кнопку на Behance
— Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде
— Как можно использовать .NET из Javascript (React) в 2023 году
— Простой пример ИИ для управления роботом. TensorFlow + Node Js
— 8 углубленных вопросов на собеседованиях на роль сеньора в JavaScript
— React vs Vue vs Angular. Часть 3
— Как выстроить удобные процессы в работе с монорепой
— 9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании
— Особенности кодировки строк в Base64 в JavaScript
— Service Workers против медленного интернета: Кэширование и улучшение UX
— Can someone give me a link to download this book for free ? "Understanding Redux by Ohans Emmanuel"
— Announcing the First Ever State of React Survey
— Next.js + Redoc to create a low-latency API references
— Performing CRUD Operations in a React-Express-MongoDB Application
— React Search Using-Debounce
— How and when to use keys in React
— Wow! Server Actions are now Stable from Next.js 14! Dramatic changes in React and Next's form
— Fetching and rendering data from an API in React.js
— Building a Stopwatch in React
— The Top Animation Libraries for React in 2023
Посмотреть:
🌐 Did Josh Make A Mistake? (⏱ 06:58)
🌐 This Experimental Chrome Accessibility Feature Is A Game Changer (⏱ 00:48)
Хорошего дня!
@react_tg
Почитать:
— Как мы заинжектили кнопку на Behance
— Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде
— Как можно использовать .NET из Javascript (React) в 2023 году
— Простой пример ИИ для управления роботом. TensorFlow + Node Js
— 8 углубленных вопросов на собеседованиях на роль сеньора в JavaScript
— React vs Vue vs Angular. Часть 3
— Как выстроить удобные процессы в работе с монорепой
— 9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании
— Особенности кодировки строк в Base64 в JavaScript
— Service Workers против медленного интернета: Кэширование и улучшение UX
— Can someone give me a link to download this book for free ? "Understanding Redux by Ohans Emmanuel"
— Announcing the First Ever State of React Survey
— Next.js + Redoc to create a low-latency API references
— Performing CRUD Operations in a React-Express-MongoDB Application
— React Search Using-Debounce
— How and when to use keys in React
— Wow! Server Actions are now Stable from Next.js 14! Dramatic changes in React and Next's form
— Fetching and rendering data from an API in React.js
— Building a Stopwatch in React
— The Top Animation Libraries for React in 2023
Посмотреть:
🌐 Did Josh Make A Mistake? (⏱ 06:58)
🌐 This Experimental Chrome Accessibility Feature Is A Game Changer (⏱ 00:48)
Хорошего дня!
@react_tg
👍12🔥3❤1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
❌ Избегайте использования
✅ Вместо этого используйте
@react_tg
Conditional Rendering для рендеринга вьюх в React.✅ Вместо этого используйте
Enums@react_tg
👍43🔥7❤6
This media is not supported in your browser
VIEW IN TELEGRAM
Главные принципы при разработке проектов:
✅ масштабируемость
✅ аккуратность кода
✅ ясность
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍48❤5🔥4🤡3🍌3
🔥 Дайджест полезных материалов из мира React за неделю
Почитать:
— Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика
— Что такое деление по модулю в JavaScript?
— Почему я не буду использовать Next.js
— Redux-toolkit и переиспользование кода
— Разработка браузерных игр с использованием Phaser3, React, Typescript
— Два frontend фреймворка. Два подхода
— Как не программист, вероятно, написал самую быструю библиотеку в мире
— Что нового в Chrome 119?
— Взаимодействие с Midjourney с использованием Discord API • Часть II
— Conditional rendering in React
— Looking for Open-source contribution opportunities
— Yet Another Newsletter LOL: The Narrows
— Redesigned , developed my Portfolio website in React.js and Tailwind CSS
— Why useSyncExternalStore Is Not Used in Jotai
— I built a Snake Game in React
— Why React is Winning the Web: Insights into the Most Popular UI Library
— Preserving Special Characters in Query Parameters: A React Journey
— Learn React The Hard Way: Manage State Better
— React component for an amazing card border and glow animation
Посмотреть:
🌐 Node Just Released This Amazing Feature! (⏱ 00:44)
🌐 Why Signals Are Better Than React Hooks (⏱ 16:30)
Хорошего дня!
@react_tg
Почитать:
— Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика
— Что такое деление по модулю в JavaScript?
— Почему я не буду использовать Next.js
— Redux-toolkit и переиспользование кода
— Разработка браузерных игр с использованием Phaser3, React, Typescript
— Два frontend фреймворка. Два подхода
— Как не программист, вероятно, написал самую быструю библиотеку в мире
— Что нового в Chrome 119?
— Взаимодействие с Midjourney с использованием Discord API • Часть II
— Conditional rendering in React
— Looking for Open-source contribution opportunities
— Yet Another Newsletter LOL: The Narrows
— Redesigned , developed my Portfolio website in React.js and Tailwind CSS
— Why useSyncExternalStore Is Not Used in Jotai
— I built a Snake Game in React
— Why React is Winning the Web: Insights into the Most Popular UI Library
— Preserving Special Characters in Query Parameters: A React Journey
— Learn React The Hard Way: Manage State Better
— React component for an amazing card border and glow animation
Посмотреть:
🌐 Node Just Released This Amazing Feature! (⏱ 00:44)
🌐 Why Signals Are Better Than React Hooks (⏱ 16:30)
Хорошего дня!
@react_tg
👍17🔥4❤2👌1
This media is not supported in your browser
VIEW IN TELEGRAM
Знаете ли вы, как называть компоненты React с помощью шаблона Base + Composite + Suffix?
Этот паттерн можно использовать для создания понятных и согласованных имен компонентов в своих проектах.
@react_tg
Этот паттерн можно использовать для создания понятных и согласованных имен компонентов в своих проектах.
@react_tg
❤24👍4🔥1
Почему в React важен порядок вызова хуков?
Понимание механизмов работы хуков React имеет первостепенное значение для любого фронтенд-разработчика, стремящегося освоить React-фреймворк. Предоставляя массу возможностей для функциональных компонентов, хуки в то же время подчиняются ряду правил.
Непростая ситуация
Хуки очень полезны для получения данных. Когда источники данных связаны между собой, иногда нужно выполнить внутри компонента функции нечто подобное:
Проблема здесь заключается в том, что userId = data.id может быть еще не определено. Прежде чем выполнять второй вызов, вы, возможно, захотите проверить, является ли загрузка loading false:
Однако если сделать что-то подобное, в консоли появится ошибка, связанная с нарушением правил использования хуков. Правила использования хуков таковы.
1. Вызывать хуки можно только на верхнем уровне компонента функции.
2. Вызывать хуки можно только на верхнем уровне другого хука.
Заметим, что хук — это любая функция, имя которой начинается со строки use. Это означает, что:
1. нельзя вызывать хук внутри условия или цикла;
2. нельзя вызывать хук после условного возврата;
3. нельзя вызывать хук в компоненте класса.
Смысл этих правил заключается в том, что порядок вызова каждого хука должен быть абсолютно одинаковым при каждом вызове компонента.
Почему порядок вызовов хуков имеет значение⬅️ читать
@react_tg
Понимание механизмов работы хуков React имеет первостепенное значение для любого фронтенд-разработчика, стремящегося освоить React-фреймворк. Предоставляя массу возможностей для функциональных компонентов, хуки в то же время подчиняются ряду правил.
Непростая ситуация
Хуки очень полезны для получения данных. Когда источники данных связаны между собой, иногда нужно выполнить внутри компонента функции нечто подобное:
const { data, loading } = useGetData();
const userId = data.id;
const { relatedData } = useGetRelatedDataForUser(userId);Проблема здесь заключается в том, что userId = data.id может быть еще не определено. Прежде чем выполнять второй вызов, вы, возможно, захотите проверить, является ли загрузка loading false:
const { data, loading } = useGetData();
if (!loading){
const userId = data.id;
const { relatedData } = useGetRelatedDataForUser(userId);
}Однако если сделать что-то подобное, в консоли появится ошибка, связанная с нарушением правил использования хуков. Правила использования хуков таковы.
1. Вызывать хуки можно только на верхнем уровне компонента функции.
2. Вызывать хуки можно только на верхнем уровне другого хука.
Заметим, что хук — это любая функция, имя которой начинается со строки use. Это означает, что:
1. нельзя вызывать хук внутри условия или цикла;
2. нельзя вызывать хук после условного возврата;
3. нельзя вызывать хук в компоненте класса.
Смысл этих правил заключается в том, что порядок вызова каждого хука должен быть абсолютно одинаковым при каждом вызове компонента.
Почему порядок вызовов хуков имеет значение
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤3🔥3🌚1
Архитектура с микрофронтендами — это компонентно-ориентированный подход к построению интерфейса на основе микросервисов. В этом случае все компоненты и функции — автономные модули, которые могут создаваться разными группами разработчиков.
Создавать и обновлять компоненты можно по отдельности, не затрагивая остальные сервисы и функции интерфейса. Приложение становится более масштабируемым, модульным и настраиваемым. Эта архитектура отлично подходит для разбиения больших монолитных приложений на гибкие независимые модули.
Однако для перехода на микрофронтенды обычно требуется немало времени и усилий.
Нужно учесть такие важные аспекты, как идентификация и изоляция отдельных компонентов пользовательского интерфейса (UI), создание эффективных механизмов коммуникации. Потребуется обеспечить бесперебойную передачу данных, тщательный рефакторинг кода и разработку эффективных стратегий развертывания.
Но потенциальная эффективность архитектуры оправдывает все усилия по обновлению приложений.
Важно превратить микрофронтенды в строительные блоки, и в этом помогает Bit. Этот инструмент позволяет независимо разрабатывать компоненты и делиться ими.
Разделение монолитного приложения React на микрофронтенды
📌 Читать
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤6🔥2🌭1💯1
🔥 Дайджест полезных материалов из мира React за неделю
Почитать:
— Разбор задачи B (Больше, чем музыка) фронтенд — Yandex Cup 2023 квалификация
— Путешествие JavaScript-кода через движок V8
— Использование Content-Security-Policy вместе с React & Emotion
— Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика
— Что такое деление по модулю в JavaScript?
— Почему я не буду использовать Next.js
— Redux-toolkit и переиспользование кода
— Разработка браузерных игр с использованием Phaser3, React, Typescript
— Два frontend фреймворка. Два подхода
— Как не программист, вероятно, написал самую быструю библиотеку в мире
— [Discussion] What's the new big thing in web dev in the past 2 years?
— Significant Small Changes to improve UI / UX
— What kind of properties can be passed across the React Native bridge?
— Flatiron - Phase 5
— Conversations with Computers: Coding as an Art Form
— WebCrumbs: We are stitching together the future of the modern web
— The evolution of Web Development: from dial-up to instant React
— React useMemo
— Exploring React State Management: From Simple to Sophisticated Solutions
— Amazing radio buttons
Посмотреть:
🌐 Why Signals Are Better Than React Hooks (⏱ 16:30)
🌐 Node Just Released This Amazing Feature! (⏱ 00:44)
🌐 This Is One Of My Favorite TypeScript Features (⏱ 05:22)
🌐 NEW TypeScript Simplified Course Announcement! (⏱ 00:49)
Хорошего дня!
Почитать:
— Разбор задачи B (Больше, чем музыка) фронтенд — Yandex Cup 2023 квалификация
— Путешествие JavaScript-кода через движок V8
— Использование Content-Security-Policy вместе с React & Emotion
— Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика
— Что такое деление по модулю в JavaScript?
— Почему я не буду использовать Next.js
— Redux-toolkit и переиспользование кода
— Разработка браузерных игр с использованием Phaser3, React, Typescript
— Два frontend фреймворка. Два подхода
— Как не программист, вероятно, написал самую быструю библиотеку в мире
— [Discussion] What's the new big thing in web dev in the past 2 years?
— Significant Small Changes to improve UI / UX
— What kind of properties can be passed across the React Native bridge?
— Flatiron - Phase 5
— Conversations with Computers: Coding as an Art Form
— WebCrumbs: We are stitching together the future of the modern web
— The evolution of Web Development: from dial-up to instant React
— React useMemo
— Exploring React State Management: From Simple to Sophisticated Solutions
— Amazing radio buttons
Посмотреть:
🌐 Why Signals Are Better Than React Hooks (⏱ 16:30)
🌐 Node Just Released This Amazing Feature! (⏱ 00:44)
🌐 This Is One Of My Favorite TypeScript Features (⏱ 05:22)
🌐 NEW TypeScript Simplified Course Announcement! (⏱ 00:49)
Хорошего дня!
❤9👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Всё про фронтенд на YaTalks 2023: рассказы от топовых экспертов
Ждём вас на конференции YaTalks 2023 — крупнейшем мероприятии Яндекса для IT-сообщества. Более 100 экспертов в индустрии соберутся, чтобы поделиться кейсами и идеями, которыми можно вдохновиться. Выступления будут 5 и 6 декабря: офлайн — в Москве и Белграде, онлайн — в любой точке мира.
Вот о чём сможете узнать в первый день ↓
«Тернистый путь в open source» — с какими проблемами и вызовами пришлось столкнуться, когда раскрывали код DataLens в open source и переносили разработку в публичный GitHub-репозиторий.
Андрей Мелихов, ведущий разработчик, Yandex Cloud
«Слоистый CSS со взбитыми сливками» — развеем миф о том, что в CSS редко что-то меняется кардинально, а проблему изоляции стилей никак не решить.
Никита Дубко, доброжелюбный бородач, «Веб-стандарты»
«Тестировать нельзя мучиться: собственная ферма мобильных устройств для тестирования в Сбере» — зачем нужна ферма мобильных устройств, откуда она в Сбере и почему специалистам без неё уже никуда.
Владимир Коржев, руководитель направления в Digital Platform, Сбер
В меню не только доклады, но и нетворкинг, лайвкодинг, кофе с коллегами, карьерные консультации и живые встречи с топовыми экспертами. Регистрируйтесь по ссылке на один из дней и приходите ↓
Зарегистрироваться
Реклама. ООО "Яндекс". erid: 2VtzqwGo5Ew
Ждём вас на конференции YaTalks 2023 — крупнейшем мероприятии Яндекса для IT-сообщества. Более 100 экспертов в индустрии соберутся, чтобы поделиться кейсами и идеями, которыми можно вдохновиться. Выступления будут 5 и 6 декабря: офлайн — в Москве и Белграде, онлайн — в любой точке мира.
Вот о чём сможете узнать в первый день ↓
«Тернистый путь в open source» — с какими проблемами и вызовами пришлось столкнуться, когда раскрывали код DataLens в open source и переносили разработку в публичный GitHub-репозиторий.
Андрей Мелихов, ведущий разработчик, Yandex Cloud
«Слоистый CSS со взбитыми сливками» — развеем миф о том, что в CSS редко что-то меняется кардинально, а проблему изоляции стилей никак не решить.
Никита Дубко, доброжелюбный бородач, «Веб-стандарты»
«Тестировать нельзя мучиться: собственная ферма мобильных устройств для тестирования в Сбере» — зачем нужна ферма мобильных устройств, откуда она в Сбере и почему специалистам без неё уже никуда.
Владимир Коржев, руководитель направления в Digital Platform, Сбер
В меню не только доклады, но и нетворкинг, лайвкодинг, кофе с коллегами, карьерные консультации и живые встречи с топовыми экспертами. Регистрируйтесь по ссылке на один из дней и приходите ↓
Зарегистрироваться
Реклама. ООО "Яндекс". erid: 2VtzqwGo5Ew
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
⚛️ Совет React
Рендеринга можно избежать, если переосмыслить структуру компонента и использовать композицию (смотреть в гифке).
@react_tg
Рендеринга можно избежать, если переосмыслить структуру компонента и использовать композицию (смотреть в гифке).
@react_tg
👍28❤4🔥3👎2
🔥🔥🔥 5 подборок вопросов для собеседования по Frontend
1. JavaScript
https://github.com/sudheerj/javascript-interview-questions
2. React
https://github.com/sudheerj/reactjs-interview-questions
3. Vue
https://github.com/sudheerj/vuejs-interview-questions
4. Angular
https://github.com/sudheerj/angular-interview-questions
5. Front-End
https://github.com/h5bp/Front-end-Developer-Interview-Questions
@react_tg
1. JavaScript
https://github.com/sudheerj/javascript-interview-questions
2. React
https://github.com/sudheerj/reactjs-interview-questions
3. Vue
https://github.com/sudheerj/vuejs-interview-questions
4. Angular
https://github.com/sudheerj/angular-interview-questions
5. Front-End
https://github.com/h5bp/Front-end-Developer-Interview-Questions
@react_tg
👍24❤4🔥2
🔥 Дайджест полезных материалов из мира React за неделю
Почитать:
— Удобные формы для Vue 3
— Глубокий JS. В память о типах и данных
— React + Three.js. Создаём собственный 3D шутер. Часть 2
— Лучшие ресурсы чтобы выучить Git и Github
— Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере
— Добавление WebAuthn в веб-приложение
— Уроки рисования красных квадратов
— Интерактивный парсер web страниц
— Webpack vs esbuild — уже можно использовать в production?
— Enhancing UX: Leveraging Nextjs Router Events for Form Manipulation
— 10 Essential React Hooks You Should Know
— Gpen Demystified: Expert Insights from Dumpsarena
— Optimizing JavaScript with Memoization: A Deep Dive into Boosting Performance:
— How to handle loading screens in Next JS
— Bape Sta White: A Classic Sneaker Icon
— Utilising createPortal to build walkthrough experiences in React applications
— VSCode Plugin For Feature Flags
— Protected Routes with React.js and Next.js
— 3D Toggle Switch
Посмотреть:
🌐 How Is This Code Safe? (⏱ 06:31)
🌐 NEW TypeScript Simplified Course - 24 Hour Sale (⏱ 07:18)
🌐 I Can’t Believe Chrome Hides This From You (⏱ 01:00)
Хорошего дня!
#digest #react
@react_tg
Почитать:
— Удобные формы для Vue 3
— Глубокий JS. В память о типах и данных
— React + Three.js. Создаём собственный 3D шутер. Часть 2
— Лучшие ресурсы чтобы выучить Git и Github
— Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере
— Добавление WebAuthn в веб-приложение
— Уроки рисования красных квадратов
— Интерактивный парсер web страниц
— Webpack vs esbuild — уже можно использовать в production?
— Enhancing UX: Leveraging Nextjs Router Events for Form Manipulation
— 10 Essential React Hooks You Should Know
— Gpen Demystified: Expert Insights from Dumpsarena
— Optimizing JavaScript with Memoization: A Deep Dive into Boosting Performance:
— How to handle loading screens in Next JS
— Bape Sta White: A Classic Sneaker Icon
— Utilising createPortal to build walkthrough experiences in React applications
— VSCode Plugin For Feature Flags
— Protected Routes with React.js and Next.js
— 3D Toggle Switch
Посмотреть:
🌐 How Is This Code Safe? (⏱ 06:31)
🌐 NEW TypeScript Simplified Course - 24 Hour Sale (⏱ 07:18)
🌐 I Can’t Believe Chrome Hides This From You (⏱ 01:00)
Хорошего дня!
#digest #react
@react_tg
👍9🔥4❤1
This media is not supported in your browser
VIEW IN TELEGRAM
В современной веб-разработке границы между классическими и веб-приложениями практически стерты. Сегодня можно создавать не только интерактивные сайты, но и полноценные игры прямо в браузере.
Автор серии статей создает шутер и рассказывает о процессе в формате пошагового гайда.
Перевод: https://habr.com/ru/articles/774090/
Код проекта и ссылки на статьи на: https://github.com/JI0PATA/fps-game
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍3❤1