001. 준비 + jsx에 html 적용하기

개발환경 준비하기

1. nods.js 설치 및 설치 확인

node -v
npm -v

 

2. react 프로젝트 패키지 셋팅

• 현재 프로젝트에 필요한 패키지 설치
• package.json에 적힌 것들을 현재 폴더에 설치

npm install
##또는
yarn install

 

3. React 프로젝트 생성기를 내 컴퓨터에 설치 (한 번만 설치하면 됨)

• -g = global(전역)
• 어느 폴더에서든 create-react-app 명령어를 쓸 수 있게 됨

npm install -g create-react-app

 

4. client 프로젝트 생성

create-react-app client

 

5. 서버 실행 :  localhost:3000 (도메인) 또는 127.0.0.1:3000 (IP)

## ~\client 폴더로 이동
yarn start

 

6. 서버 셋팅 수정

• src 폴더의 index.js 파일에서 아래 태그 삭제
• Stric 모드는 app 내의 잠재적 문제를 알아내기 위한 도구
• 생명주기 함수를 여러 번 실행하는 원인이 되므로 사용하지 않도록 삭제

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

7. 기타 서버 실행 참고

• react 프로젝트는 npm install / npm start 명령어로 서버 구동
• react, node 프로젝트는 react, node 각 경로에서 npm install / yarn dev 명렁어로 동시에 서버 구동 

---

PART 1(입문) React.js 시작하기

• 컴포넌트 : 리액트에서 페이지를 구성하는 역할
• 생명주기 : 컴포넌트의 생성부터 소멸까지의 과정

001 .jsx에 html 적용하기

• App.js : 홈 화면