React 시작하기 : 설치 및 프로젝트 생성

Index
   1. 노드 js 설치하기
   2. 프로젝트 생성
   3.생성한 리액트 프로젝트 실행
   4. Hello World 띄우기
   5. 부수적인 추가 패키지 설치

 

1. 노드 js 설치하기

https://nodejs.org/en

Node.js

cmd 창에서 

node -v

노드 버전을 확인한다.

---

2. 프로젝트 생성

cmd 창에 프로젝트 생성 명령어를 입력한다. 

프로젝트를 설치할 폴더를 찾은 후, 다음 명령어 입력.

npx create-react-app [프로젝트 이름]

 

>> 패키지 설치과정에서 빠진게 있을때 다음과 같은 오류가 생긴다.

npm -g install create-react-app

입력, 빠진 부분을 다시 설치해주고,
다시 프로젝트를 생성하자.

요런식으로 나오면 성공!

폴더에도 입력한 프로젝트 이름으로 프로젝트 폴더가 만들어진걸 확인 할 수 있다.

---

3. 생성한 리액트 프로젝트 실행

cmd 창에서, 프로젝트 경로를 찾아준다

npm start

 

입력.

어쩌구저쩌구 성공적.

3000 의 리액트 서버가 자동으로 열린다

---

4. Hello World 띄우기

vs code 로 프로젝트를 열러,

App.js 를 편집한다

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1> Hello World </h1>
      </header>
    </div>
  );
}

export default App;

다른 내용은 지우고, 헤더 안에 h1 테그를 하나 넣어, " Hello World "를 입력했다.

---

5. 부수적인 추가 패키지 설치

npm install bootstrap --save
// 부트스트랩 사용 (디자인)

npm install axios
// axios 사용 (react와 spring boot api의 통신)

npm install react-router-dom
// 각 페이지의 구분을 react-route-dom을 사용

 

cmd 창에 다음 명령어들을 입력해, 필요한 패키지를 설치한다.

(꼭! 프로젝트 경로 선택 후 진행!)

+ 자동완성 툴 설치

+ 자동 import 

+ 잘못된 문법 확인