const hi = <p>Hi</p>;

const hi = <p>Hi</p>;

const myFavorite = {
  food: <li>샐러드</li>,
  animal: <li>dog</li>,
  hobby: <li>programming</li>
};

와 는 같은 표현입니다.

Nested JSX

1. (필수) 소괄호로 감싸기

const good = (
  <div>
    <p>hi</p>
  </div>
);

여러가지 요소가 들어가게 하려면 () 소괄호로 감싸줘야 합니다.

2. (필수) 항상 하나의 태그로 시작

const wrong = (
      <p>list1</p>
      <p>list2</p>
      );

위와 같이 제일 처음 요소가 sibling이 되면 안 됩니다. 무조건 하나의 태그로 감싸져야 합니다.
무조건 하나의 태그로 감싸져야 합니다.

	const right = (
      <div>
        <p>list1</p>
        <p>list2</p>
      </div>
      );

Rendering

html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering)이라고 말합니다.

React 요소가 Dom node에 추가되어 화면에 렌더되려면 ReactDOM.reder 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('root')  
  );

Component

React에서 Component라는 개념을 많이 사용합니다.
Component는 개념적으로 Javascript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반화합니다.

Component를 쉽게 말하자면 재사용 가능한 UI 단위입니다.

Component 만들기
React는 Component를 만들고 관리하기 좋은 라이브러리입니다.

함수로 Welcome 컴포넌트 구현하기

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

여기서 Welcome의 파라미터로 쓰이는 "props"(props는 속성을 나타내는 데이터입니다)

claas로 Welcome 컴포넌트 구현하기

class Welcome extends React.Component {
  render() {
   	return <h1>Hello, {this.props.name}</h1>; 
  }
}

Create React App (cra) 설치하기

crate-react-app을 설치하기 위해서는 우선 node.js가 깔려 있어야 합니다.
node.js 링크 :https://nodejs.org/ko/

node.js 페이지에 가면 LTS버전과 현재 버전이 있습니다. 현재 버전은 LTS버전 보다 많은 기능이 있지만 LTS버전보다 안정성이 떨어지기 때문에 LTS버전을 다운로드 하는 걸 추천합니다.

node 설치 확인하기

터미널 창에서
node -v

npm -v

을 해서 위의 사진 처럼 나온다면 node설치 완료입니다.
node를 깔면 npm도 같이 다운로드 됩니다. 하지만 혹시나 다운로드 되지 않았을 수도 있으니 확인을 해야 합니다.

node.js가 깔려 있는 걸 확인했으니 이제 진짜 CRA를 설치할 때 입니다.

커맨드창에서 cd 명령어를 사용해서 설치하고자 하는 폴더로 이동합니다.

저는 이미 깔려 있어서 이동하지는 않았습니다.

커맨드창에 npx create-react-app 폴더이름
띄어쓰기에 조심해서 오류가 나지 않도록 해야합니다.

정상적으로 설치가 됐다면 이제는 설치를 확인할 차례입니다.
cd my-app으로 my-app디렉토리로 이동합니다.

npm start를 시작해서 react를 실행해봅니다.

이와 같은 화면이 나온다면 성공적으로 cra설치가 완료된 겁니다.

참고 :
cra 초기 세팅 방법
https://velog.io/@kj1509/React-%EC%B4%88%EA%B8%B0%EC%84%B8%ED%8C%85-

https://ssungkang.tistory.com/entry/React-React-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-create-react-app