[생활코딩 리액트] 1-7강 리액트 기본, 공부전략, 학습환경 설정

1. 리액트- 컴포넌트기능

1) 가독성을 높여줌

2) 재사용성을 높여줌

3) 유지보수가 훨씬 더 편리해짐

 

2. 리액트 공부 전략

📌공부 Tip

리액트 공식문서와 친해지기

* reactjs.org *

 

 

3. 리액트 학습환경

코드샌드박스를 이용해 간편한 리액트 학습환경을 사용할 수 있다. 

codesandbox.io/s/new

React - CodeSandbox

 

4. Terminal을 통해 create-react-app install을 마친뒤, VS code의 터미널에서 다음의 코드를 입력한다.

npm run start

라고 치고 엔터를 눌러 실행한다. (종료를 원할때는 command + c를 누른다.)

요런 화면들이 뜨게 된다. 준비완료!

오른편은 리액트로 만든 샘플 웹애플리케이션이다. 

이렇게 자동 세팅되어있는 샘플을 수정해서 나만의 웹 애플리케이션을 만들어가는 것이 이 수업의 목표다. 

 

 

 

src에 담긴 코드들이, index.html에 들어갈 컴포넌트의 내용들이다. (이 수업에서는, 함수타입으로 적혀있는 코드를 클래스 타입의 코드로 변경해서 진행한다고 한다. )