리액트 설치 A to Z
1. vsCode 설치
- 개발시에 코드를 메모장=>전문적 메모장으로 쓸 수 있다.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
2. node js 설치
- 간혹 보이는 npm npx 등등 javascript를 쓴다면 필수적으로 깔아야 하는 코스다.
https://nodejs.org/en/download/
Node.js — Download
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
3. 원하는 곳에 폴더 생성
-이름은 React를 추천하며 위치는 편하게 들를 수 있는 바탕화면에 추천한다.
4. vsCode 실행
-vsCode를 실행하고 그곳에 아까 만든 React test(자기가 만든 파일명)을 집어넣는다.
5. 터미널 실행 및 리액트 파일 생성
- ctrl + shift + ` 동시에 누르고 하단에 창이 생기면
npx create-react-app my-app
이 코드를 복사해서 하단 창에 붙여넣고 Enter를 누르고 기다린다.
6. React 실행
- 아까와 마찬가지로 위 코드를 적은 칸에 cd my-app 를 적고 Enter를 누른다.
- npm start를 적고 누르고 기다린다.
- 이런 창이 하나 뜨면 성공이다.
※주의사항
Q: 모르고 꺼버렸어요ㅜ 어떻게 다시 켜요?
A: http://localhost:3000/ 복사하고 주소창에 입력하세요.
Q: 이제 여기서 어떻게 해야해요?
A:
1. my-app/src/App.js 안에 코드들을 수정해가며 React에 익숙해지기
2. my-app/src/App.css 안에 코드들을 수정해가며 css에 익숙해지기
3. 다음 글 기다리거나 구글에 검색하기
-하고싶은거나 궁금한거 있으면 댓글 달아주고, 괜찮다 싶으면 글로 만들어서 빠른시일내로 올려보고 아님 댓글 달게요.