React를 사용하여 Micro Frontend 만들기

부인 성명

이 기사는 ModSquad 커뮤니티의 도움으로 작성되었습니다. 관련 라이브 세션은 여기에서 볼 수 있습니다.

소개

안녕하세요, 동료 개발자 여러분!

Angular로 마이크로 프런트엔드 생성을 발견한 우리는 React로 또 다른 세계로 뛰어듭니다. Angular, React 및 Vue.js 프레임워크 각각에 대한 웹 구성 요소 사양을 사용하여 마이크로 프런트엔드를 만들려고 합니다.

React는 마이크로 프런트엔드 소셜 카드를 만들 때 최고의 개발자 경험을 제공합니까? 해 봅시다!

반응 앱 만들기

React는 create React applications을 사용하여 Create React App에 대한 간단한 방법을 제공합니다.

이전 블로그에서 본 것처럼 npm이 설치되어 있어야 합니다. 그런 다음 다음 명령을 실행하여 애플리케이션 스켈레톤을 생성할 수 있습니다.

npx create-react-app react-social-card

완료되면 react-social-card 폴더에서 사용할 수 있는 새 React 프로젝트가 있어야 합니다.
npm start 명령을 사용하여 시작하십시오.

기본 React 페이지는 http://localhost:3000에서 연결할 수 있습니다.

소셜 카드 코드 추가

custom-element를 구성하기 전에 React 소셜 카드 구성 요소를 생성해야 합니다. 약간의 조사 후 사용할 수 있는 코드의 예는 다음과 같습니다. https://codepen.io/leoraw/pen/ZjvRpL . 이 예를 공유해 주신 @leoraw에게 감사드립니다.

React 구성 요소 만들기

소셜 카드는 두 개의 서로 다른 React 구성 요소인 버튼 상자와 카드 자체로 나뉩니다.

먼저 components 폴더에 버튼 상자에 대한 새 파일을 만들고 이름을 ButtonBox.js로 지정하고 다음 코드를 복사합니다.

import React from "react";

const UiButton = props => {
   const classes = (props.isClicked) ?
     "ui-button clicked" : "ui-button";
   const number = (props.isClicked) ?
         (props.number + 1) : props.number;

   return (
     <button className={classes} id={props.text}
       onClick={() => props.onClick()}>
       <span className="ui-icon">{props.icon} </span>
       {number}
     </button>
   );
};

class ButtonBox extends React.Component {
   constructor(props) {
     super(props);
     console.log(props.likeIsClicked);
     this.state = {
       likeIsClicked: props.likeIsClicked

     };
   }

   toggle(index) {
     let state = {};
     state[index] = !this.state[index];
     this.setState(state);
   }

   render() {
     return (
       <div>
         <UiButton icon='♥' text='likes'
           number={this.props.likes}
           onClick={() =>
             this.toggle('likeIsClicked')}
           isClicked={this.state.likeIsClicked}/>
       </div>
     );
   }
}

export default ButtonBox;

그런 다음 같은 폴더에 SocialCard.js 파일을 만들고 다음 콘텐츠를 복사합니다.

이 새 구성요소는 이전 구성요소를 가져와서 사용합니다. 효과적으로 마이크로 프런트엔드의 내부 아키텍처를 통해 여러 구성 요소를 사용할 수 있으며 모든 구성 요소는 하나의 사용자 지정 요소로 빌드됩니다.

import React from "react";
import ButtonBox from "./ButtonBox";

const UiCard = props => {
 let {image, title, content} = props.content;
 return (
   <div class="card-wrapper">
     <div className='card-img'>
       <img src={image} />
     </div>
     <div className='card-content'>
       <h3>{title}</h3>
       <div>{content}</div>
     </div>
     </div>
 );
}

class SocialCard extends React.Component {
   render() {
     return (
       <div className='card-body'>
         <UiCard content={this.props.content}/>
         <div className='line'></div>
          <div style={{textAlign: 'right'}}>
             <ButtonBox
             likeIsClicked={this.props.likeIsClicked}
             likes={this.props.likes}/>
         </div>
       </div>

     );
   }
}

export default SocialCard;

기본 App.js 파일에서 새 구성요소 사용

이 두 구성 요소를 사용할 수 있게 되면 기본App.js 파일을 업데이트하고 이전 React 데모 코드를 제거할 수 있습니다.

기존 코드를 다음으로 대체하여 App.js 파일을 업데이트합니다.

import React from 'react';
import './App.css';
import SocialCard from "./components/SocialCard";

const cardDetails = {
   id: 0,
   content: {
       title: 'Shiba Inu',
       image: 'https://material.angular.io/assets/img/examples/shiba2.jpg',
       content: 'The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.',
   },
   likeIsClicked: true,
   likes: 5
}

function App() {
 return (
   <SocialCard
     key={cardDetails.id}
     content={cardDetails.content}
     likes={cardDetails.likes}
     likeIsClicked={cardDetails.likeIsClicked}
     />
 );
}

export default App;

여기에서 새로운 소셜 카드 구성 요소를 인스턴스화하고 표시할 일부 데이터를 제공하는 것을 볼 수 있습니다.

이제 애플리케이션을 다시 시작하거나 페이지를 새로고침하여 소셜 카드가 표시되는지 확인할 수 있습니다. 그러나 이것은 여전히 ​​원시 React 애플리케이션이며 작업을 완료하려면 custom-element를 정의해야 합니다.

앱을 맞춤 요소로 전환

src 폴더에서 components 폴더와 같은 수준에 custom-element라는 새 폴더를 만듭니다.

다음으로 관련 API를 사용하여 social-card-app.js를 정의하기 위해 custom-element라는 새 파일을 생성해 보겠습니다.

import ReactDOM from "react-dom"
import React from "react"
import App from '../App'

class SocialCardApp extends HTMLElement {
   connectedCallback() {
       this.mountPoint = document.createElement('span')
       this.render()
   }

   render() {
       ReactDOM.render(<React.StrictMode>
                   <App/>
           </React.StrictMode>,
           this.appendChild(this.mountPoint))
   }
}

customElements.get('react-social-card') || customElements.define("react-social-card", SocialCardApp)

"react-social-card"문자열은 custom-element 태그를 정의하는 데 사용되며 다음을 사용하여 React 앱을 렌더링합니다. <App/>. 러시아 인형과 유사합니다: custom-element > React app > social card component > buttonbox component.
그런 다음 다음public/index.html 파일에서 본문을 다음으로 바꿉니다.

<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <react-social-card></react-social-card>
</body>

브라우저를 다시 로드하고 HTML 콘텐츠를 확인합니다.


react-social-card 사용자 정의 요소가 사용되고 React 앱 콘텐츠를 로드합니다.

축하합니다! React를 사용하여 첫 번째 마이크로 프런트엔드를 만들었습니다!

자원:

위의 코드는 GitHub에서 사용할 수 있습니다. https://github.com/avdev4j/react-social-card

YouTube 채널에서 마이크로 프런트엔드 동영상을 시청하세요.

Discord에 가입하여 구성 가능한 앱에 대해 공유하고 알아보세요: https://discord.gg/SdMCvyzzHm