SP A와 정적 사이트 간에 React 구성 요소 공유

React 응용 프로그램과 Gatsby 사이트 간에 구성 요소를 공유하는 방법

SPA와 정적 사이트는 응용 프로그램과 사이트를 구축하는 데 다르고 서로 보완할 수 있는 방법이다.흔히 볼 수 있는 상황은 워터 클리닉이 응용 프로그램 자체의 역할을 차지하고 정적 사이트는 최적화된 속도와 검색 엔진 최적화로 유명하며 마케팅 사이트, 문서 사이트, 블로그 등과 상부상조한다.
이 두 가지 방법은 일반적으로React를 사용하여 이루어지며, 항상 "단일 원인 서비스"(예를 들어 응용 프로그램과 문서 사이트) 에서 함께 사용된다.이러한 상황이 발생할 때, 중요한 것은 응용 프로그램과 사이트 간에 일치하는 사용자 인터페이스를 유지하고 더 빨리 발송할 수 있도록 그들의 React 구성 요소를 공유하고 다시 사용하는 것이다.
이 프레젠테이션에서 저는 Bit SPA 응용 프로그램과 정적 블로그 사이트 사이에서 구성 요소를 공유할 것입니다. 이 구성 요소는Gatsby에서 실현됩니다.
Bit는 모든 코드 라이브러리에서 구성 요소를 쉽게 발표하고 기록할 수 있는 도구와 구성 요소 센터입니다.이 도구는 구성 요소를 격리하고 발표하는 데 사용되는 CLI 도구와 구성 요소의 위치를 관리, 기록 및 표시합니다.
애플리케이션에서 구성 요소 게시 및 블로그 설치

프레젠테이션 - CRA와 Gatsby 간에 구성 요소 공유

Bit.dev

에서'나쁜 농담'의 재사용 가능한 구성 요소를 내 구성 요소 집합에 발표

개츠비와 블로그 만들기('나쁜 농담 블로그')

내 새 블로그

에서'나쁜 농담'애플리케이션의 구성 요소 사용

1.create react 앱으로'나쁜 농담'응용 프로그램 만들기

프레젠테이션을 하기 위해 나는 엉터리 농담을 제공하는 응용 프로그램을 개발했다. - 환영합니다check it out.

$ npx create-react-app bad-jokes

// and then some coding...

이 프로그램의 모든 구성 요소는 같은 디렉터리에 있는 파일로 구성되어 있습니다. 구성 요소를 공유하고 다시 사용하기 쉽고 다른 구성 요소 관리자가 해결 방법을 찾을 수 있도록 합니다.
스타일에 있어서, 나는 미래의 소비 항목에서 CSS 모듈을 사용하여 클래스 간의'명명 충돌'을 방지했다.

|-- components
  |-- Button
    |-- Button.jsx
    |-- Button.module.css
    |-- index.js
  |-- Card
    |-- Card.jsx
    |-- Card.module.css
    |-- index.js
  |-- Text
    |-- Text.jsx
    |-- Text.module.css
    |-- index.js
  |-- AppBar
    |-- AppBar.jsx
    |-- AppBar.module.css
    |-- index.js
  |-- BadJokesViewer
    |-- BadJokesViewer.jsx
    |-- BadJokesViewer.module.css
    |-- index.js

내 응용 프로그램에는 재사용 가능한 구성 요소가 네 개 있습니다(check them out in my collection.

Button

AppBar

Text

Card

2. 내 응용 프로그램의 재사용 가능한 구성 요소 발표

Bit의 CLI 도구는 내 시스템에서 먼저 글로벌 설치됩니다.

$ npm install bit-bin --global

프로젝트 루트에서 Bit 작업공간 초기화:

$ bit init

그리고 나서 나는 나의 구성 요소를 추적하기 시작할 것이다.

$ bit add src/components/*

그런 다음 구성 요소에 컴파일러를 설치하고 구성합니다. (응용 프로그램의 구축 설정과 결합하기를 원하지 않기 때문입니다.)

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

이 구성 요소들을 표시할 때가 되었다.

$ bit tag --all

그리고 Bit.dev에 등록하여 구성 요소 집합을 만들고 터미널에서 로그인합니다.

$ bit login

드디어 구성 요소를 발표하거나 내보낼 때가 왔습니다.

$ bit export eden.badjokes

// where 'eden' is the username and 'badjokes' is the collection name

완성!주의해야 할 몇 가지 사항:

저는 도구 유형과 JSDocs를 사용하여 및...응, 내 구성 요소를 입력해.Bit는 이미 그것을 읽고 나를 위해 문서를 만들었다.Bit는 또한 TypeScript를 사용하여 문서를 작성합니다.

예를 들어 -
이것:

발생this:

Bit의 놀이터에서 보여준 예시 코드: https://bit.dev/eden/badjokes/button

구성 요소 페이지에서 제공하는 문서: https://bit.dev/eden/badjokes/button

1. 위의 예시에서 예시 코드와 운동장을 렌더링할 수 있습니다.구성 요소에 예제를 제공하지 않으면 Bit의 놀이터에서 렌더링할 수 없습니다.

이러한 예시를 통해 당신은 현재 다시 사용할 수 있는 집합을 가지게 될 것입니다looks like this.너도 미래의 모든 응용 프로그램에서 그것을 사용할 수 있다

3. 나의'나쁜 농담'애플리케이션을 위해 개츠비 블로그 사이트 만들기

제대로 된 blog이 없었다면 내 응용 프로그램은 지금처럼 성공하지 못했을 것이다

이를 위해 저는 Gatsby와 Gatsby starter 블로그 starter를 결합하여 사용합니다:

$ gatsby new bad-jokes-blog [https://github.com/gatsbyjs/gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog)

이것이 바로 블로그의'상자를 열면 바로 사용'의 모습:

이제 새 프로젝트의 루트 폴더로 이동하여'나쁜 농담'응용 프로그램에서 세 개의 구성 요소를 설치합니다:

$ npm i @bit/eden.badjokes.button
$ npm i @bit/eden.badjokes.card

모든 구성 요소가 어떻게 단독으로 설치되었는지 주의하십시오 (라이브러리에 결합되지 않은 독립 구성 요소에 대한 기대와 같이)

그리고 NPM을 사용했습니다.이 구성 요소들은 NPM이 아닌 Bit의 레지스트리에 등록되어 있습니다. 여기에서는

나도 실을 사용하여 첨가하거나 수입할 수 있다

주의해야 할 것은, Bit "가져오기"를 사용할 때, 실제로는 간단한 "설치"가 아니라, 리포에 구성 요소'복제'를 해서 새 버전을 Bit.dev 로 되돌릴 수 있도록 하는 것입니다

그리고 이 페이지에 설치된 구성 요소를 사용하여'나쁜 농담'프로그램과 같은 외관과 느낌을 갖게 할 것입니다:

결과(새 내용 포함):

나의'나쁜 농담'블로그: https://bad-jokes-blog.netlify.app/

지터덴 / 악작극 블로그

개츠비와 비트의 재사용 가능한 구성 요소로 구축된 블로그 사이트.개발

데이터 경로 설명 파일

한 블로그 사이트는 게이츠비와 다시 사용할 수 있는 React 구성 요소를 사용합니다. 이 구성 요소들은 저의 Bit 구성 요소 집합에서 나온 것입니다.개발

View on GitHub

결론

내가 전에 언급한 바와 같이 현실에 직면할 때가 되었다.단지 하나의 응용 프로그램을 개발하는 것만으로는 거의 부족하다.우리는 보통 정적 페이지가 추가로 필요하다는 것을 발견한다. 이 페이지들은 자신의 저장소에 구축된 것이고, 서로 다른 도구 집합을 사용하지만, 외관과 행위는 모두 같아야 한다.구성 요소를 공유함으로써 일치된 사용자 인터페이스를 누릴 수 있고