1. 프로그램 설치

• 리액트 사용방법
  1. Online playgrounds
  2. Add react to a Website (부분적으로 추가)
  3. Toolchains : https://github.com/facebook/create-react-app
     1. npm : node.js로 만들어진 앱들을 명령어로 설치할 수 있게 하는 node.js의 앱스토어

1. create react app 설치

<npm install>

• npm install -g create-react-app : 글로벌하게 create-react-app을 설치하라.

<npx>

• npx create-react-app 앱을 한번만 설치해서 임시로 사용한 후 지우는 명령어로, 공간을 많이 차지하지 않는다.

1. 폴더 세팅하기

• react-app이라는 폴더를 만든다.
• create-react-app . : 설치하는 명령어.
• npm run 혹은 npm run start : 리액트 실행

1. js 수정하기

• react의 모든 element들은 <div id="root">에 속해있는 것을 확인할 수 있다.

• src > index.js 파일

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
  

  • <App /> : 컴포넌트 (react를 통해 만든 사용자 정의 태그)이며 실제 구현은 import Aff from './App'; 에서 하게 된다.
  • index.js 가 주로 처음 실행되는 파일이다.
  • import App from './App' 부분과 <App /> 의 이름은 일치해야 하며 둘다 대문자로 시작해야 한다. from './App' 은 파일명을 적는 곳이다.