Как делиться компонентами React между проектами NextJS

Публикация компонентов React из проекта NextJS для повторного использования в другом.

Next.js - самый популярный фреймворк React для разработки приложений рендеринга на стороне сервера React.

Это руководство поможет вам разработать повторно используемые компоненты React, которые можно использовать в разных проектах и ​​репозиториях с помощью платформы Bit.

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

Создание повторно используемого компонента списка карточек

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

Эти компоненты будут стилизованы с помощью styled-components. Мы выделим кнопку и карточку в отдельный компонент, чтобы их можно было использовать отдельно вне списка карточек:

Перед началом работы убедитесь, что на вашем компьютере установлена ​​Node.js версии 10.3 или более поздней. Давайте установим новое новое приложение Next с помощью терминала:

npx create-next-app
# or
yarn create next-app

Внутри вашего каталога Next создайте новый каталог с именем components/, в котором будут размещены все ваши повторно используемые компоненты.

Пришло время разработать наши компоненты. Начнем с разработки StyledButton компонента. Это простой компонент с реквизитами для функций Title и onClick:

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const Button = styled.button`
  cursor: pointer;
  background: #DB7093;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #DB7093;
  border-radius: 3px;
&:hover{
    background: #C16482;
    border: 2px solid #C16482;
  }
`;
const StyledButton = ({
  title,
  onClick,
}) => (
  <Button onClick={onClick}>{title}</Button>
)
StyledButton.propTypes = {
  /**
   * button title
   */
  title: PropTypes.string.isRequired,
  /**
   * on click function
   */
  onClick: PropTypes.func.isRequired,
};
export default StyledButton;

Затем нам нужно написать компонент StyledCard, который использует компонент StyledButton. Этот компонент будет иметь свойства image, title, date и description, которые будут отображаться как карточка.

Мы передадим свойства StyledButton title и onClick через этот компонент, используя свойства buttonTitle и buttonClick:

import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import StyledButton from '../StyledButton'
const StyledContainer = styled.div`
  border: 1px solid #C16482;
  padding: 25px 12px 18px;
  margin: 25px 20px;
};
`
const StyledImg = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #C16482;
`
const Title = styled.h2`
  color: #C16482;
  font-weight: 300;
  @media (max-width: 500px) {
    font-size: 1rem;
  }
`
const Date = styled.div`
  color: #ccc;
  font-weight: 300;
  margin: 6px 0;
  @media (max-width: 500px) {
    font-size: 0.8rem;
  }
`
const Description = styled.p`
  color: #C16482;
  font-weight: 300;
  @media (max-width: 500px) {
    font-size: 0.75rem;
  }
`
const StyledCard = ({
  image,
  title,
  date,
  description,
  buttonTitle,
  buttonClick
}) => (
  <StyledContainer>
    <StyledImg src={image} />
    <Title>{title}</Title>
    <Date>{date}</Date>
    <Description>{description}</Description>
    <StyledButton title={buttonTitle} onClick={buttonClick} />
  </StyledContainer>
)
StyledCard.propTypes = {
  /**
   * post image
   */
  image: PropTypes.string.isRequired,
  /**
   * post title
   */
  title: PropTypes.string.isRequired,
  /**
   * date
   */
  date: PropTypes.string.isRequired,
  /**
   * short description of the post
   */
  description: PropTypes.string.isRequired,
  /**
   * Title for the button
   */
  buttonTitle: PropTypes.string.isRequired,
  /**
   * on click function for the button
   */
  buttonClick: PropTypes.func.isRequired,
};
export default StyledCard

Наконец, мы будем использовать StyledCard внутри StyledCardList компонента. Этот компонент примет одну опору массива, содержащую список сообщений, которые будут отображаться компонентом:

import React from 'react';
import styled from 'styled-components'
import PropTypes from 'prop-types';
import StyledCard from '../StyledCard';
const StyledContainer = styled.div`
  max-width: 750px;
  padding: 50px 12px;
  width: 100%;
  margin: auto;
`
const StyledCardList = ({postList}) => {
  return (
    <StyledContainer>
    {postList.map(post => (
        <StyledCard
          key={post.id}
          image={post.image}
          title={post.title}
          date={post.date}
          description={post.description}
          buttonTitle={post.buttonTitle}
          buttonClick={post.buttonClick}
        />
    ))}
    </StyledContainer>
  );
};
StyledCardList.propTypes = {
  /**
   * A list of posts to render
   */
  postList: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number,
      image: PropTypes.string,
      title: PropTypes.string,
      date: PropTypes.string,
      description: PropTypes.string,
      buttonTitle: PropTypes.string,
      buttonClick: PropTypes.func,
    })
  ),
};
export default StyledCardList;

Вы можете протестировать компонент StyledCardList, предоставив ему фиктивные данные и отобразив его внутри pages/index.js:

const postList = [
  {
    id: 1,
    image: "https://picsum.photos/id/134/300/200",
    title : "My First Post",
    date : "06/26/2020",
    description : "This is my first post. Hello World!",
    buttonTitle : "Read this post",
    buttonClick : () => alert("This should take you to the post link")
  },
  {
    id: 2,
    image: "https://picsum.photos/id/5/300/200",
    title : "My Second Post",
    date : "06/27/2020",
    description : "This is my second post. Keep up the rythm!",
    buttonTitle : "Read this post",
    buttonClick : () => alert("This should take you to the post link")
  }
]
// render the postList into StyledCardList component
<StyledCardList postList={postList} />

Теперь, когда мы разобрались с нашими компонентами, мы можем начать публиковать наши компоненты на платформе Bit, чтобы другие проекты могли использовать их повторно.

Регистрация компонентов в Bit

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

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

Давайте начнем публиковать наши компоненты в Bit. Откройте свой терминал и установите инструмент Bit terminal:

npm install bit-bin --global

После завершения установки вернитесь в терминал следующего проекта и инициализируйте новое рабочее пространство Bit:

bit init

Эта команда сгенерирует для вас следующий ресурс:

• Конфигурация битового рабочего пространства внутри package.json
• Растровое изображение компонентов с .bitmap файлом

В вашем package.json файле вы увидите новую bit конфигурацию, подобную этой:

"bit": {
    "componentsDefaultDirectory": "components/{name}",
    "packageManager": "npm"
  }

Далее вам необходимо войти в свою учетную запись Bit из терминала:

bit login

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

Чтобы начать процесс публикации, добавьте свои компоненты с помощью команды bit add:

bit add components/*

Вы можете просматривать компоненты, которые отслеживали на Bit, но пока не публикуйте их:

bit status

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

bit import bit.envs/compilers/react --compiler
bit build

Компилятор Bit’s React соберет ваши компоненты в изолированной среде, чтобы убедиться, что сборка также будет успешной в облаке или в любом другом репозитории.

После завершения сборки и отсутствия ошибок вы можете пометить свои компоненты как готовые к публикации. Например:

bit tag --all 0.0.1

Команда пометит все отслеживаемые компоненты как готовые к публикации как версию 0.0.1. Если вы опустите версию, Bit просто пометит ближайшую следующую версию ваших компонентов.

Хорошо, теперь, когда у нас есть компоненты, помеченные тегами, давайте опубликуем их в коллекции Bit с помощью команды bit export и полного имени коллекции, структурированного как <username>.<collection>:

bit export nsebhastian.post-card-components

После этого вы можете посетить веб-сайт bit.dev и увидеть свои компоненты, опубликованные внутри коллекции, которую вы создали ранее.

Если вы нажмете на один из компонентов, вы увидите, что у Bit есть игровая площадка, которая отображает компонент, поэтому вы можете увидеть, как работает компонент, без необходимости загружать и устанавливать его локально:

Bit также обнаруживает использование prop-types в вашем коде React и генерирует документацию на его основе. Вы можете увидеть документацию чуть ниже игровой площадки:

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

Теперь, когда ваши компоненты опубликованы на Bit, вы готовы повторно использовать их в других проектах на основе React, помимо NextJS, включая проекты, использующие Gatsby или Electron. Просто установите компонент, используя свой любимый менеджер пакетов:

npm i @bit/nsebhastian.post-card-components.styled-card-list
#or
yarn add @bit/nsebhastian.post-card-components.styled-card-list

И импортируйте компонент в свое приложение:

import StyledCardList from '@bit/nsebhastian.post-card-components.styled-card-list';
const App = () => {
  return(
    <StyledCardList postList={postList} />
  )
}

Если вы хотите импортировать компоненты других людей и настроить их в соответствии со своими потребностями, вы можете сделать это с помощью команды bit import. Обратите внимание, как формат отличается от установки с помощью диспетчеров пакетов:

bit import nsebhastian.post-card-components/styled-card-list

По умолчанию компонент будет установлен в каталог components/. Вот ссылка на завершенный репозиторий Next.js app.

Заключение

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

Bit - удобный инструмент разработки, который помогает отслеживать, публиковать и устанавливать компоненты с помощью простых команд терминала, подобных Git и NPM. Используя Bit, вы можете быстрее разрабатывать свое приложение, повторно используя компоненты, которые были разработаны другими, и даже сотрудничать для улучшения компонентов.

Учить больше