[React.js] 리액트 정의 및 설치

React.js 정의와 설치 및 프로젝트 폴더 세팅

---

1. React.js?

 리액트는 자바스크립트만으로 UI 구성이 어려워서 Meta에서 만든 라이브러리이다.

 JS의 단점은 HTML파일과 JS파일을 분리해야하지만 React.js는 JSX문법을 사용해서 HTML문법과 JS 문법을 동시에 사용한다.

JSX는 JS에 XML을 추가한 확장 문법이다. 파일을 분리하지 않기 때문에 가독성이 높고 작성하기 쉽다.

 

 JS의 또 다른 단점은 document 문법이 너무 길다는 것이다. 그리고 새 페이지를 들어갈 때마다 새로고침을 한다.

리액트는 SPA로 서버로부터 새로운 페이지를 불러오지않고 현재 페이지를 동적으로 다시 작성함으로써 유저와 소통하는 웹사이트이다.

 

 한국에서는 React.js를 많이 사용하기 때문에 React.js를 배우는 것이 좋다.

라이브러리 vs 프레임워크

라이브러리는 기능만 가져다 사용하는 것이고 프로젝트는 사용자가 처음부터 시작해야한다.

프레임워크는 제공된 틀 안으로 들어가 프레임워크마다 주어진 규칙을 지켜가며 사용하는 것이고 조금만 수정해서 프로젝트를 동작하게 할 수 있다.

---

2. node.js 설치

노드 홈페이지에 가서 Node.js를 설치한다.

 

https://nodejs.org/ko

Node.js

---

3. 프로젝트 폴더 생성

프로젝트 폴더 생성

프로젝트를 진행할 새로운 폴더를 생성한다. 이곳에 리액트 폴더를 설치할 것이다.

---

4. 리액트 설치

powershell

터미널

powershell 또는 터미널을 열어서 프로젝트 폴더로 경로를 맞춘다.

npx create-react-app 생성할 폴더이름을 사용하면 리액트가 설치된다.

설치완료

Happy hacking이 뜨면 정상적으로 설치완료된 것이다.

react 설치 완료

나는 프로젝트명을 blog로 했기때문에 blog파일 안에 react가 설치됐다.