[ React ] React 다운로드 및 실행 ①

 

 📘 React 

: 자바스크립트 프레임 워크 (틀에 맞춰 일하는 것)

 

 📘 React 간단한 특징 

• 리액트의 컴포넌트는 딱 ! 하나의 요소만을 반환할 수 있다.
• 여러 요소를 반환하고 싶다면 부모 요소로 묶어준다!
• fragment(<></>) : 반환 요소를 감쌀 때 사용, 해석 X

 

 📘 React Component

: React 컴포넌트는 React 애플리케이션의 구성 요소이며 

  컴포넌트는 재사용 가능하도록 만들어져 있으며, UI를 작은 조각으로 나누어 관리할 수 있습니다. 

   React 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다 (요즘 트랜드는 함수형 컴포넌트)

 

[ React ] React 클래스형 컴포넌트 알아보기 ②

 

---

💻 React 설치하기 💻

❗ 설정하기 전 VS가 열려있으면 전체 다 껴놓기 ❗

Node.js

 

▶ LTS로 다운로드 받기 ( 그냥 다 next 해도 무방!)

▶ PowerShell 검색 후 관리자모드로 실행 한 다음에  정상 다운로드 받았는지 확인! ( node -v )

 

▶ get-help Set-ExecutionPolicy 명령어 실행 후 Y 입력

▶Set-ExecutionPolicy RemoteSigned 명령어 실행 후 Y 입력

▶ 시스템환경 변수 검색 > 환경변수 > Path > C:\Program Files\nodejs\ 위치에 있는지 확인 

    없다면 다운로드 받은 위치 넣어주기 ! 

---

▶ 원하는 위치에 새로운 폴더 만들기! 

▶ 폴더 열기 해서 원하는 위치에 폴더 만든 것 열기 ! 

▶ 폴더 열기 > 터미널 열기 ( 단축키 : Ctrl + Shift + ` )

▶npm install –-global yarn 입력 후 전역으로 yarn 설치하기 

 

▶yarn –-version 으로 yarn 실행 가능한지 확인하기

▶yarn global add creat-react-app 으로 전역에서 creat-react-app 을 사용하게끔 명령어 실행

▶ npx create-react-app my-app 으로 my-app이라는 이름의 리액트 앱을 생성 

    Ok to procedd? 나왔다면 y 입력 ! 

▶ 위 이미지와 같이 뜬다면 정상 다운로드 된 것이다! 

▶ cd my-app 명령어로 내 리엑트 프로젝트 경로로 이동시키기 !

 

▶ npm start or yarn start명령어로 프로젝트 실행시키면 되는데 ! 

     yarn start 더 좋으니  yarn start으로 실행시키기! 

 

해당 URL이 켜진다면 다운로드가 잘된 것이다 !

 

💻 서버 확인하는 방법 ! ( cd my-app으로 쓰는 이유! my-app안에 있기 때문에!)

 

💻 자동완성 설정하는 방법 

- simple React Snippets 다운로드 하기 !