[React 시작하기 2] hello, world!

[React 시작하기 1]에 이어서 환경 설정 세팅까지 완료됐으니 "hello, world!"를 찍어봅시다.

 

 

 

2022.11.24 - [개발/React] - [React 시작하기 1] 환경 설정 세팅

[React 시작하기 1] 환경 설정 세팅

 

환경 설정 세팅은 위 포스팅을 참고해주시기 바랍니다.

---

 

React 프로젝트를 생성하고 실행까지 했다면, localhost에 화면까지 띄우셨을 겁니다.

이제 화면에 나온 src폴더에 App.js로 가서 수정하여 reload 해보겠습니다.

 

 

우선, 저희의 React 프로젝트는 이러한 폴더 구조로 되어있습니다.

여기서 src 폴더에 App.js, index.js와 public 폴더에 index.html 을 찾아볼 수 있습니다.

세 개의 파일들이 서로 관련되어 있음을 알려드리고, 저희는 src 폴더에 App.js.를 들어가 보겠습니다.

 

---

 

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;

 

App.js에 기본으로 작성이 되어있을 텐데,

Hello, World를 찍기 위해서는 가운데 a태그로 되어있는 부분을 삭제해주시고 p태그 안에 내용을 삭제하고 그 부분에 Hello, World! 를 작성해주면 끝!

 

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>
          Hello, World!
        </p>
      </header>
    </div>
  );
}

export default App;

 

수정이 완료되고 저장을 하면 React page가 자동적으로 reload 돼서 바뀌는 것을 볼 수 있습니다.

 

---

 

 

완성!  이제 Hello, World도 찍었으니 반은 성공한 겁니다. (진지)

(시작이 반이다! 간절하게 믿는 편)

 

앞으로 다양하고 자유롭게 React 프로젝트 생성하시고 이쁘고 동적인 웹 페이지 만들어 봅시다!

고생하셨습니다.