[React] 프로젝트 생성하기

[ 프로젝트 생성 ]

$ npx create-react-app 폴더이름

npx 란?

• npm 의 자식 명령어로 npm 보다 가볍게 패키지를 구성한다.
• npm 버전이 5.2 이상, node 버전이 14 이상이어야 한다.
  (Node.js 설치 필수)

test 라는 이름으로 프로젝트를 생성하니 위와 같은 파일들이 생긴 것을 볼 수 있다.

[ 프로젝트 실행 ]

$ npm start

생성된 폴더로 이동하여 위 명령어를 입력하면 3000번 포트로 리액트 프로젝트가 실행되는 것을 볼 수 있다.

[ 프로젝트 구조 ]

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
// css 파일
import './index.css';
// js 파일
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
// index.html의 <div id="root></div>안에 아래 내용이 들어가서 화면에 보여지게 된다.
root.render(
  // 문제점을 발견해준다
  <React.StrictMode>
    // App.js에서 import한 컴포넌트
    <App />
  </React.StrictMode>
);

// 성능 측정
reportWebVitals();

App.js

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

export default App;

App.js 의 내용을 비우고 h1 태그에 Hello 문자열만 입력해주니 다음과 같이 잘 실행되는 것을 볼 수 있다.