본문 바로가기

리액트

리액트 설치 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. 다음 글 기다리거나 구글에 검색하기

 

-하고싶은거나 궁금한거 있으면 댓글 달아주고, 괜찮다 싶으면 글로 만들어서 빠른시일내로 올려보고 아님 댓글 달게요.