βοΈ React
μ€μΉ
npm init -y
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm install react react-domwebpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
clean: true,
},
mode: "development",
devServer: {
static: "./dist",
open: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
resolve: {
extensions: [".js"],
fallback: {
util: false,
},
},
experiments: {
topLevelAwait: true,
},
};package.json
{
"name": "react-from-scratch",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "webpack serve",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"html-webpack-plugin": "^5.6.3",
"webpack": "^5.101.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2"
},
"dependencies": {
"react": "^19.1.1",
"react-dom": "^19.1.1"
}
}index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React from scratch</title>
</head>
<body>
<div id="root"></div>
</body>
</html>index.js
const React = require("react");
const ReactDom = require("react-dom/client");
const h = React.createElement;
const App = () =>
h(
"div", null,
h("h1", null, "Hello, React!"),
h("p", null, "This is React project foem scratch."),
);
const container = document.getElementsById("root");
const root = ReactDOM.createRoot(container);
root.render(h(App)); 2 npm init
3 npm init -y
4 npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
5 npm install react react-dom
6 npm run start
7 npm run build
8 npx serve distνμΌν¬κΈ° λ무 ν¬λκΉ node_modules μμ νκ³ λμ€μ npm install λ§ νλ©΄λ¨
npm create vite@latest vite_from_scratch
β Select a framework:
β React
β
β Select a variant:
β JavaScript + SWC
ποΈ hamstern