first commit

developer-choi · 최유진 · commit fe7400c29651 · 2020-01-15T21:14:40.000+09:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react", "stage-1"]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "react-library",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "serve": "webpack-dev-server"
+  },
+  "keywords": [],
+  "author": "YuJinChoe",
+  "license": "ISC",
+  "dependencies": {
+    "babel": "^6.23.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-prop-types": "^0.4.0",
+    "react-router-dom": "^5.1.2",
+    "semantic-ui-react": "^0.88.2"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
+    "css-loader": "^3.4.2",
+    "html-webpack-plugin": "^3.2.0",
+    "style-loader": "^1.1.2",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css"></link>
+  <meta charset="UTF-8">
+  <title>Hello World</title>
+</head>
+<body>
+  <div id="root">
+  </div>
+</body>
+</html>
diff --git a/react-library.iml b/react-library.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,22 @@
+import React from "react";
+import {Switch, BrowserRouter as Router, Route} from "react-router-dom";
+
+import Home from "./Home";
+import DynamicPage from "./DynamicPage";
+import NoMatch from "./NoMatch";
+
+const App = () => {
+  return (
+    <Router>
+      <div>
+        <Switch>
+          <Route exact path = "/" component = {Home} />
+          <Route exact path = "/dynamic" component = {DynamicPage} />
+          <Route component = {NoMatch} />
+        </Switch>
+      </div>
+    </Router>
+  );
+};
+
+export default App;
diff --git a/src/components/DynamicPage.js b/src/components/DynamicPage.js
@@ -0,0 +1,14 @@
+import React from "react";
+import Layout from "./Layout";
+import { Header } from "semantic-ui-react";
+
+const DynamicPage = () => {
+  return (
+    <Layout>
+      <Header as="h2">Dynamic Page</Header>
+      <p>This page was loaded asynchronously</p>
+    </Layout>
+  );
+};
+
+export default DynamicPage;
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -0,0 +1,16 @@
+import React from "react";
+import {Link} from "react-router-dom";
+import Layout from "./Layout";
+
+const Home = () => {
+  return (
+    <Layout>
+      <p>Hello World of React and Webpack!</p>
+      <p>
+        <Link to="/dynamic">Navigate to Dynamic Page</Link>
+      </p>
+    </Layout>
+  );
+};
+
+export default Home;
diff --git a/src/components/Layout.css b/src/components/Layout.css
@@ -0,0 +1,8 @@
+.pull-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.h1 {
+  margin: 10px;
+}
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -0,0 +1,24 @@
+import React from "react";
+import {Link} from "react-router-dom";
+import {Header, Container, Divider, Icon} from "semantic-ui-react";
+import {pullRight, h1} from "./layout.css";
+
+const Layout = ({children}) => {
+
+  return (
+    <Container>
+      <Link to="/">
+        <Header as="h1" className={h1}>
+          webpack-for-react
+        </Header>
+      </Link>
+      {children}
+      <Divider/>
+      <p className={pullRight}>
+        Made with <Icon name="heart" color="red"/> by Esau Silva
+      </p>
+    </Container>
+  );
+};
+
+export default Layout;
diff --git a/src/components/NoMatch.js b/src/components/NoMatch.js
@@ -0,0 +1,14 @@
+import React from "react";
+import {Icon, Header} from "semantic-ui-react";
+import Layout from "./Layout";
+
+const NoMatch = () => {
+  return (
+    <Layout>
+      <Icon name="minus circle" size="big" />
+      <strong>Page not found!</strong>
+    </Layout>
+  );
+};
+
+export default NoMatch;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
+
+ReactDOM.render(<App/>, document.getElementById("root"));
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,52 @@
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const port = process.env.PORT || 3000;
+
+module.exports = {
+  mode: "development",
+  entry: "./src/index.js",
+  output: {
+    filename: "bundle.[hash].js"
+  },
+  devtool: "inline-source-map",
+
+  module: {
+    rules: [
+      {
+        test: /\.(js)$/,
+        exclude: /node_modules/,
+        use: ["babel-loader"]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader",
+            options: {
+              modules: true,
+              // camelCase: true,
+              sourceMap: true
+            }
+          }
+        ]
+      }
+    ]
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "public/index.html",
+      favicon: "public/favicon.ico"
+    })
+  ],
+
+  devServer: {
+    host: "localhost",
+    port: port,
+    historyApiFallback: true,
+    open: true
+  },
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "presets": ["env", "react", "stage-1"]`
	`3`	`+}`