Як створити компоненти React, що працюють на кожному фреймворку React? - javascript.org.ua

React використовується на понад 1,8 мільйонах вебсайтів (станом на 2023 рік). Це включає використання як чистого React.js, так і більш складних фреймворків, таких як Next.js, React Native та Gatsby.

Отже, якщо ви працюєте в організації, яка використовує ці фреймворки на різних проєктах, вам, ймовірно, знадобиться зручна система дизайну, що працює в усіх цих фреймворках. Ви не хочете зіткнутися з проблемами продуктивності або сумісності при використанні React компонентів у різних фреймворках.

І ось тут я пропоную вам допомогу у цій статті.
Я покажу вам, як підтримувати одну систему дизайну для React, яка підійде для всіх React фреймворків!

Псс: якщо ви хочете пропустити статтю і перейти прямо до демо, будь ласка, перегляньте код._

Створення компонента React, що підтримує будь-який фреймворк

Для досягнення цієї мети ми будемо використовувати Bit.

Якщо ви не знайомі з Bit, це система побудови нового покоління, яка дозволяє створювати компонуємий софт. Вона дозволяє розробляти, створювати та будувати компоненти в незалежному середовищі, які можуть бути використані в будь-якому проєкті!

Так, ви не ослухались! Ці компоненти не прив’язані до жодного конкретного React проєкту.

Це робить Bit ідеальним кандидатом для створення компонентів, які ви хочете використовувати в будь-якому фреймворку.

Крок 01: Попередні вимоги

Спочатку давайте встановимо Bit.
Для цього виконайте наступну команду:

npx @teambit/bvm install

Щоб перевірити успішність встановлення, виконайте наступну команду:

bit --version

Якщо ви успішно встановили Bit, ви повинні побачити результат, показаний нижче:

Далі вам потрібно буде створити обліковий запис на Bit Cloud. Bit Cloud дозволяє вам розміщувати ваші компоненти в віддаленому просторі, що дозволяє іншим проєктам використовувати бібліотеку компонентів, яку ви створюєте.

Після того як ви створите обліковий запис на Bit Cloud, ви можете створити простір.

Простір — це місце, де будуть зберігатися всі ваші компоненти.
Це дозволяє іншим розробникам використовувати і співпрацювати над ним.

Для цієї статті я створив простір — react-component-library. Після того, як ви створите простір, ми можемо почати будувати бібліотеку.

Крок 02: Налаштування робочого простору Bit

Давайте створимо робочий простір на комп'ютері розробника для побудови бібліотеки. Для цього виконайте наступну команду:

mkdir workspace && cd workspace && bit init

Ви повинні побачити наступний результат:

Далі відкрийте робочий простір у вашому IDE і оновіть файл workspace.jsonc наступним чином:

"defaultScope": \<\\>.\<\\>,

Зробіть це змінення у файлі конфігурації вашого робочого простору. Це забезпечить те, що всі компоненти, які ви створите, будуть розміщені на визначеному вами просторі.
У цій статті я оновив defaultScope на:

"defaultScope": dummyorg.react-component-library

Ви можете оновити його на простір, який ви створили раніше, і ваш логін Bit.

Далі ми зробимо дещо особливе. Ми створимо “середовище”. Це середовище дозволяє здійснювати незалежну розробку. Наразі ваш робочий простір не прив’язаний до жодного фреймворку.
У вашому робочому просторі ви можете створювати компоненти для Node.js, Angular, Vue.js, Stencil, React.js та багато інших.

Середовище виконання для вашого компонента надається середовищем [/understanding-component-runtime-environments-e7bb37f3dae1].

[

Розуміння середовищ виконання компонентів

Дізнайтеся, як використовувати середовища розробки компонентів для визначення середовища виконання для ваших компонентів

blog.bitsrc.io

](/understanding-component-runtime-environments-e7bb37f3dae1?source=post_page-----bea5ce6d7171--------------------------------)

Отже, давайте створимо середовище для React.
Для цього виконайте наступну команду:

bit create react-env envs/react-18 --aspect teambit.react/react-env

Після того як ви створите середовище, ви можете бути впевненими, що кожен компонент, який ви створите, буде залежати від цього нового середовища.

Це дозволить вам контролювати, як функціонує кожен компонент і які бібліотеки він використовуватиме.

Крок 03: Створення React компонента, який буде використовуватись в будь-якому фреймворку

Далі давайте створимо React компонент, що працюватиме на будь-якому фреймворку! Для демонстрації цього давайте створимо компонент зображення, який буде працювати в середовищах Next.js і React.

Якщо наш компонент зображення буде запущений в середовищі Next.js, він автоматично використовуватиме функції оптимізації зображень, що є в Next.js. Якщо ні — він буде використовуватись як звичайний компонент зображення.

Для цього ми використаємо пакет — next/image. Нам потрібно буде встановити бібліотеку Next.js для нашого компонента.
Це можна зробити за допомогою команди:

bit install next --add-missing-deps --type peer

Це встановить бібліотеку як залежність у вашому робочому просторі. Будь-який компонент, що використовує бібліотеку next, автоматично матиме її включено.

Далі давайте створимо React компонент:

bit create react elements/image --env envs/react-18

Ця команда створить компонент під назвою “image” і використає нове середовище, яке ми створили раніше. Тепер, коли у нас є React компонент, давайте подивимося на нього. Для цього запустимо сервер Bit за допомогою команди:

bit start

Ви можете перейти за посиланням localhost:3000 і побачити компонент:

Тепер давайте почнемо створювати компонент.
Відкрийте файл image.tsx та додайте наступний фрагмент:

import React from 'react';  
import NextImage from 'next/image';

export type ImageProps = {  
 isNextJs?: boolean  
 source: string  
 name: string  
};export function Image({ isNextJs = false, source, name }: ImageProps) {  
 return (  
 \  
 );  
}

Як бачите, ми використовували компонент Image від Next.js і використали його пропс unoptimized для керування стратегією рендерингу для різних фреймворків.

Якщо компонент запущено всередині Next.js, він використовуватиме оптимізовану версію; якщо ні, він працюватиме як звичайне зображення.

Далі ви можете створити свою композицію для попереднього перегляду компонента.

import React> {  
 return (  
 \  
 );  
}

Після цього поверніться до сервера розробки, і ви повинні побачити результат, як показано нижче:

І все це так просто.
Далі ви можете поділитися ним з віддаленим scope за допомогою команд:

bit tag && bit export

Це запустить процес побудови в Ripple CI від Bit і створить компонент для публічного використання. Ви можете подивитись побудову тут:

Після цього компонент стане доступним для використання всередині Bit або навіть як пакет NPM:

Ви можете переглянути компонент тут.

Крок 04: Використання компонента в будь-якому фреймворку

Далі, щоб протестувати це, давайте створимо два додатки:

React додаток
Next.js додаток

На щастя для нас, Bit підтримує як Next.js, так і React додатки. Ви можете створювати компоненти додатків для кожного з цих додатків.
Для цього виконайте команди:

// створити react додаток  
bit create react-app apps/my-app --aspect bitdev.react/react-env

// створити nextjs додаток  
bit create nextjs apps/my-nextjs-app --aspect frontend.nextjs/nextjs-env

Далі, давайте зробимо додатки працездатними за допомогою команди:

bit use apps/my-app && bit use apps/my-nextjs-app

Ця команда забезпечить можливість запуску ваших додатків поза межами Bit workspace.
Далі виконайте команду bit app list, щоб переглянути додатки:

Тепер відкрийте файл page.tsx у вашому додатку Next.js і оновіть код:

import { Image } from '@dummyorg/react-component-library.elements.image';  
import React from 'react';

export default function Home() {  
 return (  
   \  
 )  
}

Далі запустіть додаток за допомогою команди:

bit run my-nextjs-app

Ви побачите результат, як показано нижче:

І ось це все! Ви створили компонент, який може працювати на будь-якому фреймворку!

Підсумки

Це було легко. За допомогою Bit ви можете створювати компоненти, які можуть працювати на будь-якому фреймворку! І це не обмежується лише React.
Bit дозволяє створювати компоненти для Node.js, Angular, Vue.js та багатьох інших фреймворків, які можна використовувати в будь-якому з них.

Наприклад, якщо ви займаєтесь розробкою повного стеку, ви можете безперешкодно ділитись сутностями та утилітами, використовуючи Bit для обміну між фронтендом та бекендом.

[

Як ефективно ділитися кодом між функціями AWS Lambda?

Використовуйте Bit для безперешкодного обміну кодом між вашими функціями Lambda

blog.bitsrc.io

](/sharing-code-in-aws-lambda-functions-cb932b9b782e?source=post_page-----bea5ce6d7171--------------------------------)

Якщо вам сподобалося, що ви побачили, не забудьте спробувати цей демо-проект самостійно!

blog.bitsrc.io

](/bit-component-lifecycle-99a8462469e2?source=post_page-----bea5ce6d7171--------------------------------)

Перекладено з: How To Create React Components That Run On Every React Framework?

Створення компонента React, що підтримує будь-який фреймворк

Крок 01: Попередні вимоги

Крок 02: Налаштування робочого простору Bit

Розуміння середовищ виконання компонентів

Дізнайтеся, як використовувати середовища розробки компонентів для визначення середовища виконання для ваших компонентів

Крок 03: Створення React компонента, який буде використовуватись в будь-якому фреймворку

Крок 04: Використання компонента в будь-якому фреймворку

Підсумки

Як ефективно ділитися кодом між функціями AWS Lambda?

Використовуйте Bit для безперешкодного обміну кодом між вашими функціями Lambda

Дізнайтеся більше

Як ефективно ділитися кодом між функціями AWS Lambda?

Використовуйте Bit для безперешкодного обміну кодом між вашими функціями Lambda

5 способів поділитися кодом між функціями Lambda

Як поділитися кодом між функціями Lambda?

Сучасний підхід до розробки на React

Створюйте композиційні та модернізовані додатки на React за допомогою Bit!

Monorepo, Poly-repo чи без репозиторію?

Використання Bit для того, щоб зробити «необоротні рішення» простими для ухвалення та зміни.

3 способи розпочати роботу з React додатком у 2024 році

Використовуйте інструменти як Bit, Vite та Refine для створення кращих додатків на React у 2024 році

Сучасний підхід до розробки на Angular

Створюйте композиційні та модернізовані додатки на Angular за допомогою Bit!

Основи життєвого циклу компонентів Bit

Дізнайтеся основи розробки компонентів Bit з порадами та трюками

Вам також може сподобатися

Leave a Reply