리액트

• 리액트로 만든 프로젝트는 노드에서 동작함.
• 근데 노드라는건 버전이 많고 업그레이드가 빠른편이기떄문에 nvm을 설치하여 버전관리를쉽게 할수있음. 따라서 리액트 프로젝트마다 사용했던 노드를 쉽게 적용시킬 수 있다.

npm

• 노드 패키지 매니저의 약어.
• 노드가 설치되면 자동으로 설치된다.
• npm은 third-party(제3자) 패키지를 활용할수있게해준다.(원하는 패키지를 설치하고 관리해줌)

yarn

• npm과 비슷한역할.
• 둘다 "누가 만들어놓은 좋은것"(=패키지)을 가져다 쓰기 편하게 도와줌.
• npm보다 좀더 빠르다.
• yarn을 이용하여 앞으로의 리액트강의를 진행할예정.

cra (create react app)패키지

• yarn으로 설치한 첫번쨰 패키지.

yarn add global create-react-app (global은 전역을의미)

• 리액트로 웹사이트를 만드는것은 레고로 성을 만드는것과같다.
• 어떠한 성을 만들려고할떄 필요한 레고들을 일일이 구매할 수있겠지만, 그 성을 구성하는 레고들로 이루어진 패키지를판매하는 상품도 있을것이다.
  그 성 패키지역할을하는 상품이 리액트에선 cra패키지다!
• 웹사이트를 만들떄 필요한 것들을 몽땅 떄려넣은 패키지라 생각하자.

jsx

• react에서는 하나의 html 파일만존재한다. (public폴더내에)
  → app.js파일에서 보듯, jsx문법을 사용해서 react요소를 만들고 DOM에 렌더링을시켜 뷰를 생성한다.
• jsx는 html을품은 js로 생각하자.

jsx규칙

1. 태그는 무조건 닫아주기.

2. 무조건 1개의 엘리먼트를 반환하기.

3. jsx에서 js내용을 사용하려면 {}를활용.

4. class대신 className사용.