React-default-setting
react : ๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
react-dom : browser, dom, webapp ๊ด๋ฆฌ
$ npm install react react-dom
@babel/preset-react : jsx ๋ฌธ๋ฒ์ javascript๋ก ๋ณํ
$ npm install @babel/preset-react
// package.json
{
"name": "React",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prod": "webpack --mode=production",
"dev": "webpack --mode=development",
"watch": "webpack-dev-server --mode development --open --hot"
},
"keywords": [
"webpack","React"
],
"author": "",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4", // react ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค.
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.0.9"
},
"dependencies": {
"@babel/polyfill": "^7.10.4",
"react": "^16.13.1", //react ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค.
"react-dom": "^16.13.1" //react ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค.
}
}
//.babelrc
{
"presets": [
"@babel/env",
"@babel/react" //react ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค.
]
}
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
require("@babel/polyfill");
module.exports = {
entry: {
app: [
'@babel/polyfill',
path.join(__dirname, './src/index.js')
]
},
module: {
rules: [
{ //react ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค. ST
test: /\.(js|jsx)$/,
exclude: /node_module/,
use: {
loader: 'babel-loader'
}
}, //react ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค. ED
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html'
})
],
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist')
},
}
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
// src/App.js
import React from 'react';
import Hello from './component/Hello';
function App() {
return (
<>
<Hello />
</>
)
};
export default App;
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
ReactDOM.render(<App />, document.getElementById("root"));
๋ฆฌ์กํธ๋ฅผ ์๋์ผ๋ก ์ฒ์๋ถํฐ ํ๊ฒฝ์ค์ ์ ํ๋ค๊ณ ํ์๋ ๊ธฐ๋ณธ์ ์ธ ํด๋ ๊ตฌ์กฐ์ ๋๋ค.
Last updated
Was this helpful?