728x90
728x90

리액트(React.js) 개발 환경 구축하기 (Windows)

들어가며

  • 윈도우(Windows)에서 리액트(React.js) 개발 환경을 구축해보자.

 

방법

① Node.js 설치하기

  • Node.js 프로그램을 컴퓨터에 설치해준다.
 

Node.js

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

nodejs.org

 

② 비주얼 스튜디오 코드(VS Code) 설치 및 확장 프로그램 설치

  • 비주얼 스튜디오 코드(VS Code)를 설치하고, VS Code에 아래의 확장 프로그램을 설치한다.
    • Babel JavaScript
    • vscode-icons
    • JS JSX Snippets

VS Code Extentions to Install

 

③ 리액트 앱 생성하기

  • @my-app@ 이라는 프로젝트를 생성하려면 아래의 명령을 실행한다.
> npx create-react-app my-app

 

  • 리액트 앱을 생성하고 실행하는 방법에 대한 자세한 내용은 아래의 사이트를 참고한다.
 

Create React App

Set up a modern web app by running one command.

create-react-app.dev

 

④ 리액트 앱 실행하기

  • 아래의 명령들을 실행하여 리액트 앱을 시작한다.
> cd my-app
> npm start

 

  • @my-app@ 이라는 폴더가 생기고, 그 안에 프로젝트 실행을 위해 필요한 파일들이 생성되고, 새로운 웹 브라우저 창이 실행되며 로컬 서버 웹페이지(@localhost:3000@)가 출력된다.

 

⑤ 필요없는 파일 삭제하고 내용 수정하기

  • @./public/index.html@과 @./src/index.js@ 파일을 제외한 해당 디렉터리 안에 있는 파일들을 모두 지워준다.

필요 없는 파일들을 지운 후의 모습

 

  • 그리고 @./public/index.html@과 @./src/index.js@ 파일의 내용을 다음과 같이 수정해준다.

 

@./public/index.html@
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./src/index.js" type="text/jsx"></script>
  </body>
</html>

 

@./src/index.js@
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('root'));

 

최종적으로 로컬 서버 웹 페이지에 보여지는 모습

 

728x90
728x90
저작자표시 비영리 변경금지

'Programming > React' 카테고리의 다른 글

[React.js] 실시간으로 특정 요소의 길이값 가져오기  (0) 2024.03.26
[React.js] state와 ref 비교하기  (0) 2024.03.02
[React.js] 마우스 호버 효과를 적용하기 위한 커스텀 훅 만들기 (useHover.js)  (0) 2024.02.20
[React.js] Node.js 설치부터 리액트 프로젝트 테스트까지 정리  (0) 2024.02.05
[React.js] 클래스 컴포넌트(Class Components)와 함수형 컴포넌트(Functional Components)  (0) 2023.12.14
[React.js] 훅(Hook)  (0) 2023.12.13
[React.js] React Developer Tools  (0) 2023.12.13
[React.js] 리액트(React)에서 HTML 요소의 클래스를 지정할 때 class가 아닌 className을 사용하는 이유?  (1) 2023.11.26

티스토리툴바