728x90
- body 하단에서 main.jsx 모듈 연결하여 시작, jsx는 리액트 컴포넌트 확장자
// index.html
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
// 상대경로로 App 컴포넌트 가져오기
import App from './App.jsx'
import './index.css'
// 엄격모드이므로 개발모드에서만 두번 렌더링하여 useEffect 스트레스 테스트
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
App.jsx
- root컴포넌트이며 메인페이지 역할
- 컴포넌트 파일명은 파스칼 케이스(첫단어 대문자)
// App.jsx
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
export default function App() {
return <h1>Hello World</h1>;
}
npm run build
- 기본설정은 서버루트가 기준이며 서버 base폴더 변경가능
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: '/react-todo/',
});'Coding > React' 카테고리의 다른 글
| 컴포넌트에 props전달 - 1 (0) | 2024.03.06 |
|---|---|
| jsx마크업,jsx안에서 자바스크립트 사용하기 (0) | 2024.03.05 |
| 컴포넌트 import, export / Default, Named Export (0) | 2024.03.05 |
| 리액트 - 컴포넌트생성 (0) | 2024.03.04 |
| 리액트 - 개발환경설정 (0) | 2024.03.04 |