React 구성 요소를 추가하는 Astro 1.0

9107 단어 astroreact
나는 과거에 Astro articles의 공평한 몫을 썼지 만 Astro 1.0 출시 이후 몇 가지 사항이 변경되었습니다.

Astro에서 작업을 수행하는 새로운 방법을 탐색하기 위해 이전 기사를 다시 살펴보는 것이 최선이라고 결정했습니다.

이 기사에서는 Astro에서 React 구성 요소를 실행하는 방법을 살펴보겠습니다. ( the old way of adding React in Astro )

Astro에 리액트 추가



Astro의 최소 시작 팩을 사용해 봅시다. 깨끗하기 때문에 가장 사용하기 쉽습니다.

mkdir astro-react && cd astro-react


폴더가 설치되면 최소 스타터를 설치할 수 있습니다.

npm init astro -- --template minimal


설치가 완료되면 매우 기본적인 Astro가 시작됩니다. 계속해서 렌더링된 React를 추가해 봅시다.

npm run astro add react


이렇게 하면 React와 렌더링 및 필요한 구성이 Astro 구성 파일에 추가됩니다.

이astro.config.mjs 파일을 열면 다음이 표시되어야 합니다.

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
});


이제 새 구성 요소를 생성해 보겠습니다. src/components/React.jsx .

import { useState } from 'react';

export default function React() {
  const [counter, setCounter] = useState(0);
  const name = 'React';

  return (
    <div>
      <button onClick={() => setCounter((i) => i - 1)}>-</button>
      <pre>{counter}</pre>
      <button onClick={() => setCounter((i) => i + 1)}>+</button>
      <p>I'm a {name} component</p>
    </div>
  );
}


이제 src/pages/index.astro 파일로 이동하여 이 구성 요소를 가져옵니다.

---
import React from '../components/React.jsx';
---
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <React />
    </body>
</html>


응용 프로그램을 실행하면 구성 요소가 렌더링되고 변수 이름이 설정되는 것을 볼 수 있습니다.

그러나 카운터는 아무 것도 하지 않습니다.



그렇다면 이 카운터를 작동시키려면 어떻게 해야 할까요?
구성 요소에 수화 지시문을 사용해야 합니다.
  • <React /> : 일반 HTML 버전 get이 렌더링됨
  • <React client:load /> : 페이지 로드 시 구성 요소를 렌더링합니다
    • .
  • <React client:idle /> : 브라우저가 초기 로드로 완료되면 렌더링됨
  • <React client:visible /> : 구성 요소가 보기로 스크롤되면 렌더링됩니다
    • .
  • <React client:media={MEDIA_QUERY} /> : 미디어 쿼리가 적용 가능한 경우 렌더링됨
  • <React client:only="react" /> : 서버가 아닌 구성 요소 클라이언트측만 렌더링함

    • 클라이언트 지시문Astro docs have you covered에 대해 자세히 알고 싶으십니까?

    예를 들어 둘 중 하나를 사용할 수 있지만 이 특정 구성 요소에는 idle 또는 load가 가장 적합합니다.

    완성된 샘플 코드는 GitHub에서 찾을 수 있습니다.

    읽어주셔서 감사합니다. 연결해 봅시다!



    제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
    Salesforce에서 Lineworks에 알림을 보내려고 한 이야기 ​​(구축편)
    'kubectl 설명' 이해

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage