[React] (1)프로젝트 생성

1. Node.js 설치

React 프로젝트를 생성 전, Node.js를 설치해야 한다.

https://nodejs.org/en

Node.js

 

** React 개발에 Node.js가 필요한 이유는 아래 게시글 내용을 참고하도록 하자

https://chucoding.tistory.com/86

React 개발에 왜 Node.js가 필요할까??

- 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

 

오류없이 실행되면 아래와 같은 화면이 표출된다.