리액트 프로젝트 생성 시작

노드 설치

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

다운로드 | Node.js

 

* 노드 설치 오류

   노드 설치 중에 오류가 생겼었는데 관리자 권한 설치고 문제 해결

 

 

설치 확인

node -v

 

 

---

 

 

Visual Code

리액트 개발 툴로는 Visual Code가 좋다.

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

여러 확장프로그램으로 정말 편하게 코딩 가능

VS Code 확장 플러그인 추천

 

무엇보다 리액트 개발 시 클래스, 함수 생성 단축키 가능하게 해주는

React Snippet 필수 

리액트 스니펫 리스트

 

 

 

---

 

 

 

리액트 프로젝트 생성

1.

Node 14.0.0 혹은 npm 5.6 이상 필요

CMD 창에서

npm install -g create-react-app
npx create-react-app first-app

npx 는 npm5.2+ 버전의 패키지 실행 도구입니다.

 

리액트실행

cd first-app
npm run start

 

완료

 

 

 

2.

기존 프로젝트 있는 경우

vite 사용할 경우

{
  "name": "react-essentials-start",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "styled-components": "5.3.9"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.3.9"
  },
  "keywords": [],
  "description": ""
}

 

 

 

npm 라이브러리 설치

npm install

 

 

실행

npm run dev

dev의 vite 실행 

 

---

 

 

React.js 는 자바스크립트가 jsx를 분석해서 html 태그를 생성

 

컴포넌트

   1. 클래스 컴포넌트

   2. 함수형 컴포넌트 : this, state, life-cycle 사용할 수 없음 ==> hook 으로 해결

 

 

화살표 함수

() => { ... }

(x) => { ... }

x => { ... }

(x, y) => { ... }

() => { return {a:1} }

() => { { a:1 }}

 

 

 

 

참고

https://ko.reactjs.org/docs/create-a-new-react-app.html

새로운 React 앱 만들기 – React