Typescript를 사용하여 React에 NextUI 설치

이 섹션에서는 vite 도구를 사용하여 typescript로 반응 js에 다음 UI를 설치합니다. NextUI를 사용하면 디자인 경험에 관계없이 React Aria를 기반으로 하고 Vuesax에서 영감을 받아 React.js 및 Stitches로 만든 아름답고 현대적이며 빠른 웹 사이트/애플리케이션을 만들 수 있습니다.

Vite를 사용하여 React J 설치

NPM 사용:

npm create vite@latest

털실로:

yarn create vite

다음으로 반응 js 프로젝트를 선택합니다.



typescript로 반응하려면 Type react-ts를 선택합니다.

✔ Project name: … react-nextui
✔ Select a framework: › react
? Select a variant: › - Use arrow-keys. Return to submit.
  react
❯  react-ts

프로젝트로 이동하여 npm을 설치 및 실행합니다.

cd react-nextui
npm install
npm run dev 

반응에 NEXTUI 설치

React 프로젝트 디렉토리 내에서 다음 중 하나를 실행하여 NextUI를 설치합니다.

yarn add @nextui-org/react
# or
npm i @nextui-org/react

React에서 NextUI 설정

NextUI가 제대로 작동하려면 애플리케이션의 루트에 NextUIProvider를 설정해야 합니다.
src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { NextUIProvider } from '@nextui-org/react';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <NextUIProvider>
      <App />
    </NextUIProvider>
  </React.StrictMode>
);

반응 js에서 nextui 버튼을 가져옵니다.
src/App.tsx

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import './App.css';
import { Button } from '@nextui-org/react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React + NextUI</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
        <Button>Next UI Button</Button>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  );
}

export default App;

또한 읽기

Install NextUI in NextJS with Typescript
NextUI Login Form Example
NextUI Buttons Example