React(리액트) 개발 환경 구축

PS C:\myFront> npx create-react-app gogo
또는 해당 디렉토리에서 
mkdir gogo
cd gogo
npx create-react-app .

yarn 설치
npm install --global yarn

cd gogo
npm start

크롬 개발자 도구 설치
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

npm install -S styled-components react-router-dom dotenv
npm install --save-dev @types/styled-components babel-plugin-styled-components @types/react-router-dom
npm install -D gh-pages
npm audit fix

 

 

개발환경 셋팅

1. 아래의 Nodejs 사이트에 접속하여 LTS라고 써있는 버전을 다운받아 설치합니다.

https://nodejs.org/ko/

- 설치 경로는 C드라이브를 권장합니다.

2. 아래의 Visual Studio Code 사이트에 접속하여 최신 버전을 다운받아 설치합니다.

https://code.visualstudio.com/

리액트 프로젝트 생성

C 드라이브에 FRONT 폴더를 생성합니다.

FRONT 폴더를 선택하고 Shift키를 누르고 오른쪽 마우스 클릭하여 "여기에 PowerShell 창 열기"를 선택합니다.

아래와 같이 입력하여 프로젝트를 선택합니다.

※ aboutw3는 자신의 프로젝트명으로 바꾸어 생성해도 됩니다.

PS C:\FRONT> npx create-react-app vsp_front

생성된 프로젝트로 이동하여 npm start를 하면 크롬 브라우저 열고 localhost:3000 입력하면 웹에서 확인 할 수 있습니다.

yarn 설치

npm install --global yarn

cd vsp_front
npm start

Visual Studio Code를 실행해서 React Code 수정하기

Visual Studio Code 실행하고 File > Open Folder

C:\FRONT\aboutw3 선택

src 폴더 안에 있는 App.js 이게 메인페이지 입니다.

해당 파일 오픈해서 코드 수정해 보면 됩니다. 

VS Code에서 Prettier - Code formatter 추가 추천드립니다.