create-react-app의 src/App.js 분석

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

render() {

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;

1) import 구문

import는 es6에서 정의한 모듈을 불러오는 방법입니다.

그러나 이는 node.js 환경에서 사용되는 것이지, 브라우저 환경에서는 이 기능이 지원되지 않으므로 번들링을 사용해야 합니다.

번들링은 모듈을 하나의 파일로 합쳐서 html파일에 script로 넣어줍니다.

2) class App extends Component

react component를 상속받은 app 클래스

3) render함수

자바스크립트 객체를 반환하여 로딩해주는 함수.

return 안에 있는 html같이 생긴 코드들은 JSX 입니다.

4) JSX

JSX는 번들링 할 때 babel-loader가 자바스크립트로 변환해줌.