Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
Tags
- 리액트를 다루는 기술
- createPortal
- list
- equalityFn
- Kotlin
- 컬러구성
- Git
- 리덕스
- hot Reloading
- javascript
- merge
- await
- 가상회선교환
- redux
- 리사이클러뷰
- php문법
- async
- CSS
- list.map
- 자동반영
- useCallback
- 공부
- 리액트
- useState
- 비동기처리
- typescript
- pull
- 웹
- rebase
- react
Archives
- Today
- Total
공부블로그
React 시작하기 본문
1. 작업환경 준비
Node.js ( 자바스크립트 런타임 ) 와 Yarn ( 자바스크립트 매니저 도구 )를 설치한다.
설치 확인 )
명령 프롬프트에서
> node -v
v14.17.2
> yarn -v
1.22.10
git을 사용할 경우에는 Git Bash를 설치하고,
VS Code를 사용할 것이므로 VS Code도 설치한다.
2. VS Code에서 내 git repository 연결
1) VS Code에서 F1을 누르고 git clone입력 -> Git: Clone 메뉴 선택
2) 내 Git에서 생성한 레포지터리 URL을 입력
3) 클론 시킬 폴더 선택하면 끝!
3. 새로운 리액트 프로젝트 만들기
npx create-react-app begin-react
위 명령어를 입력하면 begin-react 라는 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성된다.
생성이 끝나면 cd 명령어를 사용하여 해당 디렉터리에 들어가고, yarn start 입력 ( yarn 이 없다면 npm start )
$ cd begin-react
$ yarn start
실행하면 다음과 같이 브라우저에 http://localhost:3000/ 이 열리고위와 같은 화면이 뜬다.
4. git에 commit, push 하기
새롭게 만들어진 리액트 프로젝트를 Git에 올려보자.
1 ) VS Code에서 왼쪽 바 3번째 아이콘( Git )을 선택
2 ) Commit 메세지를 입력하고, 체크를 누르고, push를 해준다. ( 푸시는 점3개 아이콘을 우클릭하면 나온다 )
3 ) 내 레포지터리에 가서 커밋 확인!
중간에 npm start 오류가 떳었는데, 나는 npm install을 다시 해줘서 해결했다.
git을 복제해오고 실행하는 과정에서 오류가 뜬 것 같다ㅠ
'리액트 > 리액트 공부' 카테고리의 다른 글
리액트 진짜 초급 강의 (0) | 2022.04.14 |
---|---|
리액트 Router DOM 사용하기 (0) | 2021.08.01 |
리액트 기초 다지기 (0) | 2021.07.24 |
( props, state, 이벤트핸들링 예제 ) 두개의 input을 받아서 연산하기 (0) | 2021.01.11 |
나만 보려고 만드는 REACT 문법 정리 (2) | 2021.01.10 |