[ React : CRA ] create-react-app ( CRA ) 시작

kitez 2021. 12. 10. 13:23

2021. 12. 10. 13:23

(1) CRA 시작하기

npx create-react-app { app project name }

위 명령어를 terminal에 입력하면 아래와 같은 file들이 다운로드 되고, directory구조는 보이는 것과 같다.

npm start

npm start

npm start 는 프로젝트를 시작하는 명령어이다.

필요없는 파일 제거

필요없는 png, css, js 파일들을 모두 제거하고 src directory에는 index.js, App.js 파일만을 남겨둔다.

index.js

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

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

App.js

function App() {
  return (
      <div className="App">
        Hello World!
      </div>
  );
}

export default App;

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
      
    </div>

  </body>
</html>

=> App.js 에서 작성한 내용인 [ <div className="App">Hello World!</div> ] 는 index.js에 의해서 index.html의 id가 root엔 div tag안에 들어가게 된다.

index.js의 [ <App />, document.getElementById('root') ] 가 이 역할을 한다.

728x90

'Framework\Library > React' 카테고리의 다른 글

[ React : CSS ] Component styling (1)	2022.01.05
[ React ] React 동작 원리( DOM, Virtual DOM) (4)	2021.12.10
[ React : Next.js ] Pages (0)	2021.11.23
[ React : Next.js ] _app.js (0)	2021.11.23
[ React ] Next.js : React Framework + <Link>, CSN (0)	2021.11.23

개발야옹