DevGang
Авторизоваться

Ленивая загрузка в React 

React использует такие сборщики, как WebPack, для упаковки своего кода и его развертывания в браузере. Этот пакет используется браузером для визуализации вашего приложения React.

Теперь представьте, что вы создаете приложение с сотнями компонентов. По умолчанию, упаковщик объединит все эти компоненты в один bundle.js и загрузит ваше приложение. Это, в свою очередь, увеличит первоначальный размер бандла, что приведет к увеличению времени загрузки.

React: Компоненты и свойства

Компоненты в React являются независимыми, многократно используемыми частями пользовательского интерфейса. Типичная веб-страница может состоять из панели навигации, области содержимого и нижнего колонтитула. В React мы создаем эти области как компоненты (которые, в свою очередь, могут состоять из других компонентов!). Таким образом мы не дублируем код и, как мы увидим, обеспечивает большую гибкость.

Можно думать о компоненте как о функциям JavaScript. Вместо получения аргументов, она получает «Props», а затем возвращают элемент React, чтобы построить то, что мы видим на экране!

React: JSX и рендеринг

Если вы новичок в React, вы, вероятно, слышали о JSX или JavaScript XML - это XML-подобный код для элементов и компонентов. В этой статье мы рассмотрим, что такое JSX и почему мы должны использовать его в наших приложениях React. Мы также посмотрим, что такое элементы и как мы можем отобразить их в DOM.

React: Установка и настройка 

В настоящее время React является самой популярной библиотекой JavaScript для создания пользовательских интерфейсов, и в обозримом будущем эта тенденция сохранится. В этой статье мы рассмотрим способы быстрой и безболезненной настройки React. Так что мы можем погрузиться прямо в программирование!

Как понять методы жизненного цикла компонента в ReactJS 

В этой статье мы собираемся исследовать методы жизненного цикла ReactJS. Но прежде чем перейти к различным методам жизненного цикла React, мы должны понять, что это такое.

Как интегрировать React Hooks в ваш проект без изменения кода Redux 

В этом уроке мы рассмотрим, как интегрировать React Hooks в проект React Redux без изменения кода Redux (редукторов и акшенов).

Самый простой способ настроить рендеринг на стороне сервера с помощью React и axios

Рендеринг на стороне сервера (SSR) - это обоюдоострый меч. Это ужасно важно для определенных приложений, которые требуют поддержки SEO и отвечают определенным требованиям к производительности, но это плохо для правильной реализации.

Некоторые из основных трудностей связаны с аутентификацией пользователей и предварительной загрузкой данных, особенно потому, что вокруг них нет установленных шаблонов.

При создании SPA часто вы используете JWT для аутентификации пользователя, отправляемой через HTTP-заголовки на сервер. Вместо этого для загрузки данных вы можете использовать React-компоненты, такие как componentWillMount. Но ничего из этого не работает при рендеринге вашего дерева компонентов на сервере.

Совместное использование состояния с помощью React's Context API

Глобальное состояние в React является синонимом таких библиотек, как Redux. Если вам когда-либо приходилось делить состояние, например текущий маршрут или данные из API, с несколькими компонентами, то вы, возможно, использовали Redux.

Более новые версии React (16.3+) включают встроенный способ совместного использования состояния, что означает отсутствие необходимости извлекать внешнюю библиотеку. Это известно как React Context API, и его может быть немного сложно понять. Я надеюсь предоставить упрощенное объяснение и учебное пособие, чтобы вы могли быстро добавить глобальное состояние в любое из ваших приложений на React.

Развертывание React Native приложения на iOS (Часть первая)

На прошлой неделе я развернул React Native приложение для iOS в App Store. В общей сложности я потратил около 2х часов - это был скучный процесс сбора снимков экрана и значков и тестирования TestFlight. 

А теперь сравните это опыт, с первым разом, когда я развернул приложение React Native для iOS. Мне кажется, что я потратил около 3 недель, чтобы во всем правильно разобраться!

Подключение React Native компонентов в релизной сборке Android

Не так давно я подключал компоненты React Native к нашему существующему приложению и потратил на это изрядное количество времени. 

Связано это было с дополнительными требованиями к сборкам релизов, требующих создания bundle файла.

Ожидал, что будет довольно простой, хорошо документированный рабочий процесс, но, к сожалению, был немного разочарован. Пришлось немного поработать с ошибками, чтобы наконец автоматизировать процесс связывания в наших релизных сборках.

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу