[React] 프론트엔드의 꽃 React 시작 전

최송희·2021년 3월 6일
0

React

목록 보기
1/4

묻지도 따지지도 말고 우선 리렉트 기본 세팅을 따라한다.

React 환경세팅

1. node,npm 설치하기

아래 노드 사이트에 들어가서 OS맞는걸 다운받아서 설치하면, 아주 쉽게 node,npm 이 설치완료된다. (npm은 설치필요가 없다)
https://nodejs.org/ko/download/

설치확인

제대로 설치되었는지 cmd 창에서 node-v, npm -v 명령어를 쳐서 설치 확인

2. CRA설치

CRA란 Create React App! React app 을 개발하기 위한 환경을 알아서 모듈설치 등을 라이트(?)하게 구성해준다. 초기 배우는 단계이거나 빠르게 플젝시작이 필요한 경우 유용하다.

// 1. Desktop - wecode 폴더 진입
cd Desktop/wecode
// 2. westagram-react 프로젝트 설치
npx create-react-app westagram-react
// 3. my-app 프로젝트 진입
cd westagram-react
// 4. 로컬 서버 띄우기
 npm start

특이사항이 없다면 localhost:3000으로 사이트가 열린다. React 로고가 빙그르르 돌아간다면 성공!

꿀팁!!
Reactjs code snippets 를 vs 에 설치하면 rce 단축키만으로도 react 컴포넌트 구성이 완성된다.

0개의 댓글