Главная » Архив меток: React (страница 15)

Архив меток: React

5 лучших практик в архитектуре React

От автора: не может быть никаких сомнений в том, что React революционизировал способ создания пользовательских интерфейсов. Его легко изучить и он способен значительно облегчить создание повторно используемых компонентов, которые придают вашему сайту единообразный внешний вид. Однако какая-либо конкретная архитектура React (например, MVC или MVVM) не применяется, поскольку он заботится только о слое представления приложения. Это может затруднить поддержание кода по ...

Читать далее »

Новый Context API React

От автора: в мире, где есть много разных интерфейсных фреймворков, всегда трудно понять, какой из них выбрать. Использовать популярный Angular? Или изучить VueJS будет полезно для моей базы знаний? Также у нас есть ReactJS, фреймворк, созданный Facebook, который, похоже, штурмует все новые вершины в мире разработки интерфейсов. Используя компоненты, виртуальный DOM и JSX (об этом в другой статье!), React, похоже, ...

Читать далее »

Одностраничные приложения React с модулями React-Router and React-Transition-Group

От автора: в этом уроке вы узнаете, как с помощью модулей react-router и react-transition-group создавать многостраничное React приложение с анимациями page transition. Подготовка приложения React Установка пакета create-react-app Если вы хоть раз пробовали React, возможно, вы слышали о пакете create-react-app. Он сильно упрощает начало разработки в React. В этом уроке мы будем использовать этот пакет для инициализации приложения React. Прежде ...

Читать далее »

Неизменность в React: в изменяющихся объектах нет ничего плохого

От автора: что такое изменяющийся объект? Когда вы начнете изучать React, первое, что вы узнаете – это что вам не стоит мутировать (изменять) список.   // This is bad, push modifies the original array items.push(newItem); // This is good, concat doesn’t modify the original array const newItems = items.concat([newItem]); Но… Вы знаете почему? Вы знаете, что не так с мутирующими ...

Читать далее »

Что такое компоненты высшего порядка в React

От автора: если вы некоторое время работаете в экосистеме React, есть вероятность, что вы слышали о Higher Order Components — так называются в React компоненты высшего порядка. Давайте рассмотрим простую реализацию, а также попытаемся понять основную идею. Я надеюсь из этой статьи вы получите представление о том, как они работают, и даже как их использовать. Для чего предназначены Higher-Order Components? ...

Читать далее »

Пятиминутный курс по React.js

От автора: это руководство даст вам базовое представление о React.js через создание очень простого приложения. Я опущу все, что, по моему мнению, не существенно. Настройка Когда вы начинаете работу с React, вы должны использовать простейшую настройку: файл HTML, который импортирует библиотеки React и ReactDOM, используя теги скриптов, например: <html> <head> <script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"> </script> <script src="https://unpkg.com/[email protected]/babel.min.js"></script> </head> <body> <div ...

Читать далее »

Руководство по стилю написания кода React

От автора: в последнее время у меня был период жизни работы с React. И в моем путешествии мне было трудно найти хороший стиль написания кода, чтобы держать JSX и JS в чистом и понятном виде. Я придумывал свои собственные руководства по стилю, которыми хотел бы поделиться. Возможно, они окажутся полезны для вас и, конечно, не стесняйтесь делиться подобными рекомендациями в ...

Читать далее »

10-минутный курс по ES6 для начинающего разработчика React

От автора: известный принцип Парето 80-20 также верен, когда речь идет об обучении React ES6. В ES6 появилось более 75 новых функций, но из того, что я видел, мне было нужно менее 20% из них в более чем 80% случаев. Примечание: просто чтобы избежать каких-либо недоразумений и не вдаваться в очень специфические подробности, JavaScript — это то же самое, что ...

Читать далее »

React State с нуля

От автора: как только вы приступите к изучению React, вы столкнетесь с понятием state. State имеет огромное значение в React. Возможно, это первая причина, почему вы стали изучать React. Давайте рассмотрим понятие React state и принцип его работы. Что такое state? State (состояние) в React – это объект простого JS, позволяющий отслеживать данные компонента. Состояние компонента может меняться. Смена состояния ...

Читать далее »

Как не надо писать React: неправильные шаблоны и проблемы в React

От автора: что такое антишаблон? Антишаблоны – это определенные шаблоны в разработке ПО, считающиеся плохими практиками программирования. Некоторые React шаблоны могли считаться правильными в прошлом, но сейчас разработчики поняли, что они приносят больше проблем и багов в долгосрочной перспективе. React стал полноценной UI библиотекой, и за эти годы развилось множество лучших практик разработки. Мы извлечем уроки из коллективной мудрости тысяч ...

Читать далее »