본문 바로가기

React

리액트를 시작하는 첫 걸음

개발환경 셋팅

  • Node.js 설치
  • vscode 설치
  • 바탕화면에 작업파일 만들기

 

 

작업파일 (shift + 우클릭으로 파일 선택 후, PoewrShell 창 열기 클릭)

PowerShell창이 열리면,  npx create-react-app 프로젝트이름  을 쳐준다.

 

vscode 열어서 해당 폴더를 열어보면, 리액트가 깔려있다.

 

왼쪽 src파일 안의 App.js 를 열고, 터미널에 npm start를 쳐보자. (이때 파일경로가 정확한 지 확인해야 함.)

로컬창이 뜨면 실행 성공!

 

 

Create React App을 설치함으로써, 자바스크립트에 html형식의 코드가 실행된다.

(index.js 파일이 자동으로 App.js의 코드를 html파일로 보내줌)

 

 

 

아래 강의를 보면 더 쉽게 이해할 수 있다.

 

https://www.youtube.com/watch?v=00yJy7W0DQE&list=PLfLgtT94nNq0qTRunX9OEmUzQv4lI4pnP&index=1 

 

https://codingapple.com/unit/react1-install-create-react-app-npx/?id=2305 

 

리액트 React 설치와 개발환경 셋팅 (2022 ver) - 코딩애플 온라인 강좌

0:00 개발환경 셋팅 0:42 리액트프로젝트 생성은 2:38 이제 에디터에서 오픈해서 코드짜십쇼  4:04 뭐했는지 설명  개발환경 셋팅 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다.  - 13

codingapple.com


 

그냥 강의 듣기 싫어서 써봤다.

 

그래도 처음부터 시작하는 나같은 코린이는 이렇게 간략하게 정보를 모아놓은 곳이 필요하지 않을까?