[React] React 다운로드(설치) 및 실행 - window

React를 설치해보고 실행해보자

 

오늘은 React을 다운받고 React를 실행시켜보겠다.

 

React에 대해 궁금하다면

https://0409kdk.tistory.com/19

[React] React란? - 프론트엔드 라이브러리의 핵심

 

 

1. React 설치

먼저 Node.js을 설치해야한다

https://nodejs.org/en

Node.js

 

LTS 버전을 받으면된다.

 

 

쭉 next 해서 설치하면 된다.

폴더 경로는 왠만해서 변경하지 않는걸 권한다.

설치 끝

 

설치가 잘 되었나 확인해본다.

 

시작 ->  cmd

 

 

node -v 입력

node -v

설치한 버전이 나온다면 설치가 잘 되었다.

 

 

2. React 프로젝트 폴더 생성

원하는 경로에 폴더 하나를 생성한다.

바탕화면에 두었다. (어디든 상관x)

 

이제 이 폴더를 우클릭 -> 터미널 열기

 

cmd 창에서 명령어를 친다.

 

npx create-react-app [폴더명]

 

잘 설치가 되었다.

 

cd [폴더명]
npm start

 

마저 명령어를 입력하게 되면

 

 

웹페이지가 실행된다!

 

 

3. 코드 수정

코드를 수정해서 내 웹페이지를 만들고 싶다.

 

그럼 먼저 에디터를 사용해야하는데

 

대표적으로 vscode 많이 쓴다. vscode을 다운받자.

 

vscode : https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

다운을 받았다면 실행해보자.

 

File - Open Folder

아까 만들어 뒀던 폴더를 선택한다

 

 

src - App.js

파일을 수정하면 된다! 

한번 잘되는지 테스트 해보겠다

 

코드

function App() {
  return (
    <div>
      <h1><a href="https://0409kdk.tistory.com/category" target="_black">블로그로 이동</a></h1>
    </div>
  );
}

export default App;

 

 

정상적으로 변경이 완료되었다!

 

 

 

# PS

한가지 팁이 아닌 팁이 있다면

앞으로 프로젝트 실행할 때 vscode 내 터미널을 이용하면

편하다? 아무튼 그럼

 

터미널 하는법

1. vscode 상단 메뉴탭 - Terminal - New Terminal

2. 단축키 ctrl + `

 

 

감사합니다.