react 프로젝트 시작하기

상위폴더에서

vite라는 도구를 이용해서 새로운 react라는 앱을 생성하는 명령어

npm create vite@latest

 

실행하면

프로젝트 이름 section2

어떤 프레임워크를 사용할건가 React

어떤 버전의 React앱을 만들거야 JavaScript

 

vs code에서 방금 생성한 폴더를 열어줌

 

B:\udemy-react-and-next-2023>npm create vite@latest
Need to install the following packages:
create-vite@8.0.2
Ok to proceed? (y)


> npx
> create-vite

│
◇  Project name:
│  section2
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  JavaScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes
│
◇  Scaffolding project in B:\udemy-react-and-next-2023\section2...
│
◇  Installing dependencies with npm...

 

설치 후

added 153 packages, and audited 154 packages in 48s

32 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
│
◇  Starting dev server...

> section2@0.0.0 dev
> vite


  VITE v7.1.12  ready in 1144 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

 

폴더이동 패키지 인스톨 npm install 하면 node_modules과 package-lock.json 생긴다

B:\udemy-react-and-next-2023\section4>npm i

 

react App 가동

B:\udemy-react-and-next-2023\section4>npm run dev

 

불필요한 파일 삭제

public폴더-vite.svg 삭제

src폴더-assets폴더-react.svg 삭제

 

App.jsx 파일 편집

import './App.css'

function App() {

  return (
    <>
      <h2>안녕 리액트</h2>
    </>
  )
}

export default App

 

App.css 파일 내용 전체 삭제

index.css 파일 내용 전체 삭제

 

main.jsx 파일 편집

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <App />
)

 

section7.zip

17.13MB

 

 

index.html

main.jsx

App.jsx