# Basics of React

📌 React를 왜 사용하는가?

React는 UI를 interative 하게 만들어준다.

1. 전체 프로그램 설계를 깔끔하고 일관성 있게 정리할 수 있는 조직성(organization)이 강함
2. 미리 만들어 놓은 조각을 다시 사용할 수 있어 코드 재사용성(reusability)이 높음
3. 기본 웹 프로젝트뿐 아니라 모바일 앱(React Native로 구현), 데스크탑 앱(Electron으로 구현)을 만들 수 있다는 점에서 매우 유연성(flexibility)이 높음

바닐라JS와 React 방식의 차이

• 바닐라 JS : HTML을 먼저 만들고, JS로 HTML을 가져와서 수정(번거로움)
• React : JS로 HTML 요소를 바로 만들고 수정

📌 JSX(JavaScript XML) : JS를 확장한 문법

HTML에서 사용하는 문법과 흡사한 문법을 사용해 HTML 요소를 만들 수 있다.

• createElement 대신 사용.
• 그냥 사용하면 브라우저가 JSX를 이해하지 못해서 에러가 나기 때문에 변환을 위해 Babel을 설치해주어야 함.
  Babel : JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 변환해줌.

예시

const title = <h3 id="title">hello!</h3>

컴포넌트를 다른 컴포넌트에 넣는 방법

</> 안에 넣어준다.

주의 :
1. 컴포넌트의 첫 글자는 항상 대문자여야 한다.
-> 소문자로 시작하면 HTML 태그로 인식함.
2. 컴포넌트는 함수로 만들어주어야 한다.

const Title = () => {
	<h1>hello!</h1>
}

const Button = () => {
	<button onClick = {()=>{color : red}}>
  	  click me 
	</button>
}

const Container = (
  <div>
    <Title/>
    <Button />
  </div>
)

⭐️ create react app

1. node -v, npx command 실행확인

• iterm에서 node -v 로 버전 확인. npx도 잘 되는지 확인.
• 맨 처음만 확인해주면 된다.

2. 터미널에 아래 문구 입력

npx create-react-app 프로젝트이름

혹은 npm install -g create-react-app, create-react-app 프로젝트 이름

3. vscode 실행

code 프로젝트이름

4. 터미널에 아래 문구 입력

npm start

• 개발용 서버 만듦.