1. Get start

---

npx create-react-app <folder name>

프로젝트 폴더를 만들고 initialize한다.

npx create-react-app <folder name> --template typescript

(Typescript initialize)

npm start
yarn start // Open http://localhost:3000 at browser

react에서는 코드를 수정하면 자동으로 웹페이지가 reload된다.
안되는 경우 IDE에서 저장(Ctrl+s)하면 바로 반영된다..!

npm run build
yarn build

웹 배포에 사용하는 명령어이다. 배포 환경에서 사용할 파일을 만들어 준다!

npm? yarn?

갑자기 튀어나온 npm과 yarn은 무엇일까? 일단 둘다 package manager다.
npm은 node.js와 함께 제공되는 기본 패키지 관리자이고, yarn은 페이스북에서 npm 문제를 해결하기 위해 개발된 패키지 관리자이다. 성능이나 보안 면에서 yarn이 우세하다고는 하지만 두 관리자 모두 꾸준히 업데이트 되고 관리되고 있어 개인의 취향이라고 한다.
예전 세미나를 들었을 때 뭐가 됐든 좋으니 하나만 정해서 그것만 써라고 하신게 기억난다.

prettier

협업할 때 코드의 간결함, 통일성, conflict 방지를 위해 prettier를 이용하여 항상 같은 양식을 유지하도록 하기 위해 초기에 설정해주어야 한다고 배웠던게 기억난다.

2. Basics

2-1. JSX

JSX는 자바스크립트 문법을 HTML style로 작성할 수 있게 만들어주는 문법이다.
RTFM
예전에는 HTML, CSS, Javascript가 별개의 분리된 파일 내에 있었지만, 웹이 발전하면서 rendering logic(Javascript)과 markup language(화면에 표시되는 구조를 만드는 언어, HTML)를 함께 관리하게 되었다.

Rules
1. 2개 이상의 태그가 있으면 무조건 하나의 부모 태그로 묶여 있어야 한다. 보통 <div>...</div>로 묶는다. <>...</>로 크게 묶기도 한다(Fragment).
2. 모든 Tag를 닫아야 한다. 내용이 없는 태그거나 img등 관습적인 경우 Self-closing tag도 자주 쓰인다.

<img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />

3. camelCase를 적용한다. (컴포넌트는 PascalCase를 적용한다)
4. 주석은 {/* ... */} 로 적는다. 중괄호가 있어야 함!! 태그 내에서는 //...로 적을 수 있다.
5. {} 를 이용하여 javascript 문법을 적용할 수 있다.

2-2. props, state