1. 어떠한 흐름으로 오늘날 React가 많이 사용되고 있는지 설명할 수 있다.
2. React가 무엇인지 정의할 수 있다.
3. CRA를 설치하고 폴더와 파일이 어떻게 구성되어 있는지 설명할 수 있다.
4. Component의 개념과 종류에 대해 설명할 수 있다.
5. JSX 를 정의하고 기본 특성에 대해 설명할 수 있다.
6. 기존에 구현한 Westagram을 React 로 변환해 렌더링 할 수 있다.

작업 환경

Node.js&npm

Node.js
자바스크립트가 브라우저 밖에서도 동작하게하는 환경
설치 확인 :: $node -v

npm
Node 기반 패키지 도구
설치 확인 :: $npm -v

CRA(Create-React-App)

리액트 프로젝트를 시작하기위한 세팅 도구
프로젝트 설치: npx create-react-app (프로젝트 이름)
로컬 서버 띄우기: npm start

폴더 구성

1. public 폴더
웹을 배포한다는 건 특정 폴더(public)를 서버 컴퓨터에 올려두는 것
-index.html
-images : 이미지 파일 관리
-data : mock data 관리

src 폴더
-components : 공통 컴포넌트 관리(ex. Header, Nav, Footer)
-assest/images : css에서 background-image로 활용한 이미지 관리
-pages : 페이지 단위 컴포넌트 폴더로 구성
ex) Login.js, Main.js

styles 폴더
-reset.css : css 초기화
-commom.css : 공통 사용 css 속성 정의 (ex.font-family)