• Component : React 페이지 구성하는 최소 단위
• Element : 컴포넌트의 구성 요소
• Props : 데이터
• State : View

Setting

• public 폴더에서는 index.html 파일만 남기고 다 지우고 src 폴더에서는 다 삭제하고 index.js파일을 새로 생성한다.

index.js

1) Import the React and ReactDOM libraries
2) Get a reference to the div with ID root
3) Tell React to take control of that element
4) Create a component
5) Show the component on the screen

• 터미널로 npm start하면 화면 뜸
  

JSX

• JSX is what we write out inside of a component to tell React what we want to show on the screen.
• 진짜 자바스크립트 코드는 아니기 때문에 Babel을 통해 번역된다.
• babeljs.io
• 우측처럼 리액트로 전부 다 작성하는 건 무리가 있기 때문에 jsx를 이용하는 것이다.
• 다시 말해, JSX 자체는 브라우저 상에 아무것도 나타내지 못하고, 리액트를 위한 instruction에 해당한다. 그러므로 We have to return it from a component for React to use it.

Printing JavaScript Variables in JSX

• We most often use curly braces to show Strings or Numbers.
• But if you put boolean value in the curly braces, nothing's gonna show up in the browser. Because React doesn't know how to render a Boolean of true, so it's not going to show anything at all.
• braces안에 Object 넣어서 리턴하면 오류남.

function App() {
  let message = "Bye there!";
  if (Math.random() > 0.5) {
    message = "Hello there!";
  }
  return <h1>{message}</h1>;
}

Shorthand JS Expression

Customizing Elements with Props

Props

• type="number" min={5} max={10} : Props
• Props : Customizes an element

Object

function App() {
	const config = {color : 'red'};
    return (
    	<div>
        	<h1>{config}</h1> // (1)
            <input abc={config} /> // (2)
        </div>
    );
}

• (1)은 에러가 난다 : Trying to display an object doesn't work
• (2)는 된다 : Trying to provide an object as a prop is OK.
• An object can't go inbetween our tags.
  

설명

function App() {
  const message = "Enter Age";
  return (
    <input
      type="number"
      min={5}
      max={10}
      list={[1, 2, 3]} 
      // Arrays : Wrap with curly braces
      style={{ color: "red" }} 
      // Objects : Wrap with curly braces
      alt={message} 
      // Variables : Wrap with curly braces
    />
  );
}