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

test

parents
Branches
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