[ReactJS] 프로젝트 진행 사전 세팅

<환경>

HW : Macbook Air M2 

OS : Monterey

IDE : VS code

 

1. node.js 설치 & npx 커맨드 명령어 확인

• 패키지 다운로드 링크 : https://nodejs.org/ko/download

다운로드 | Node.js

• 설치 완료 후 node.js 확인

 

2. 원하는 위치에 npx로 프로젝트 생성하기 

// 프로젝트 생성 명령어 : npx create-react-app [원하는 프로젝트 명]
npx create-react-app react-for-movie

 

3. VSCode 로 프로젝트 생성확인 & package.json 확인 및 테스트

 

• npm start 명령어 실행 후 localhost:3000 웹페이지 실행되면 성공

// vscode 터미널 창에서 생성된 프로젝트 경로에서 npm start 진행
cd react-for-movie
npm start

 

4. 초기 설치시 기본적으로 생성된 것들 정리

• 파일 삭제 : App.css, App.text.js, index.css, logo.svg, reportWebVitals.js, setUpTests.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;

소스코드 정리 후 localhost:3000 화면