Skip to content
Snippets Groups Projects
Commit 98ab6221 authored by taegyu jeong's avatar taegyu jeong
Browse files

update

parent 2e0dd521
No related branches found
No related tags found
No related merge requests found
Pipeline #7575 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
```
{
"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.
/**
* @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.toLocaleTimeString('ko-KR',{timeZone:props.timeZone}));
}
return (
<>
<button onClick={displayTime}>{props.cityName}</button>
<div id="time">{time}</div>
</>
);
}
const App = (props) => {
var cityList = [{cityName : "Seoul",timeZone : "Asia/Seoul"},
{cityName : "Dubai",timeZone : "Asia/Dubai"},
{cityName : "Vienna",timeZone : "Europe/Vienna"}];
return (
<>
<h1> what time is it?</h1>
{
cityList.map(city => (
<TimeButton cityName ={city.cityName} timeZone = {city.timeZone}/>
))
}
</>
);
}
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