리액트 설치부터 시작하기 npm start

 

복잡한 코드는 숨기고 내가 만든 태그를 사용하고 싶다.

이런 생각을 가능하게 해주는 도구가 리액트이다

리액트의 핵심적인 역할 : 사용자 정의 태그를 만드는 것

 

https://ko.legacy.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

🔼 리액트 공식 홈페이지

 

---

https://stackblitz.com/edit/react-ivpyptgz?file=src%2FApp.js

React (duplicated) - StackBlitz

🔼 스택블리츠 링크 : 내 컴퓨터에 리액트 개발환경을 설정하지 않고, 온라인 서비스를 이용하는 방법

 

 

---

 

컴퓨터에 리액트 개발환경 설정

[ 새로운 React 앱 만들기 ] 메뉴 클릭

 

 

Create React App : 여러 툴 체인 중에서 사용하는 것

 

 

 

https://create-react-app.dev/

Create React App is deprecated.

create-react-App 클릭

Create React App 공식 홈페이지

 

 

 

 

Create React App 사용하는 방법 : 

컴퓨터에 npx create-react-app을 입력 후

프로젝트를 담을 디렉토리명을 입력하면 됨

 

이 npx를 실행하려면 Node.js를 설치해야 함

 

 

 

 

https://nodejs.org/ko/

Node.js — Run JavaScript Everywhere

🔼 Node.js 공식 홈페이지

 

🔼 Node.js 설치

 

 

Nodejs 설치 끝

 

 

 

비주얼 스튜디오 코드 에디터

VS code를 설치한 뒤

왼쪽 탐색기 영역에서 폴더 열기를 클릭한다

상단에 터미널 - 새터미널

그리고 앞서 node.js를 설치했다면 npx 명령을 실행할 수 있습니다

 

터미널에서 npx create-react-app . 명력어 입력

.은 현재 디렉토리를 의미하는 약속된 기호

 

 

터미널에서 npm start 명령어 실행

Create React App으로 만들어진 웹앱이 브라우저에서 실행된 모습