1. 리액트 개발환경 구축하기

2022. 7. 26. 12:28개발공부/리액트

 

https://www.youtube.com/watch?v=txX3bL22esU&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=2

 

1. Node.js 설치하기

리액트를 설치하려면 nodejs를 설치하고 npx를 써야한다.

npx는 npm의 단점을 해결한 패키지 설치 모듈이라는데 자세한 건 나도 모르겠다. pip와 비슷한 모듈인 것 같다.

 

http://nodejs.org

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

위 홈페이지로 가서 LTS 버전을 다운을 받는다. 설치 방법은 그냥 next 누르고 finish 하기.

 

2. 리액트 설치하기

Node.js 를 성공적으로 설치했다면 리액트를 설치해주면 된다.

vscode를 키고 터미널을 연다.

npx create-react-app .

터미널에서 위와 같이 입력을 해주면 현재 폴더에 리액트 프로젝트를 만들어준다.

나는 폴더를 만들고 그 안에 프로젝트를 만들어서 create-react-app 뒤에 . 을 붙였다.

 

제대로 진행되면 이런식으로 동작한다.

설치가 다 되면 이렇게 뜬다.

npm start

위 코드를 터미널에 입력하면

 

이런 창이 자동으로 뜨고

터미널에 이렇게 뜬다.

 

리액트 설치 끝.

'개발공부 > 리액트' 카테고리의 다른 글

6. state  (0) 2022.07.28
5. event  (0) 2022.07.28
4. props  (0) 2022.07.27
3. 컴포넌트 만들기  (0) 2022.07.26
2. 소스 코드 수정하기  (0) 2022.07.26