[React] 리액트 시작하기

1. Node.js NPM 설치하기.

https://nodejs.org/ko/

Node.js

- 자바스크립트를 브라우저가 아닌 브라우저 밖에서도 동작할 수 있게 하기 위해 사용.
- node.js에서 제공해주는 모듈들을 다운받고 관리할 수 있게 해줌 (npm 등)
- 다른 개발자들이 만들어둔 유용한 툴들을 가져다가 사용할 수 있음.

- NPM의 경우는 Node Package Manager이기 때문에 Node.js를 설치하면 같이 설치가 된다.

 

설치가 완료 되었다면 명령프롬프트 창에서 확인하기.

노드 버전 확인하기 node -v

npm 버전 확인하기 npm -v

2. react 프로젝트 만들기

→  개발환경에 필요한 패키지를 자동으로 설치해주는 명령

npx create-react-app ./  //해당 폴더에 바로 생성

npx create-react-app ./sample  //sample이라는 폴더를 만들어거 그 폴더에 생성

cd sample

code .

 

생성 폴더 디렉토리 구조

├── README.md

├── node_modules

├── package.json

├── package-lock.json

├── .gitignore

├── public

│          ├── favicon.ico

│          ├── index.html

│          └── manifest.json

└── src

         ├── App.css

         ├── App.js

         ├── App.test.js

         ├── index.css

         ├── index.js

         ├── logo.svg

         └── reportWebVitals.js

 

→ 개발할때

npm start 

터미널에서 ctrl + c

작업 종료 y

 

→ 배포

npm run build 
npx serve -s build

 

2. index.js

html과 javascript를 연결해주는 파일
root에 App 컴포넌트(App.js)의 내용을 뿌림

App.js에서 파일을 수정하고 컴포넌트들을 생성해 라우팅.

 

컴포넌트 - 재사용이 목적, 앞문자를 대문자로 짓기

 

├── component 

             ├──Box.js 에서  rafce (함수형 컴포넌트 자동완성) / rcc (자동완성)

컴포넌트 재 사용은 index.js에서
import할 때 확장자 생략 가능 -> .js