오늘도 코딩하나
[React] (1)프로젝트 생성 본문
1. Node.js 설치
React 프로젝트를 생성 전, Node.js를 설치해야 한다.
** React 개발에 Node.js가 필요한 이유는 아래 게시글 내용을 참고하도록 하자
https://chucoding.tistory.com/86
- Node.js는 React를 사용하기 더 쉽게 해주는 도구들을 내장하고 있는 오픈소스이자 JavaScript runtime environment
- Node.js 설치하는 경우 NPM(Node Package Manager)이 같이 설치되는데
이 NPM이란 것을 통해 React 개발에 필요한 다양한 모듈들을 다운받아 사용가능
2. 터미널에 npx 작성
npx create-react-app [프로젝트명]
3. 프로젝트명으로 생성된 폴더 open!
** 프로젝트 구성요소
(1) node_modules
- 프로젝트 구동에 필요한 모든 라이브러리 코드 보관함
(2) public
- html, image 등 static 파일 보관함
(3) ★src
- 코드짜는 곳
- App.js가 메인 파일
- App.js ---(index.js)---> index.html
(4) package.json
- 프로젝트 정보
** React에서의 화면 표출(index.html, index.js, App.js)
- index.html
id가 'root'인 div 존재
- index.js
'root'에 App.js 렌더링
- App.js
실제 화면에 표출되는 부분
=> App.js ---(index.js)---> index.html
4. 화면 띄우기
npm start
오류없이 실행되면 아래와 같은 화면이 표출된다.
'React > Lecture' 카테고리의 다른 글
[React] (6) Lifecycle과 useEffect (1) | 2024.06.04 |
---|---|
[React] (5) 리액트 라우터 (0) | 2024.05.28 |
[React] (4) 데이터 가져오기 (0) | 2024.05.24 |
[React] (3) image (0) | 2024.05.24 |
[React] (2)react-bootstrap 설치 (0) | 2024.05.24 |