[React] 리액트 기초 배우기 #1 Hello React! 리액트 프로젝트 생성과 빌드

 

해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서  작성한 글입니다. 
원문 : https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

 

리액트 프로젝트를 만들기 위해선 creact-react-app을 이용합니다.

npm install -g create-react-app
create-react-app 프로젝트이름

저는 프로젝트이름을 react-tutorial으로 생성하였습니다.

cd react-tutorial
npm start

해당 폴더로 접근한 뒤 npm start로 실행할 수 있습니다.

정상적으로 리액트 페이지가 로드됩니다.

에디터를 이용하여 생성한 폴더를 불러온 뒤 src/app.js 파일을 열어보겠습니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 여기서 <p>태그 안에 있는 내용을 Hello React!로 변경해보겠습니다.

파일 내용을 변경하고 저장을 하게되면 웹페이지가 자동으로 로드됩니다.