첫 번째 React 랩

소개

안녕하세요, LabEx 에 오신 것을 환영합니다! 이 첫 번째 랩에서는 React 로 고전적인 "Hello, World!" 프로그램을 배우게 됩니다.

아래의 Continue 버튼을 클릭하여 랩을 시작하세요.

Hello React

전제 조건 (Prerequisites)

시작하기 전에, LabEx VM 에 Node.js 와 npm 이 설치되어 있는지 확인해야 합니다.

터미널 또는 명령 프롬프트를 열고 다음 명령을 실행합니다.

cd ~/project
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get update
sudo apt-get install -y nodejs

React 초기화 (Initialization)

React "Hello World" 데모를 실행해 보겠습니다.

터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하여 새 React 프로젝트를 생성합니다.

cd ~/project
npx create-react-app hello-world-demo

설치가 완료될 때까지 기다려 주세요.

React 앱 업데이트 (Update the React App)

다음으로, "Hello, World!" 메시지를 표시하도록 기본 React 앱을 업데이트해 보겠습니다.

선호하는 코드 편집기에서 src/App.js 파일을 열고 내용을 다음 코드로 바꿉니다.

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

기본적으로 React 개발 서버는 포트 3000을 사용합니다. 이를 포트 8080으로 변경하려면 코드 편집기에서 package.json 파일을 엽니다.

scripts 섹션을 찾아 start 스크립트를 업데이트하여 PORT 환경 변수를 포함합니다.

"scripts": {
  "start": "BROWSER=none PORT=8080 react-scripts start",
  ...
}

마지막으로, 다음 명령을 실행하여 React 개발 서버를 시작합니다.

cd hello-world-demo
npm start

이것이 전부입니다! 포트 8080 을 사용하여 로컬 서버에서 React "Hello World" 데모를 성공적으로 실행했습니다.

이제 Web 8080 탭으로 전환하여 새로 고침 버튼을 클릭하여 웹 페이지를 볼 수 있습니다.

요약

축하합니다! 첫 번째 LabEx 랩을 완료했습니다.

LabEx 에 대해 더 자세히 알아보고 사용 방법을 배우고 싶다면 지원 센터를 방문하십시오. 또는 비디오를 시청하여 LabEx 에 대해 자세히 알아볼 수 있습니다.

프로그래밍은 긴 여정이지만, Next Lab은 클릭 한 번으로 시작할 수 있습니다. 시작해 봅시다!