[코드잇] 리액트 웹 개발 시작하기 (1)

- 리액트로 웹 사이트를 개발할 때에는 주로 create-react-app이라는 것을 사용

- create-react-app은 리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태의 프로젝트를 생성해 주는 도구

- Vs Code의 터미널에서 crete-react-app 명령어를 실행

-> 새로운 리액트 기반 웹 애플리케이션을 생성하는 명령어

- npx 명령어는 npm 패키지를 설치하고 곧바로 실행시켜줌

npx create-react-app <your-project-name>

개발 모드 실행

- cd는 change directory의 약자로, 현재 커맨드 라인 도구가 위치한 경로를 변경하는 역할

- 먼저 생성한 프로젝트 폴더 안으로 들어가고 이후에 npm start 명령어를 통해 애플리케이션을 실행

cd 프로젝트 폴더명
npm run start

개발 모드 종료

- ctrl+c

리액트 개발자 도구

- 리액트로 개발한 웹 페이지에서 개발자 도구를 열어보면 Components와 Profiler 존재

- Components

-> App이라는 리액트 컴포넌트가 있다!

- 리액트 최신 버전

-> ReactDOM.render()함수대신 root.render() 함수 안에서 작성

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>안녕 리액트!</h1>);

JuSoft