리액트 샘플 추가

jeonghwan-kim · jeonghwan-kim · commit d653c2b3fd8b · 2020-01-11T16:39:16.000+09:00
diff --git a/react-sample/babel.config.js b/react-sample/babel.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    // TODO: 리액트 프리셋을 추가하세요.
+    "@babel/preset-react"
+  ],
+  plugins: [
+    // TODO: 리액트 핫로더 플러그인을 추가하세요.
+    "react-hot-loader/babel"
+  ]
+};
diff --git a/react-sample/package-lock.json b/react-sample/package-lock.json
diff --git a/react-sample/package.json b/react-sample/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "react-sample",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --progress",
+    "build": "webpack --progress"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.7",
+    "@babel/preset-react": "^7.7.4",
+    "css-loader": "^3.4.2",
+    "html-webpack-plugin": "^3.2.0",
+    "react-hot-loader": "^4.12.18",
+    "style-loader": "^1.1.2",
+    "webpack": "^4.41.5",
+    "webpack-dev-server": "^3.10.1"
+  }
+}
diff --git a/react-sample/src/Hello.js b/react-sample/src/Hello.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { hot } from 'react-hot-loader';
+import Name from './Name';
+
+class Hello extends React.Component {
+  render() {
+    return <h1>Hello <Name /></h1>;
+  }
+}
+
+export default hot(module)(Hello);
diff --git a/react-sample/src/Name.css b/react-sample/src/Name.css
@@ -0,0 +1,3 @@
+.Name {
+  color: blueviolet;
+}
diff --git a/react-sample/src/Name.js b/react-sample/src/Name.js
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import './Name.css';
+
+const Name = () => <span className="Name">World</span>;
+
+export default Name;
diff --git a/react-sample/src/app.js b/react-sample/src/app.js
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import Hello from "./Hello.js";
+
+ReactDOM.render(
+  <Hello />, 
+  document.getElementById("root")
+);
diff --git a/react-sample/src/index.html b/react-sample/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<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>Document</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/react-sample/webpack.config.js b/react-sample/webpack.config.js
@@ -0,0 +1,40 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
+module.exports = {
+  mode: "development",
+  entry: {
+    main: "./src/app.js"
+  },
+  output: {
+    filename: "[name].js",
+    path: path.resolve("./dist")
+  },
+  devServer: {
+    overlay: true,
+    stats: "errors-only",
+    // TODO: react-hot-loader를 사용하도록 구성하세요.
+    hot: true
+  },
+  module: {
+    rules: [
+      // TODO: 리액트 프리셋후에 바벨 로더를 설정하세요.
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: "babel-loader" // 바벨 로더를 추가한다
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      template: "./src/index.html"
+    })
+  ]
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.Name {`
	`2`	`+ color: blueviolet;`
	`3`	`+}`