Hello world Hello world

프로젝트 구조 main.jsx// node_modules의 모듈에서 react,react-dom 가져와서 임포트import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import './index.css'import App from './App.jsx'import App01 from './App01.jsx'import App02 from './App02.jsx'import App03 from './App03.jsx'import App04 from './App04.jsx'import App05 from './App05.jsx'createRoot(document.getElementById('root')).render( ..

1) 리액트 프로젝트 생성 ．npm create vite@latest 프로젝트 이름 ．y ．react 선택 ．JavaScript 선택 2) 리엑트 관련 모듈 설치 ．npm i ( 기본 라이브러리 설치 ) ．npm i react-router-dom ( 라우터 모듈 ) dev - 개발 ．npm run devbuild - 배포 ．npm run buildpreview - 점검 ．npm run preview

1. 리액트를 배우는 이유① 컴포넌트 기반 구조- UI를 작은 단위의 컴포넌트로 나누어 개발할 수 있어, 코드의 재사용성과 유지보수가 뛰어납니다.② 빠른 렌더링과 성능- Virtual DOM을 활용해 실제 DOM 조작을 최소화하여, 빠르고 효율적인 화면 업데이트가 가능합니 다.③ React Native로 모바일 앱 개발 확장- 리액트의 개념을 그대로 사용해 모바일 앱(Android, iOS) 개발도 할 수 있습니다.④ 풍부한 생태계와 커뮤니티.⑤ 대기업 및 다양한 프로젝트에서 사용 2. DOM이란 무엇일까? 춤추는 로봇을 만든다고 가정할때, 로봇의 도면(HTML) → 공장(브라우저) ① 공장(브라우저)에서는 도면(HTML)을 받아서 로봇(DOM)을 생성② 도면(HTML)인해 로봇(DOM)으로 실체화됨③..