Astro + React + Tailwind CSS 설치

9932 단어 tailwindcssreactastrowebdev
이 섹션에서는 Astro에 ReactJS를 설치합니다. Astro는 빠르고 콘텐츠 중심의 웹사이트를 구축하기 위한 올인원 웹 프레임워크입니다. Astro는 reactjs도 지원합니다. UI에는 astro가 Tailwind CSS를 쉽게 통합할 수 있으므로 Tailwind CSS를 사용합니다.

도구 사용



아스트로

Tailwind CSS(@astrojs/tailwind)

반응(@astrojs/반응)

아스트로 프로젝트 만들기



자동 CLI로 Astro를 생성합니다.

# npm
npm create astro@latest

# yarn
yarn create astro

# pnpm
pnpm create astro@latest


프로젝트 이름을 지정하고 astro 템플릿을 선택합니다.

✔ Where would you like to create your new project? … astro-react
? Which template would you like to use? › - Use arrow-keys. Return to submit.
  Just the basics (recommended)
  Blog
  Portfolio
  Documentation Site
 ❯  Empty project


npm 종속성을 설치합니다.

✔ Would you like to install npm dependencies? (recommended) … yes


타이프스크립트를 선택합니다.

? How would you like to setup TypeScript? › - Use arrow-keys. Return to submit.
 ❯ Relaxed
   Strict (recommended) - Enable `strict` typechecking rules
  Strictest
  I prefer not to use TypeScript


프로젝트로 이동합니다.

cd astro-react


Astro에 Tailwind CSS 설치



@astrojs/tailwind를 사용하여 astro에 tailwind css 설치

# Using NPM
npm run astro add tailwind
# Using Yarn
yarn astro add tailwind
# Using PNPM
pnpm astro add tailwind


Astro에 React JS 설치



@astrojs/react를 사용하여 astro에 react를 설치합니다.

# Using NPM
npx astro add react
# Using Yarn
yarn astro add react
# Using PNPM
pnpm astro add react


Astro에서 React 사용



Astro에서 반응을 사용하는 것은 매우 간단합니다. 반응 jsx 구성 요소를 만들고 astro 파일을 가져오기만 하면 됩니다.
React를 사용한 Astro의 카운터 앱
먼저 구성 요소 폴더를 만들고 Counter.jsx를 만들어야 합니다.
구성 요소/Counter.jsx


astro에서 useState 후크를 사용하여 반응 카운터를 생성합니다.
src/components/Counter.jsx

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex items-center justify-center gap-x-12">
      <button onClick={() => setCount((count) => count + 1)} className="px-4 py-2 text-white bg-indigo-600 rounded-md">
        Increment
      </button>
      <p>{count}</p>
      <button onClick={() => setCount((count) => count - 1)} className="px-4 py-2 text-white bg-red-600 rounded-md">
        Decrement
      </button>
    </div>
  );
}


astro 파일에서 React 카운터 구성 요소를 가져옵니다.
src/페이지/index.astro

---
import Counter from '../components/Counter.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 with React</title>
  </head>
  <body>
    <div class="flex flex-col items-center justify-center h-screen">
      <h1 class="mb-2 text-2xl text-yellow-700">Install ReactJS in Astro with Tailwind CSS</h1>
      <Counter client:load />
    </div>
  </body>
</html>




서버 실행

npm run dev
2022년의 대화
표준편차란? . . ? 내가 알기 때문에 누구나 알 수 있다! !

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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