React 설치

1. Node.js LTS 설치

https://nodejs.org/

Node.js — Run JavaScript Everywhere

 

npm(Node Package Manager): Node.js의 기본 패키지 관리자로 자바의 maven, gradle 같은 의존성 관리 도구 (패키지 다운로드하고 의존성 관리하는 것, 라이브러리를 다운 받아서 빌드해주는 도구)

npx: npm 버전 5.2.0부터 기본으로 포함되어 있다. npx는 특정 Node.js 패키지를 설치하지 않고도 한 번 실행할 수 있도록 도와준다.

 

npm -> 라이브러리를 다운 - 빌드 - 프로젝트 3개(로컬에 다 다운) 다운 받은 데이터가 항상 유지

npx -> 라이브러리를 다운 - 빌드 - 프로젝트 3개(다운 받은 것을 재사용, 없으면 다운로드) -> 실행을 위해서 잠깐 쓰기 때문에 실행하고 나서 삭제
npx를 사용하는 것이 좋다. 라이브러리를 다운 받은 후 실행시키고 삭제한다.

 

2. React 설치

https://reactjs-kr.firebaseapp.com/docs/installation.html

설치 - React

# 실행 오류 발생 시 npm install -g npm@10.8.1
npx create-react-app my-app
# npm install -g npm@10.8.1 
cd my-app
# react 시작
npm start

 

• 플러그인 설치
• ESLint : 자바스크립트 구문 오류 검출
• Prettier - Code formatter : 자동 정렬
• Reactjs code snippets :  리액트 구문 자동 완성

• .prettierrc 파일

{
    "singleQuote": true,
    "semi": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
}

• Default Formatter - Prettier

• Format on save : 저장 시 자동 정렬
• File - Preferences - Settings - format on save 검색 후 체크 

•  App.js

import './App.css';

function App() {
  return <div>안녕 리액트</div>;
}

export default App;

• npm start 시 index.html 파일을 index.js를 통해 id가 root인 요소에 렌더링 한다.
• React 애플리케이션의 진입점(entry point)은 index.js 파일이다. 여기서는 React DOM 라이브러리를 사용하여 index.html의 root라는 DOM 요소에 React 컴포넌트를 렌더링(render)한다.

 

• 리액트 종료
• ctrl + c

 

참고 : 메타 코딩 react & springboot

react & springboot