react를 연동해보자, 이전 포스팅과 연결된다.

npm i react react-dom babel-preset-react

  • src/main.js
1
2
3
4
5
6
require("babel-runtime/regenerator");
require("babel-register"); // 추가
require("webpack-hot-middleware/client?reload=true");
require("./main.css");
require("./index.html");
require("./app.js"); // 추가
  • src/index.html
1
2
3
4
5
6
7
8
9
10
<html>
    <body>
        <div class="profile">
            <img src="./images/bglam.png" alt="">
            <h1>Hello Sunwoo!</h1>
        </div>
        <div id="react-root"></div>
        <script src="main-bundle.js"></script>
    </body>
</html>
  • src/app.js
1
2
3
4
5
6
7
import React from "react";
import ReactDOM from "react-dom"

ReactDOM.render(
    <h1>Hello, from React!</h1>,
    document.getElementById("react-root")
)
  • .babelrc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers": ["last 2 versions"]
                },
            
                "debug": true
            }
        ],
        "babel-preset-react"
    ],
    "plugins": ["transform-runtime"]
}

위와 같이 리액트 바벨 프리셋을 추가해주자!

소스변경시에도 리액트의 state 값을 유지시켜주는 핫모듈도 있지만, 왜 때문인지 연동이 안되서 일단 보류 한다.

Reference

https://www.udemy.com/webpack-beyond-the-basics