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