행위

리액트 설치

DB CAFE

thumb_up 추천메뉴 바로가기


1 리액트(react) 설치 및 설정[편집]

1.1 리액트란?[편집]

  1. 리액트 프로젝트시 컴포넌트를 파일로 분리해 저장하며 또 이 컴포넌트는 일반 JavaScript 가 아닌 JSX 라는 문법으로 저장하게됨
  2. 이 여러가지 파일을 한개로 결합기위해 Webpack 이라는 도구를 사용하고 JSX / JavaScript 등의 문법을 사용하기위해 Babel 이란 도구를 사용.

1.2 시작전 준비물[편집]

  1. Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 기반이기 때문에 설치
  2. Yarn: npm 의 상위버전으로써 더나은 속도/캐싱을 위해 사용
  3. 코드 에디터: VSCode , Atom, WebStorm, SublimeText
  4. 윈도우의 경우, Git for Windows 를 설치해서 앞으로 터미널에 무엇을 입력하라는 내용이 있으면 함께 설치되는 Git Bash 를 사용

1.2.1 Node.js 설치[편집]

1.2.1.2 Mac[편집]

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
nvm install --lts
1.2.1.2.1 Yarn 설치[편집]
https://yarnpkg.com/en/docs/install#windows-stable


1.2.1.3 코드에디터 설치[편집]

SublimeText3 :  https://www.sublimetext.com/3

1.2.2 create-react-app 설치/사용[편집]

1.2.2.1 설치[편집]

1.2.2.2 npm 설치[편집]

npm install -g create-react-app
1.2.2.2.1 yarn설치[편집]
yarn global add create-react-app

1.2.2.3 = linux or Mac yarn 오류시[편집]

  1. macOS:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile
  1. Linux:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc


1.2.3 사용[편집]

1.2.3.1 hello-react 생성[편집]

create-react-app hello-react

1.2.3.2 hello-react 실행[편집]

cd hello-react
yarn start
  • 여기까지 진행했다면 브라우저로 리액트 기본화면이 실행됨