Распространенные ошибки новичков при работе с React
Пару лет назад я преподавал React в местном учебном центре программирования и заметил, что есть несколько вещей, которые постоянно застают студентов врасплох. Люди постоянно попадали в одни и те же ямы!
В этом уроке мы рассмотрим 9 наиболее распространенных проблем. Вы узнаете, как их обойти и, надеюсь, избежать многих разочарований.
Чтобы сохранить легкость и непринужденность, мы не будем слишком углубляться в причины этих проблем. Это скорее краткая справка.
https://www.joshwcomeau.com/react/common-beginner-mistakes/
✍️ @React_lib
Пару лет назад я преподавал React в местном учебном центре программирования и заметил, что есть несколько вещей, которые постоянно застают студентов врасплох. Люди постоянно попадали в одни и те же ямы!
В этом уроке мы рассмотрим 9 наиболее распространенных проблем. Вы узнаете, как их обойти и, надеюсь, избежать многих разочарований.
Чтобы сохранить легкость и непринужденность, мы не будем слишком углубляться в причины этих проблем. Это скорее краткая справка.
https://www.joshwcomeau.com/react/common-beginner-mistakes/
✍️ @React_lib
Руководство по дополнительным параметрам Reacts
Знаете ли вы, что в React API есть несколько необязательных и альтернативных параметров? Скрытые дополнительные параметры, которые обеспечивают "бонусное поведение". Большинство из них предназначены для оптимизации и помогают выжать максимум производительности из вашего приложения React.
Хотя эти параметры не являются самыми важными для понимания React, полезно иметь четкое представление обо всех имеющихся в вашем распоряжении инструментах. Итак, давайте подробнее рассмотрим эти скрытые дополнительные возможности. Мы рассмотрим их в порядке убывания распространенности.
https://julesblom.com/writing/react-optional-parameters
✍️ @React_lib
Знаете ли вы, что в React API есть несколько необязательных и альтернативных параметров? Скрытые дополнительные параметры, которые обеспечивают "бонусное поведение". Большинство из них предназначены для оптимизации и помогают выжать максимум производительности из вашего приложения React.
Хотя эти параметры не являются самыми важными для понимания React, полезно иметь четкое представление обо всех имеющихся в вашем распоряжении инструментах. Итак, давайте подробнее рассмотрим эти скрытые дополнительные возможности. Мы рассмотрим их в порядке убывания распространенности.
https://julesblom.com/writing/react-optional-parameters
✍️ @React_lib
JulesBlom.com
An Animated Guide to Reacts Optional Parameters | JulesBlom.com
Reacts API includes several optional and alternative parameters which provide additional behavior like optimization or other extras that occasionally can come in useful. Let’s look at those as animated diagrams.
UI-компоненты для React: топ-10 библиотек и фреймворков
https://dev.to/nilanth/10-react-packages-with-1k-ui-components-2bf3
✍️ @React_lib
https://dev.to/nilanth/10-react-packages-with-1k-ui-components-2bf3
✍️ @React_lib
Анимация View Transitions в React
API View Transitions предлагает простой способ перехода любого визуального изменения DOM из одного состояния в другое. Это могут быть как небольшие изменения, например, переключение содержимого, так и более широкие изменения, например, переход с одной страницы на другую. Ниже приведена демонстрация работы API View Transitions в одностраничном приложении (SPA)
https://www.patterns.dev/posts/view-transitions
✍️ @React_lib
API View Transitions предлагает простой способ перехода любого визуального изменения DOM из одного состояния в другое. Это могут быть как небольшие изменения, например, переключение содержимого, так и более широкие изменения, например, переход с одной страницы на другую. Ниже приведена демонстрация работы API View Transitions в одностраничном приложении (SPA)
https://www.patterns.dev/posts/view-transitions
✍️ @React_lib
React: интересная схема работы с формами
В этой статье я хочу рассказать о схеме (назовем ее так) работы с формами в React, которая на сегодняшний день кажется мне наиболее эффективной. Эта схема предполагает использование React Hook Form для обработки форм и Zod для валидации пользовательских данных. Применение данной схемы имеет несколько существенных преимуществ по сравнению с использованием других решений или реализацией необходимого функционала вручную. Главными преимуществами являются минимизация количества шаблонного кода и автоматическое выведение типов (type inference).
https://habr.com/ru/companies/timeweb/articles/722108/
✍️ @React_lib
В этой статье я хочу рассказать о схеме (назовем ее так) работы с формами в React, которая на сегодняшний день кажется мне наиболее эффективной. Эта схема предполагает использование React Hook Form для обработки форм и Zod для валидации пользовательских данных. Применение данной схемы имеет несколько существенных преимуществ по сравнению с использованием других решений или реализацией необходимого функционала вручную. Главными преимуществами являются минимизация количества шаблонного кода и автоматическое выведение типов (type inference).
https://habr.com/ru/companies/timeweb/articles/722108/
✍️ @React_lib
Создание конструктора резюме с помощью React, NodeJS и искусственного интеллекта 🚀
В этой статье вы узнаете, как создать конструктор резюме с помощью React, Node.js и OpenAI API.
Что может быть лучше, чем искать работу и говорить, что для этого вы создали конструктор резюме с искусственным интеллектом? 🤩
https://dev.to/novu/creating-a-resume-builder-with-react-nodejs-and-ai-4k6l
✍️ @React_lib
В этой статье вы узнаете, как создать конструктор резюме с помощью React, Node.js и OpenAI API.
Что может быть лучше, чем искать работу и говорить, что для этого вы создали конструктор резюме с искусственным интеллектом? 🤩
https://dev.to/novu/creating-a-resume-builder-with-react-nodejs-and-ai-4k6l
✍️ @React_lib
Как начать React-проект в 2023 году
Здесь я хочу дать краткий обзор стартовых наборов для создания нового проекта на React. Я хочу поразмышлять о преимуществах и недостатках, о необходимом уровне квалификации разработчика и о том, какие возможности каждый стартовый проект может предложить вам как разработчику React. В конце вы узнаете о трех решениях для различных требований.
https://www.robinwieruch.de/react-starter/
✍️ @React_lib
Здесь я хочу дать краткий обзор стартовых наборов для создания нового проекта на React. Я хочу поразмышлять о преимуществах и недостатках, о необходимом уровне квалификации разработчика и о том, какие возможности каждый стартовый проект может предложить вам как разработчику React. В конце вы узнаете о трех решениях для различных требований.
https://www.robinwieruch.de/react-starter/
✍️ @React_lib
Изучение React 18 с инструментарием Redux - полный курс для начинающих
00:00:00 Setup
0:30:33 Folder Structure
0:42:58 First Component
0:53:25 Extensions and settings.json
1:06:09 JSX
1:20:21 Nest Components
1:26:35 Booklist
1:36:57 CSS
1:47:31 Images
1:55:31 JSX - CSS
2:02:17 JSX - Javascript
2:08:44 Props
2:18:33 Props - Somewhat Dynamic Setup
2:23:00 Access Props - Multiple Approaches
2:27:44 Children Prop
2:35:12 Simple List
2:43:48 Proper List
2:51:12 Key Prop
2:57:20 Props - Options
3:02:56 Events
3:21:51 Form Submission
3:25:35 Mind Grenade
3:28:55 Component Feature
3:34:00 React Data Flow
3:39:42 Challenge
3:48:51 ES6 Modules
3:58:40 Local Images (src folder)
4:04:25 More Challenges
4:13:20 Deployment
4:18:43 useState Hook
5:48:19 useEffect Hook
6:19:29 Multiple Returns
7:28:02 Folder Structure
8:27:07 Forms
9:27:53 useRef Hook
9:50:10 Custom Hooks
10:06:20 Context API
10:43:01 useReducer Hook
11:26:39 Performance
12:11:45 Redux Toolkit
https://www.youtube.com/watch?v=2-crBg6wpp0
✍️ @React_lib
00:00:00 Setup
0:30:33 Folder Structure
0:42:58 First Component
0:53:25 Extensions and settings.json
1:06:09 JSX
1:20:21 Nest Components
1:26:35 Booklist
1:36:57 CSS
1:47:31 Images
1:55:31 JSX - CSS
2:02:17 JSX - Javascript
2:08:44 Props
2:18:33 Props - Somewhat Dynamic Setup
2:23:00 Access Props - Multiple Approaches
2:27:44 Children Prop
2:35:12 Simple List
2:43:48 Proper List
2:51:12 Key Prop
2:57:20 Props - Options
3:02:56 Events
3:21:51 Form Submission
3:25:35 Mind Grenade
3:28:55 Component Feature
3:34:00 React Data Flow
3:39:42 Challenge
3:48:51 ES6 Modules
3:58:40 Local Images (src folder)
4:04:25 More Challenges
4:13:20 Deployment
4:18:43 useState Hook
5:48:19 useEffect Hook
6:19:29 Multiple Returns
7:28:02 Folder Structure
8:27:07 Forms
9:27:53 useRef Hook
9:50:10 Custom Hooks
10:06:20 Context API
10:43:01 useReducer Hook
11:26:39 Performance
12:11:45 Redux Toolkit
https://www.youtube.com/watch?v=2-crBg6wpp0
✍️ @React_lib
YouTube
Learn React 18 with Redux Toolkit – Full Tutorial for Beginners
Learn how to use React version 18 and Redux Toolkit in this full course for beginners. React is a free and open-source front-end JavaScript library for building user interfaces based on components.
✏️ Course created by @CodingAddict
Source Code
React Tutorial:…
✏️ Course created by @CodingAddict
Source Code
React Tutorial:…
Apress.Just.React.Learn.React.the.React.Way.pdf
10.2 MB
Just React!: Learn React the React Way
Автор: Hari Narayn (2022)
Перед вами идеальный помощник в изучении и разработке приложений React. Эта книга представляет инновационные концепции, и использует реальные примеры, основанные на наиболее рекомендуемых практиках, чтобы помочь вам заложить прочный фундамент. Этот комплексный подход обеспечивает сильный акцент на построении компонентов с помощью React.
Вы начнете с изучения основ веб-технологий, JavaScript нового поколения и того, как React вписывается в эти основы. В последующих главах вы построите приложение React с нуля и узнаете о JSX, компонентах, реквизитах, управлении состоянием, контексте и событиях жизненного цикла. Попутно вы создадите многокомпонентное приложение и увидите, как компоненты взаимодействуют между собой. Также будут рассмотрены вопросы отладки и стилизации приложений React.
✍️ @React_lib
Автор: Hari Narayn (2022)
Перед вами идеальный помощник в изучении и разработке приложений React. Эта книга представляет инновационные концепции, и использует реальные примеры, основанные на наиболее рекомендуемых практиках, чтобы помочь вам заложить прочный фундамент. Этот комплексный подход обеспечивает сильный акцент на построении компонентов с помощью React.
Вы начнете с изучения основ веб-технологий, JavaScript нового поколения и того, как React вписывается в эти основы. В последующих главах вы построите приложение React с нуля и узнаете о JSX, компонентах, реквизитах, управлении состоянием, контексте и событиях жизненного цикла. Попутно вы создадите многокомпонентное приложение и увидите, как компоненты взаимодействуют между собой. Также будут рассмотрены вопросы отладки и стилизации приложений React.
✍️ @React_lib
React, Visualized
Интерактивное руководство по основным концепциям React
Для того чтобы по-настоящему оценить React, необходимо понять исторический контекст его создания. От jQuery до Backbone и AngularJS - каждая эпоха по-своему вдохновляла React.
https://react.gg/visualized
✍️ @React_lib
Интерактивное руководство по основным концепциям React
Для того чтобы по-настоящему оценить React, необходимо понять исторический контекст его создания. От jQuery до Backbone и AngularJS - каждая эпоха по-своему вдохновляла React.
https://react.gg/visualized
✍️ @React_lib
7 инструментов для ускорения разработки на React
React - это универсальная и гибкая библиотека разработки, с помощью которой можно создавать все: от массивных одностраничных приложений до компактных плагинов. Однако создание проекта React с нуля может оказаться сложной задачей, связанной с бесконечными доработками и настройками. Поэтому для ускорения разработки на React необходимо иметь в своем арсенале лучшие инструменты.
https://dev.to/devland/7-tools-and-frameworks-for-faster-development-in-react-5b18
✍️ @React_lib
React - это универсальная и гибкая библиотека разработки, с помощью которой можно создавать все: от массивных одностраничных приложений до компактных плагинов. Однако создание проекта React с нуля может оказаться сложной задачей, связанной с бесконечными доработками и настройками. Поэтому для ускорения разработки на React необходимо иметь в своем арсенале лучшие инструменты.
https://dev.to/devland/7-tools-and-frameworks-for-faster-development-in-react-5b18
✍️ @React_lib
Создание микрофронтендов на React. 3 простых шага.
Для разработки микрофронтендов на React настоятельно рекомендуется использовать инструменты компонентно-ориентированной разработки, такие как bit.
https://blog.bitsrc.io/build-microfrontend-in-react-in-3-easy-steps-74790fd0c9fb
✍️ @React_lib
Для разработки микрофронтендов на React настоятельно рекомендуется использовать инструменты компонентно-ориентированной разработки, такие как bit.
https://blog.bitsrc.io/build-microfrontend-in-react-in-3-easy-steps-74790fd0c9fb
✍️ @React_lib
Создание приложения для комментирования в реальном времени с помощью Socket.io и React
В этом руководстве мы рассмотрим, как построить систему комментирования в реальном времени с помощью React, Node.js и Socket.io. Мы покажем, как формировать список комментариев, получаемых из API, создавать новые комментарии и транслировать комментарии в режиме реального времени подключенным пользователям с помощью Socket.io.
https://cjbell.hashnode.dev/building-a-real-time-commenting-app-with-socketio-and-react
✍️ @React_lib
В этом руководстве мы рассмотрим, как построить систему комментирования в реальном времени с помощью React, Node.js и Socket.io. Мы покажем, как формировать список комментариев, получаемых из API, создавать новые комментарии и транслировать комментарии в режиме реального времени подключенным пользователям с помощью Socket.io.
https://cjbell.hashnode.dev/building-a-real-time-commenting-app-with-socketio-and-react
✍️ @React_lib
Как обрабатывать ошибки в React: полное руководство
Мы все хотим, чтобы наши приложения были стабильными, работали идеально и удовлетворяли всем возможным требованиям, не так ли? Но печальная реальность такова, что все мы люди (по крайней мере, я так считаю), все мы совершаем ошибки, и не существует такого понятия, как код без ошибок. Как бы мы ни были внимательны и сколько бы автоматизированных тестов ни написали, всегда найдется ситуация, когда что-то пойдет не так. Главное, когда речь идет о пользовательском опыте, предугадать этот ужас, локализовать его, насколько это возможно, и бороться с ним изящным способом до тех пор, пока он не будет действительно исправлен.
https://adevnadia.medium.com/how-to-handle-errors-in-react-full-guide-bd02634ff523
✍️ @React_lib
Мы все хотим, чтобы наши приложения были стабильными, работали идеально и удовлетворяли всем возможным требованиям, не так ли? Но печальная реальность такова, что все мы люди (по крайней мере, я так считаю), все мы совершаем ошибки, и не существует такого понятия, как код без ошибок. Как бы мы ни были внимательны и сколько бы автоматизированных тестов ни написали, всегда найдется ситуация, когда что-то пойдет не так. Главное, когда речь идет о пользовательском опыте, предугадать этот ужас, локализовать его, насколько это возможно, и бороться с ним изящным способом до тех пор, пока он не будет действительно исправлен.
https://adevnadia.medium.com/how-to-handle-errors-in-react-full-guide-bd02634ff523
✍️ @React_lib
Распространенные ошибки новичков при работе с React
Пару лет назад я преподавал React в местном учебном центре программирования и заметил, что есть несколько вещей, которые постоянно застают студентов врасплох. Люди постоянно попадали в одни и те же ямы!
В этом уроке мы рассмотрим 9 наиболее распространенных проблем. Вы узнаете, как их обойти и, надеюсь, избежать многих разочарований.
Чтобы сохранить легкость и непринужденность, мы не будем слишком углубляться в причины этих проблем. Это скорее краткая справка.
https://www.joshwcomeau.com/react/common-beginner-mistakes/
✍️ @React_lib
Пару лет назад я преподавал React в местном учебном центре программирования и заметил, что есть несколько вещей, которые постоянно застают студентов врасплох. Люди постоянно попадали в одни и те же ямы!
В этом уроке мы рассмотрим 9 наиболее распространенных проблем. Вы узнаете, как их обойти и, надеюсь, избежать многих разочарований.
Чтобы сохранить легкость и непринужденность, мы не будем слишком углубляться в причины этих проблем. Это скорее краткая справка.
https://www.joshwcomeau.com/react/common-beginner-mistakes/
✍️ @React_lib
Докеризация полнофункциональных приложений React
Для разработчика создание локальных сред разработки может потребовать времени и усилий. Возьмем для примера приложение React. Создание приложения становится еще более сложным, когда требуется бэкенд и база данных для предоставления данных приложению. Использование таких инфраструктур, как Docker и контейнеры, дает разработчику преимущество для быстрой настройки и развертывания приложений.
https://blog.openreplay.com/dockerize-full-stack-react-apps/
✍️ @React_lib
Для разработчика создание локальных сред разработки может потребовать времени и усилий. Возьмем для примера приложение React. Создание приложения становится еще более сложным, когда требуется бэкенд и база данных для предоставления данных приложению. Использование таких инфраструктур, как Docker и контейнеры, дает разработчику преимущество для быстрой настройки и развертывания приложений.
https://blog.openreplay.com/dockerize-full-stack-react-apps/
✍️ @React_lib
This media is not supported in your browser
VIEW IN TELEGRAM
Что такое строгий режим в React?
Здравствуйте, разработчики React, вы наверняка слышали о строгом режиме. Но что же это такое? Если говорить кратко, то React.StrictMode - это полезный компонент для выделения потенциальных проблем в приложении. Как и <Fragment>, <StrictMode> не отображает никаких дополнительных элементов DOM. В этой статье мы подробно рассмотрим, что такое строгий режим, как он работает и почему его стоит использовать в своих приложениях.
https://dev.to/codeofrelevancy/what-is-strict-mode-in-react-3p5b
✍️ @React_lib
Здравствуйте, разработчики React, вы наверняка слышали о строгом режиме. Но что же это такое? Если говорить кратко, то React.StrictMode - это полезный компонент для выделения потенциальных проблем в приложении. Как и <Fragment>, <StrictMode> не отображает никаких дополнительных элементов DOM. В этой статье мы подробно рассмотрим, что такое строгий режим, как он работает и почему его стоит использовать в своих приложениях.
https://dev.to/codeofrelevancy/what-is-strict-mode-in-react-3p5b
✍️ @React_lib