[React] basic - 1

리액트 프로젝트에서는 HTML 파일이 딱 하나 있다.
JSX라는 문법을 사용한다. (JSX는 HTML을 품은 JavaScript)
그래서 뷰를 그리는 요소들이 JS파일에 들어간다.

JSX 규칙
1. 태그는 꼭 닫아주기
2. 무조건 1개의 엘리먼트를 반환하기
3. JSX에서 Javascript 값을 가져오려면 중괄호{}를 쓴다.
4. class 대신 className
5. 인라인으로 style 주려면?

//중괄호 두 번(딕셔너리도 자바스크립트니까)
<p style={{color: 'orange', fontSize: '20px'}}>안녕하세요 리액트 반입니다 :)</p>
//
//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };
  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

Quiz_간단한 텍스트 입력 화면 만들어보기