[React 따라하기 #2] React 시작하기 hello world!

React 따라하기 #2
자동 생성된 소스 수정하기

이전 포스트 ↓

[React 따라하기 #1] React 개발에 필요한 도구 설치

 

src/index.js 를 보면

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

이렇게 되어있죠. 

ReactDOM.render(<App />, document.getElementById('root'));

먼저 프로그램 진입점인 index.js 를 보시면

root 라는 id 를 가진 element 를 찾고 거기에 Tag 명이 App 인것을 inner html로 넣기로 되어있습니다.

기본적으로 Tag 명이 App인 것은 없습니다. 상단에 import 한게 있죠.

해당 소스(App.js)로 가보면  function App() { return ... } 이라는 메소드가 있습니다.

여기러 리턴하는 html 을 index.html 에 있는 <div id="root"></div> 안에 넣습니다. (innerHTML)

 

그래서 결과가 이렇게 됩니다.

 

[React 따라하기 #1] React 개발에 필요한 도구 설치

[React 따라하기 #3] Codepen에서 실행해보기

[React 따라하기 #4] ES6, js Class 에 대한 간단한 설명

[React 따라하기 #5] React JSX

[React 따라하기 #6] React Components(컴포넌트)

[React 따라하기 #7] React Components(컴포넌트) 참조하기

[React 따라하기 #8] React Props

[React 따라하기 #9] React State

[React 따라하기 #10] React 기본 함수 (life cycle)

[React 따라하기 #11] React Event 리액트 이벤트