[React] 리액트 시작하기

🚀

빠르게 리액트 프로젝트를 시작하는 방법에 관한 포스팅입니다.

 

 

1. Node.js와 NPM 설치하기 

https://nodejs.org/en/

Node.js

위의 사이트에서 Node.js를 설치해주도록 합시다!(최신 버전보다는 왼쪽의 안정적이고 신뢰도 높은 버전 추천!)

NPM의 경우는 Node Package Manager이기 때문에  Node.js를 설치하면 같이 설치가 됩니다.
설치를 완료하였다면 아래의 명령어를 명령 프롬프트에서 실행해서 잘 설치되었는지 확인합니다.

$ node -v

$ npm -v

 

 

2. VSCode에서 React 프로젝트 생성

$ npm install -g create-react-app
$ create-react-app my-app

npm install -g에서 -g옵션은 시스템 디렉터리에 패키지를 설치하는 것을 의미합니다.
-g 옵션이 없다면 module은 현재 디렉터리 내부에 로컬로 설치됩니다.

create-react-app my-app을 터미널에서 실행하면 현재 디렉터리에서 리액트 프로젝트를 생성해주는데
설치하는데 시간이 좀 걸립니다.(제 컴퓨터의 경우엔 약 1~2분 정도 걸린 것 같네요..!)

 

<'my-app' 디렉터리 구조>

my-app
├── 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

 

 

3. 'my-app' 디렉터리로 이동 후 'npm start' 명령어로 리액트 프로젝트 시작

$ cd my-app

$ npm start

 

[http://localhost:3000/]에 접속 시 아래와 같은 화면을 보실 수 있습니다.

 

이제 App.js 파일에서 코드를 수정하고 컴포넌트들을 생성해서 라우팅도 하고 하시면 됩니다!
참 쉽죠..? ㅎㅎ

 

 

 

 

 

📚 참고

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

새로운 React 앱 만들기 – React

https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

React 시작하기 - Web 개발 학습하기 | MDN