2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
minsung
5f7dae92 1 parent b7067e29

react-failed

Inline Side-by-side
Showing 17 changed files with 49 additions and 132 deletions
......@@ -2,32 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
<script src="https://kit.fontawesome.com/6a5db0a2e0.js" crossorigin="anonymous"></script>
<link rel="icon" href="https://kit.fontawesome.com/6a5db0a2e0.js" />
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<div id="Khu-logo">
<a target="_blank" href="./index.html">
<img alt="" src="../img/Khu_Chat_Icon.svg" height="34" title="Khu_chat"></img>
</a>
</div>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<i class="far fa-comments fa-7x"></i>
<div id="root"></div>
<!--
This HTML file is a template.
......
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
import { createGlobalStyle } from "./node_modules/styled-components";
import reset from "./node_modules/styled-reset";
export default createGlobalStyle`
${reset}
* {
box-sizing: border-box;
}
html, body {
height: 100vh;
}
#root {
height: 100%;
display:flex;
flex-direction: row;
}
@font-face {
font-family: 'Shadows Into Light', cursive;
src: url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
}
@font-face {
font-family: 'Kaushan Script', cursive;
src: url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
}
`;
import defaultProfile from "../imgs/defaultProfile.jpg";
export default {
bgColor: "white",
shadowFonts: "'Shadows Into Light', cursive",
boxBorder: "1px solid #e6e6e6",
borderRadius: "4px",
defaultProfile: `${defaultProfile}`,
};
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="comments" class="svg-inline--fa fa-comments fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M532 386.2c27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.3 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.2 2.1 18.7 3.7 28.4 4.9C208.1 407.6 281.8 448 368 448c20.8 0 40.8-2.4 59.8-6.8C456.3 459.7 499.4 480 553 480c9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25-.4-.3-22.5-24.1-37.8-54.8zm-392.8-92.3L122.1 305c-14.1 9.1-28.5 16.3-43.1 21.4 2.7-4.7 5.4-9.7 8-14.8l15.5-31.1L77.7 256C64.2 242.6 48 220.7 48 192c0-60.7 73.3-112 160-112s160 51.3 160 112-73.3 112-160 112c-16.5 0-33-1.9-49-5.6l-19.8-4.5zM498.3 352l-24.7 24.4 15.5 31.1c2.6 5.1 5.3 10.1 8 14.8-14.6-5.1-29-12.3-43.1-21.4l-17.1-11.1-19.9 4.6c-16 3.7-32.5 5.6-49 5.6-54 0-102.2-20.1-131.3-49.7C338 339.5 416 272.9 416 192c0-3.4-.4-6.7-.7-10C479.7 196.5 528 238.8 528 288c0 28.7-16.2 50.6-29.7 64z"></path></svg>
\ No newline at end of file
body{
background-color: powderblue;
}
\ No newline at end of file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './mainpage/main.css';
import HelloKhu from './mainpage/main';
import KhuIcon from './mainpage/main';
ReactDOM.render(
<React.StrictMode>
<App />
<HelloKhu/>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
......
import React,{ Component } from 'react';
import './App.css';
class App extends Component {
render(){
return (
<div className="App">
Hello, React!!
</div>
);
}
}
export default App;
body{
background-color: powderblue;
}
.App {
text-align: center;
}
......
import React,{ Component } from 'react';
import './main.css';
class HelloKhu extends Component {
render(){
return (
<div className="HelloKhu">
Hello, This is Khu!!
</div>
);
}
}
class KhuIcon extends Component {
render(){
return (
<a target="_blank" href="./index.html">
<img alt="" src="../img/Khu_Chat_Icon.svg" height="34" title="Khu_chat"></img>
</a>
);
}
}
export default {
HelloKhu,
KhuIcon
}
import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);