[React] create-react-app

학습일 : 2023. 03. 15

---

create-react-app 을 사용한다면
ReactJS 어플리케이션을 만듦에 있어 훨씬 쉬워지게 된다.

---

<node.js 설치하고 프로젝트 생성 전 준비사항>

1. 먼저 node.js 를 아래 사이트에서 설치

https://nodejs.org/ko/download/

 

 

2. node.js 가 설치된 후 윈도우의 경우 cmd 창에서

 node -v

입력 후 엔터 치고 버전이 제대로 뜨는지 확인

 

3.

npx

입력 후 엔터 치면 경로가 어디어디에 있다라고 제대로 나오는지 확인

 

위 내용 모두 제대로 실행된다면 준비 완료

 

---

<리액트프로젝트(폴더)를 처음 만들기 위한 방법>

 

1. cmd창에 

npx create-react-app 만들프로젝트명

을 입력한다. (그럼 해당 경로에 폴더가 하나 생김)

 

 

2. VSC에서 그 폴더를 열어주면 준비 완료

---

만들어준 VSC 프로젝트 폴더를 열고

터미널창에서 

npm start

를 입력하게 되면

이 뜨게됨

 

그러면 바로 개발용 서버가 하나 만들어지는데

 

    

 http://localhost:3000     

바로 이것이다.

(create-react-app 을 이용하면 얻을 수 있는 장점 중 한가지는
auto-reload (자동 재실행) 이다.)

 

 

잘 돌아가면 다시 VSC로 와서

프로젝트 중 필요없는 파일들을 싹 다 정리해준다.

index.js 와 App.js 빼고

프로젝트 폴더 안 파일을 모두 삭제하도록 한다.

정리하면 아래와 같다.

 

 

 

 

 

그다음 index.js 와 App.js 파일 내에서도 필요없는 코드를 지워줄 필요가 있는데,

아래와 같이 정리해주면 되겠다.

 

 

index.js

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


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

 

 

App.js

function App() {
  return (
    <div>
      <h1>Welcome back!!!!</h1>
    </div>
  );
}

export default App;

 

 

이상 끝