Skip to content
Snippets Groups Projects
Commit ac4b6176 authored by 심재엽's avatar 심재엽
Browse files

Merge branch 'simzard' into 'master'

firstReact

See merge request Simzard/firstreact!1
parents 2e0dd521 b65d3487
Branches
No related tags found
No related merge requests found
Pipeline #7521 canceled
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
# 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*
![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
{
"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"
}
}
This diff is collapsed.
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="generator" content="GitLab Pages"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Plain HTML site using GitLab Pages</title> <title>React App</title>
<link rel="stylesheet" href="style.css">
</head> </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> <body>
This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator. <div id="root"></div>
</p> <script src="./app.bundle.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
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;
}
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;
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();
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",
},
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment