[React] 리액트 다시 처음부터 시작해보기 (코딩애플 유튜브 무료강의)

유튜브 코딩애플 수업 듣는 중

 

장점

• SPA Single Page Application 
  페이지 전환을 부드럽게 해줌
• Component로 html 재사용 편리
• 데이터가 html에 자동 반영

 

 

프로젝트 시작하기 

▼ 새폴더 만들고 Shift 우클릭 → 여기에 PowerShell 창 열기

 

▼ 파워셸에 npx create-react-app 프로젝트명 써주기

create-react-app == 라이브러리

npm == 라이브러리 다 모아놓은 플랫폼 (node.js 설치하면 자동으로 딸려옴)

 

▼ 완료되면 만들었던 새파일에 blog라는 폴더가 생기고 안에 이것저것 생겨버림

▼ VS코드에 Open Folder → blog 열어서 폴더 선택해주기

 

▼ 열면 옆에 이런 것들 있는데 App.js 안에 코드를 짜는 것임

 

public 폴더 : static 파일 모아두는 곳

index.html : 메인페이지 (App.js에 있는 애들을 html로 변환시켜서 보여주는 곳)

 

src 폴더 : 소스코드 저장하는 곳

App.js : 메인 페이지인데 자바스크립트

 

 

App.js는 html이 아닌데 어떻게 화면에 보이는가!

JSX라서 입니다.

.js 파일에서 쓰는 html의 대용품이라고 보시면 됩니다.

 

 

※ 터미널 열어서 npm start 하면 옆에 창 열리면서 미리보기 가능해짐