React #설치 #사용방법 #리액트시작

리액트 쓰는 이유 

1. Single Page Applicaion 만들기 위해
   1. 새로고침 없이 동작하기 위해, 앱처럼 부드럽게 동작하는 html 페이지 (instagram 같이)
   2. 생 Js 도 가능하지만 코드가 길어짐
   3. Vue 등도 있지만 React 가 가장 틀딱이라 사용자가 많음
2. React 쓰면 html 재사용이 편리함
3. React Native  로 앱개발도 가능

---

리액트 설치하기

1. 노드 js 설치

- 왜 노드.? = 리액트 설치 편하게 할려면? = npm = nodeJS 설치하면 딸려옴

( Node.js #설치 #npm #get#post#how to show HTML — LLAT (tistory.com) )

2. create-react-app

사용할 디렉토리 폴더 vscode 로 열고 

create-react-app 원하는이름

안되면 : #react 설치안됨 #Unknown command: "create-react-app"#npm 안됨 — LLAT (tistory.com)

 

3. 리액트 실행해보기 (미리보기)

- /src/App.js 폴더가 실행파일임

- 터미널 열고 npm start

- 안되면 위에 만든 폴더 경로에서 실행했는지 확인바람 

 

4. 리액트 디렉토리 구조 

 

 node_modules : 프로젝트 구동에 필요한 모든 라이브러리 모음

 

public html img css  등 static 파일 보관하는 곳

 

src : 소스코드 보관함

-app.js = 메인페이지

 

html 이 아니라 js 에서 코드 짰는데 어떻게 구동되지?

= index.js 가 App.js 를 index.html 로 바꿔줌 

<img src={logo} className="App-logo" alt="logo" />

// 빙글빙글