프로그래밍/Frontend

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

돔돔이 2023. 12. 8. 00:00
728x90
반응형

 

 

이미지출처: https://velog.io/@hyejeong/%EC%99%9C-React%EB%A5%BC-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C

 

 

 

 

먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다.

 

nodejs 다운로드 링크입니다.

운영체제에 맞게 설치해주세요!

https://nodejs.org/en/download/current

 

Download | Node.js

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

nodejs.org

 

 

 

저는 윈도우라서 Windows Installer를 클릭하여 다운로드받아 설치했습니다.

 

 

 

설치가 완료되면 시작줄에서 Node라고 검색하여 Node.js command prompt 터미널 앱을 열어주세요.

 

 

 

 

 

터미널이 열리면 이제 react 프로젝트를 생성해봅니다.

프로젝트를 생성하는 명령어입니다.

start_app에는 원하는 프로젝트이름을 적어주시면 됩니다.

npx create-react-app start_app

 

반응형

 

 

 

 

설치가 완료되면 터미널이 열려있는 경로에 start_app 프로젝트 폴더가 생성됩니다.

 

 

 

 

 

start_app/src 폴더로 들어가서 App.js 파일을 열어보면

페이지에 React 로고를 보여주는 코드가 디폴트로 작성되어있습니다.

 

 

728x90

 

 

 

 

Nodejs 터미널에서 생성한 프로젝트 경로로 들어가서,

프로젝트를 실행해봅니다.

 

 

cd start_app
npm run start

 

 

 

 

프로젝트가 실행되면서 http://localhost:3000 URL이 자동으로 열립니다.

App.js 코드에 적혀있던  react 로고 이미지가 보이네요.

 

 

 

 

 

 

이렇게 프로젝트 생성 및 실행은 간단하게 끝났고

다음 포스팅에서는 React 주요 개념에 대해서 알아보고 간단한 예제 페이지들을 만들어보려고 합니다!

 

 

 

 

728x90
반응형