Skip to content
Snippets Groups Projects
Commit c8b1f32f authored by guithin's avatar guithin
Browse files

first react

parent d8347d37
No related branches found
No related tags found
No related merge requests found
Pipeline #7482 passed
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
\ No newline at end of file
# 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*
{
"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> <body>
<div class="navbar"> <div id="root"></div>
<a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a> <script src="./app.bundle.js"></script>
<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> </body>
</html> </html>
import React, { useEffect, useState } from 'react';
const TimeButton = ({ tz, nowTime }) => {
const [open, setOpen] = useState(false);
return (
<>
<button style={{ display: 'block', marginTop: '10px' }} onClick={() => setOpen(!open)}>{tz.split('/')[1]}</button>
{open && <div>{nowTime.toLocaleString('ko-KR', { timeZone: tz })}</div>}
</>
);
};
const timeZones = Intl.supportedValuesOf('timeZone').filter(i => i.startsWith('Asia'));
const App = () => {
// date를 상위 component에 두어서 interval갯수를 줄임
const [nowTime, setNowTime] = useState(new Date());
useEffect(() => {
const interval = setInterval(() => {
setNowTime(new Date());
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<>
<h1>Time of Asia City</h1>
<h2>Button is On/off toggle</h2>
{timeZones.map(tz => <TimeButton tz={tz} key={tz} nowTime={nowTime} />)}
</>
);
}
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