Create React App

React는 Node.js를 기반으로 구동되는 라이브러리(패키지)이다. Node.js의 Webpack, Babel 등의 여러 가지 패키지들을 이용하여 동작하는데, 이러한 기초 설정 작업을 보일러 플레이트 Create React App으로 대체할 수 있다.

 

보일러 플레이트를 사용하기 위해서는 npx가 필요한데, 보통 Node.js와 함께 설치되지만 설치가 되어있지 않다면 아래 명령어로 설치를 하면 된다.

npx --v // 버전코드(3자리 숫자)가 나오면 정상
npm install -g npx // 버전코드가 나오지 않았을 때

 

이제 npx가 설치되어 있다면 아래 명령어로 React 프로젝트를 생성할 수 있다. 

npx create-react-app 프로젝트이름

생성된 파일에서 필요 없는 부분은 삭제

 

만약 node_modules파일이 없는 리액트 프로젝트를 받았다면, 아래 명령어로 필요한 파일들을 다운받을 수 있다.

npm i

 

 

 

※ 참고 : React에서는 ES모듈 시스템에서 사용하는 내보내기 방법을 사용한다.

import 모듈 from 경로
export default(하나의 함수만)

App.js

import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h2>안녕</h2>
      </header>
    </div>
  );
}

export default App;

index.js

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);