Skip to content
Snippets Groups Projects
Commit 1d02e92f authored by 김형민's avatar 김형민
Browse files

test

parents
No related branches found
No related tags found
No related merge requests found
Pipeline #7550 canceled
{
"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*
# React Starter Kit - A Boilerplate Code
- Webpack, Babel을 통해 React 코드를 빌드하도록 설정되어 있습니다.
- Webpack-dev-server가 내장되어 있습니다.
- node_modules 폴더 아래 파일들은 감시하지 않도록 설정되어 있습니다.
## 작동환경
- node v10.0+
- npm v6.0+
- yarn v1.13.0+
## 간단 사용법
``` bash
# 이 프로젝트를 클론하여 다운 받습니다.
$ git clone https://git.ajou.ac.kr/JYCHOI/react-starter.git
# react-starter 디렉토리로 이동
$ cd react-starter
# git reppo. 삭제
$ rm -rf .git
# 새로운 git Repo. 생성
$ git init
# 코딩 작업 후, 여러분의 프로젝트 원격 Repo에 push
$ git push origin
```
image: alpine:latest
pages:
stage: deploy
script:
- echo 'Nothing to do...'
artifacts:
paths:
- public
only:
- master
tags:
- pages
{
"name": "react-boilerplate",
"version": "0.1.0",
"private": true,
"dependencies": {
"i": "^0.3.7",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"scripts": {
"start": "webpack-dev-server --open --mode development --port 30000",
"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",
"file-loader": "^6.2.0",
"style-loader": "^3.3.2",
"webpack": "^5.77.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.1"
}
}
This diff is collapsed.
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
<!DOCTYPE html>
<html lang="en">
<head>
<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 id="root"></div>
<script src="./app.bundle.js"></script>
</body>
</html>
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.tz}> {props.cn}</button>
<div id = "time">{time}</div>
</>
);
}
const App = () => {
const cityList = [{ cityName : "Seoul", timezone : "Asia/Seoul"}, { cityName : "Tokyo", timezone : "Asia/Tokyo" }, {cityName :"Lagos", timezone : "Africa/Lagos" }]
return (
<>
<h1> What time is it? </h1>
{
cityList.map((name)=> {
return <TimeButton tz={name.timezone} cn = {name.cityName}/> })
}
</>
);
}
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