feat: ReactJS
$ npm install --save-dev @babel/cli @babel/core @babel/node @babel/preset-env @babel/polyfill{
"presets": ["@babel/preset-env"]
}Last updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="App"></div>
<script type="module" src="./src/index.js"></script>
</body>
</html>class Component {
constructor(target, props = {}) {
this.target = target;
this.props = props;
this.setup();
this.render();
this.mounted();
window.onbeforeunload = () => {
this.unmounted();
};
}
setup() {}
template() {
return "";
}
render() {
this.target.innerHTML = this.template();
}
mounted() {}
setState(newState, shouldUpdate = true) {
let isRerender = false;
for (const key of Object.keys(newState)) {
if (this.state[key] !== newState[key]) {
isRerender = true;
break;
}
}
if (!isRerender) return;
this.state = { ...this.state, ...newState };
if (shouldUpdate) {
this.render();
this.mounted();
this.updated();
}
}
updated() {}
unmounted() {}
}
export default Component;import Component from "./core/Component.js";
class App extends Component {
setup() {
this.state = {
data: [],
text: "",
};
}
template() {
return `
<div>
바닐라 JS 웹 컴포넌트 개발
</div>
`;
}
mounted() {}
updated() {}
}
export default App;
import App from "./App.js";
new App(document.querySelector(".App"), {});