[생활코딩/React] 2022개정판 | 2.실습환경 구축

참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 

1.  다른 사람이 만들어준 리액트 실습 환경 사용하기

---

https://stackblitz.com/edit/react-fhagtd

React (forked) - StackBlitz

👉🏻이미 실습 환경이 구축된 곳이다. 실습 환경 구축이 어렵다면 위 링크로 바로 들어가 코딩하면 된다!

 

2.  리액트 실습 환경 내손으로 구축하기

---

https://create-react-app.dev/

Create React App

👉🏻위 링크를 참고해 직접 실습환경을 구축해도 좋다!

👉🏻먼저 본인이 실습할 환경을 만든다. 본인이 리액트를 실습할 디렉토리를 만들면 된다.

npx create-react-app .

👉🏻그리고 터미널에서 해당 디렉토리로 들어와 위와 같은 명령어를 입력한다. 

❗️해당 명령어를 입력하기 전에 node.js를 설치해야 한다!

✍🏻온점 위치에는 원래 본인이 리액트를 실습할 환경(디렉토리)의 이름을 적으면 된다. 하지만 나는 이미 만들었고 그 위치로 들어와있기 때문에 '해당 디렉토리가 리액트를 실행할 디렉토리다!'라는 의미의 .(온점)을 붙인다!

👉🏻설치가 끝났으면 디렉토리에 다음과 같은 파일들이 생성되었다!

npm start

👉🏻이 명령어를 입력하면 리액트 임시 화면이 실행된다!!

👉🏻짠! 다음 화면이 나오면 성공 :)