작성하는 자바스크립트 코드는 Node라는 플랫폼에 의해서 실행된다.

노드 설치

패키지 매니저
무수히 많은 서드파티 패키지들이 모여있는 집합소이다.

리액트를 만드는 패키지를 설치 할 수도 있고, 우리가 리액트를 프로그래밍할때 필요한 여러패키지들을 다운로드 받을 수 있다.

npm, yarn 이있다. 성능적으로 개선된 yarn 을사용.

prettier

CRA React 프로젝트를 하기위해 필요한 여러 프로그램을 자동으로 설치해 주는 도구.

cra create-react-app 이라는 툴을 이용해서 자동으로 필요한것들을 설치

Webpack, Babel 이런것들이 배워서 직접하는 경우

yarn create react-app week-1

터미널을 켜서 yarn start

지금은 CRA를통해서 간단하게 실행해보았지만, 꼭 CRA를 통해서 리액트를 실행하는 것은 아니다.
정말 바닥에서 필요한 것들만 골라서 만드는 것도 좋은 경험

컴포넌트 레고블럭

컴포넌트라는 블럭을 조립해서 만들고 싶은 형태로 구현

컴포넌트를 만들어봐라 => html 태그를 리턴하는 함수를 만들면된다.

컴포넌트를 외부에서 사용할 수 있도록 익스포트를 해줘야한다. export default App

사용할때는 임포트를 해줘야한다. import React from "react"

기본틀

App 이라는 함수 영역에서 return 문을 기준으로 위쪽은 자바스크립트 사용, 아래쪽은 jsx를 쓰는 영역 html태그 작성하는 영역
react에서 html을 작성하는 문법

컴포넌트의 가장 첫글자는 반드시 대문자

폴더의 경우 소문자로 시작하는 카멜케이스로 작성을 해야한다

서로의 코드를 읽을때 더 빠르게 이해할 수 있다.

카멜 케이스 스네이크 케이스

컴포넌트를 부모자식 관계로 사용할 수 있다.
컴포넌트도 부모자식 관계를 이룰 수 있다.

'화면에 보여지게하다' = Rendering

이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식을 우리는 앞으로 JSX 라고 부를 것이다.

COMPONENT !!!!!!