React.js 배우는 중

예제 사이트에 나오는 대로 다음과 같이 입력하면 hello-world 앱이 만들어 진다.

맥에서 수행하였다.

npm install -g create-react-app

create-react-app hello-world

cd hello-world

npm start

위와 같이 하고 npm start를 하면 웹서버를 띄우고 웹브라우저를 켜서 다음과 같은 화면을 보여준다.

javaScript는 공부를 해본지가 처음이라 아직 완벽히 이해하지는 못했다. 

하지만 다음과 같이 react는 클라이언트를 렌더링하는 framework로서 빌드를 하여서 결과물을 static web에 사용할수 있다.

npm run build

이렇게 하면 /build라는 폴더안에 빌드된 html, css, js파일들이 위치하게 된다.

/src 폴더를 보면 유심히 볼게 App.js와 Index.js파일 두개가 있다.

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

render() {

return (

<div className="App">

<div className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<h2>Welcome to React</h2>

</div>

<p className="App-intro">

To get started, edit <code>src/App.js</code> and save to reload.

</p>

</div>

);

}

}

export default App;

위에서 App을 class를 노출한다는 뜻이고, App은 React.Component를 상속 받는다. render() 함수가 html을 렌더링하는 함수이다. 

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import './index.css';

ReactDOM.render(

<App />,

document.getElementById('root')

);

ReactDOM.render는 어떤 클래스를 document의 element로 대체할 것인가를 정의해 준다.