Vite + React + Typescript + MUI 5 설치 및 설정
9392 단어 typescriptmuireactvite
view
Vite로 React 프로젝트 설치
npm을 통해 vite 설치:
npm create vite@latest
원사를 통해 vite 설치:
yarn create vite
반응을 선택합니다.
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla
vue
❯ react
preact
lit
svelte
typescript로 반응 js를 선택하십시오.
✔ Select a framework: › react
? Select a variant: › - Use arrow-keys. Return to submit.
react
❯ react-ts
프로젝트 디렉토리로 이동하고 종속성을 설치합니다.
cd react-mui
npm install
npm run dev
React Material UI 5(MUI) 설치
npm을 통해 mui 5 설치:
npm install @mui/material @emotion/react @emotion/styled
또는 원사를 통해 mui 5를 설치합니다.
yarn add @mui/material @emotion/react @emotion/styled
App.tsx에서 mui 버튼 구성 요소를 가져옵니다.
src/App.tsx
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import './App.css';
import { Button } from '@mui/material';
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 + + Typescript + MUI 5</h1>
<Button color="secondary">Secondary</Button>
<Button variant="contained" color="success">
Success
</Button>
<Button variant="outlined" color="error">
Error
</Button>
<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>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
);
}
export default App;
Reference
이 문제에 관하여(Vite + React + Typescript + MUI 5 설치 및 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/frontendshape/install-setup-vite-react-typescript-mui-5-onm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)