firstReact

b65d3487 · 심재엽 · 2e0dd521 · b65d3487 · b65d3487 · 2e0dd521
Commit b65d3487 authored 2 years ago by 심재엽
--- a/.babelrc
+++ b/.babelrc
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
--- a/.gitignore
+++ b/.gitignore
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/README.md
+++ b/README.md
-![Build Status](https://gitlab.com/pages/plain-html/badges/master/build.svg)
-
---
-
-Example plain HTML site using GitLab Pages.
-
-Learn more about GitLab Pages at https://pages.gitlab.io and the official
-documentation https://docs.gitlab.com/ce/user/project/pages/.
-
---
-
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
-
- [GitLab CI](#gitlab-ci)
- [GitLab User or Group Pages](#gitlab-user-or-group-pages)
- [Did you fork this project?](#did-you-fork-this-project)
- [Troubleshooting](#troubleshooting)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-
-## GitLab CI
-
-This project's static Pages are built by [GitLab CI][ci], following the steps
-defined in [`.gitlab-ci.yml`](.gitlab-ci.yml):
-
-```
-image: alpine:latest
-
-pages:
-  stage: deploy
-  script:
-  - echo 'Nothing to do...'
-  artifacts:
-    paths:
-    - public
-  only:
-  - master
-```
-
-The above example expects to put all your HTML files in the `public/` directory.
-
-## GitLab User or Group Pages
-
-To use this project as your user/group website, you will need one additional
-step: just rename your project to `namespace.gitlab.io`, where `namespace` is
-your `username` or `groupname`. This can be done by navigating to your
-project's **Settings**.
-
-Read more about [user/group Pages][userpages] and [project Pages][projpages].
-
-## Did you fork this project?
-
-If you forked this project for your own use, please go to your project's
-**Settings** and remove the forking relationship, which won't be necessary
-unless you want to contribute back to the upstream project.
-
-## Troubleshooting
-
-1. CSS is missing! That means that you have wrongly set up the CSS URL in your
-   HTML files. Have a look at the [index.html] for an example.
-
-[ci]: https://about.gitlab.com/gitlab-ci/
-[index.html]: https://gitlab.com/pages/plain-html/blob/master/public/index.html
-[userpages]: https://docs.gitlab.com/ce/user/project/pages/introduction.html#user-or-group-pages
-[projpages]: https://docs.gitlab.com/ce/user/project/pages/introduction.html#project-pages
--- a/package.json
+++ b/package.json
+{
+  "name": "react-boilerplate",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --open --mode development --port 3000",
+    "build": "webpack --mode production"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^6.7.3",
+    "style-loader": "^3.3.2",
+    "file-loader": "^6.2.0",
+    "webpack": "^5.77.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1"
+  }
+}
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
--- a/public/index.html
+++ b/public/index.html
 <!DOCTYPE html>
-<html>
+<html lang="en">
+
 <head>
-    <meta charset="utf-8">
-    <meta name="generator" content="GitLab Pages">
-    <title>Plain HTML site using GitLab Pages</title>
-    <link rel="stylesheet" href="style.css">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <title>React App</title>
 </head>
-  <body>
-    <div class="navbar">
-      <a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
-      <a href="https://gitlab.com/pages/plain-html/">Repository</a>
-      <a href="https://gitlab.com/pages/">Other Examples</a>
-    </div>
-
-    <h1>Hello World!</h1>

-    <p>
-      This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
-    </p>
+<body>
+  <div id="root"></div>
+  <script src="./app.bundle.js"></script>
 </body>
-</html>

+</html>
\ No newline at end of file
--- a/public/style.css
+++ b/public/style.css
-body {
-  font-family: sans-serif;
-  margin: auto;
-  max-width: 1280px;
-}
-
-.navbar {
-  background-color: #313236;
-  border-radius: 2px;
-  max-width: 800px;
-}
-
-.navbar a {
-  color: #aaa;
-  display: inline-block;
-  font-size: 15px;
-  padding: 10px;
-  text-decoration: none;
-}
-
-.navbar a:hover {
-  color: #ffffff;
-}
-
--- a/src/App.js
+++ b/src/App.js
+import React, { useState } from "react";
+
+const TimeButton = (props) => {
+  let [time, setTime] = useState(null);
+
+  const displayTime = () => {
+    let date = new Date();
+    setTime(date.toLocaleString("ko-KR", { timeZone: props.tz }));
+  };
+
+  return (
+    <>
+      <button onClick={displayTime} tz={props.cityName}>
+        {props.cityName}
+      </button>
+      <div id="time"> {time}</div>
+    </>
+  );
+};
+
+const App = () => {
+  var cityList = [
+    { cityName: "Seoul", timezone: "Asia/Seoul" },
+    { cityName: "London", timezone: "Europe/London" },
+    { cityName: "NewYork", timezone: "America/New_York" },
+  ];
+
+  return (
+    <div>
+      {cityList.map((city, index) => (
+        <div key={index}>
+          <h1>{city.cityName}</h1>
+          <TimeButton cityName={city.cityName} tz={city.timezone} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default App;
--- a/src/index.js
+++ b/src/index.js
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+var container = document.getElementById("root");
+var root = ReactDOM.createRoot(container);
+
+root.render(<App />);
+
+module.hot.accept();
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = {
+  entry: {
+    app: "./src/index.js",
+  },
+  output: {
+    filename: "[name].bundle.js",
+    path: path.resolve(__dirname, "public"),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+        },
+      },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        loader: "file-loader",
+      },
+    ],
+  },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, "public"),
+    },
+    allowedHosts: "all",
+  },
+  plugins: [new webpack.HotModuleReplacementPlugin()],
+  watchOptions: {
+    ignored: "**/node_modules",
+  },
+};