필요하다

  • node.js
  • npm
  • git
  • npx

2019 업데이트 버전에는 npx 설치가 추가 됨.

  • npx 설치
    npm install npx -g

node.js, npm, npx, git를 설치하고
create-react-app 명령어로 리액트 프로젝트를 만들어보자

npx create-react-app movie_app_2019

movie_app_2019 폴더명으로 된 리액트 프로젝트를 생성하였다.

컴포넌트

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

컴포넌트를 작성할 때마다 import React from "react";를 꼭 써줘야만 한다.

<App /> 기본적으로 이것을 컴포넌트라고 부른다.
리액트는 컴포넌트와 함께 동작하고 모든 것은 컴포넌트라고 봐도 무방하다.

function App(){
    return (
        <div>
            <h1>Hello</h1>
        </div>
    )
}

export default App;

컴포넌트는 HTML을 반환하는 함수다.

리액트 어플리케이션은 한 번에 하나의 컴포넌트만 렌더링할수 있다.

Potato.js라는 파일을 만들어서 임폴트 시키고,
<App /> 옆에 <Potato /> 이렇게 2개 렌더링 못한다.

// 오류
ReactDOM.render(<App /><Potato />, document.getElementById("root"));

따라서 다른 모든 컴포넌트는 <App />안에 들어가야한다.