Как начать React-проект в 2023 году
Здесь я хочу дать краткий обзор стартовых наборов для создания нового проекта на React. Я хочу поразмышлять о преимуществах и недостатках, о необходимом уровне квалификации разработчика и о том, какие возможности каждый стартовый проект может предложить вам как разработчику React. В конце вы узнаете о трех решениях для различных требований.
https://www.robinwieruch.de/react-starter/
✍️ @React_lib
Здесь я хочу дать краткий обзор стартовых наборов для создания нового проекта на React. Я хочу поразмышлять о преимуществах и недостатках, о необходимом уровне квалификации разработчика и о том, какие возможности каждый стартовый проект может предложить вам как разработчику React. В конце вы узнаете о трех решениях для различных требований.
https://www.robinwieruch.de/react-starter/
✍️ @React_lib
👍2
Изучение 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:…
👍5
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
👍2
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
👍3
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
👍3
Создание микрофронтендов на 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
👍2
Создание приложения для комментирования в реальном времени с помощью 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
👍2🫡1
Как обрабатывать ошибки в 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
👍3👎1
Распространенные ошибки новичков при работе с 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
👍2
Докеризация полнофункциональных приложений 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
👍4
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
👍3
👍1
Как оптимизировать производительность приложения React
1. Использование средств повышения производительности браузера
2. Использование React.Suspense и React.Lazy для компонентов с lazy loading
3. Мемоизация компонентов React с помощью Memo
4. Tree-shaking
5. Оптимизация изображений
https://dev.to/devland/how-to-optimize-your-react-apps-performance-1045
✍️ @React_lib
1. Использование средств повышения производительности браузера
2. Использование React.Suspense и React.Lazy для компонентов с lazy loading
3. Мемоизация компонентов React с помощью Memo
4. Tree-shaking
5. Оптимизация изображений
https://dev.to/devland/how-to-optimize-your-react-apps-performance-1045
✍️ @React_lib
👍4
Прекратите использовать UseMemo немедленно!
Чрезмерная оптимизация в React-приложениях - это настоящий кошмар. Каждый день мы сталкиваемся с тоннами бесполезных оптимизаций, призванных сделать код более "загадочным". Некоторые разработчики даже включают useMemo и useCallback в руководство по стилю по умолчанию, просто чтобы упростить ситуацию. Не впадайте в это забвение, поскольку useMemo может даже замедлить работу вашего приложения! Помните, что мемоизация не достается бесплатно.
В этой статье я хочу показать, как большинство разработчиков злоупотребляют хуком useMemo, и дать несколько советов, как этого избежать.
https://javascript.plainenglish.io/stop-using-usememo-now-e5d07d2bbf70
✍️ @React_lib
Чрезмерная оптимизация в React-приложениях - это настоящий кошмар. Каждый день мы сталкиваемся с тоннами бесполезных оптимизаций, призванных сделать код более "загадочным". Некоторые разработчики даже включают useMemo и useCallback в руководство по стилю по умолчанию, просто чтобы упростить ситуацию. Не впадайте в это забвение, поскольку useMemo может даже замедлить работу вашего приложения! Помните, что мемоизация не достается бесплатно.
В этой статье я хочу показать, как большинство разработчиков злоупотребляют хуком useMemo, и дать несколько советов, как этого избежать.
https://javascript.plainenglish.io/stop-using-usememo-now-e5d07d2bbf70
✍️ @React_lib
👍3