[React] 리액트(react) 설치 및 설정
2019. 2. 26. 17:00
반응형
[React] 리액트(react) 설치 및 설정
리액트란?
리액트 프로젝트시 컴포넌트를 파일로 분리해 저장하며 또 이 컴포넌트는 일반 JavaScript 가 아닌 JSX 라는 문법으로 저장하게됨
이 여러가지 파일을 한개로 결합기위해 Webpack 이라는 도구를 사용하고 JSX / JavaScript 등의 문법을 사용하기위해 Babel 이란 도구를 사용.
시작전 준비물
- Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 기반이기 떄문에 설치
- Yarn: npm 의 상위버전으로써 더나은 속도/캐싱을 위해 사용
- 코드 에디터: VSCode , Atom, WebStorm, SublimeText
- 윈도우의 경우, Git for Windows 를 설치해서 앞으로 터미널에 무엇을 입력하라는 내용이 있으면 함께 설치되는 Git Bash 를 사용
Node.js 설치
Window : https://nodejs.org/ko/download/
Mac :
1 2 | curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash nvm install --lts | cs |
Yarn 설치
https://yarnpkg.com/en/docs/install#windows-stable
코드에디터 설치
SublimeText3 : https://www.sublimetext.com/3
create-react-app 설치/사용
설치
npm 설치
1 | npm install -g create-react-app |
yarn설치
1 | yarn global add create-react-app | cs |
linux or Mac yarn 오류시
1 2 3 4 | # macOS: echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile # Linux: echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc | cs |
사용
hello-react 생성
1 | create-react-app hello-react | cs |
ㄴ
hello-react 실행
반응형
'Program > React' 카테고리의 다른 글
[React] 리액트 컴포넌트 스타일링_CSS, Sass, CSS Module, styled-components (0) | 2019.04.16 |
---|---|
[React] npm / yarn 설치 오류 error An unexpected error occurred (3) | 2019.03.25 |
[React] 리액트 컴포넌트 생성 & 활용 (0) | 2019.03.01 |
[React] 리액트 IF 문 사용법 (0) | 2019.02.27 |