Skip to content

Commit 5ef1486

Browse files
MyNameIsURLMyNameIsURL
committed
FIRST BLOOD
1 parent 0d1cbd1 commit 5ef1486

File tree

12 files changed

+579
-50
lines changed

12 files changed

+579
-50
lines changed

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"bootstrap": "^4.3.1",
67
"react": "^16.8.6",
8+
"react-bootstrap": "^1.0.0-beta.6",
79
"react-dom": "^16.8.6",
8-
"react-scripts": "2.1.8"
10+
"react-router-dom": "^5.0.0",
11+
"react-scripts": "2.1.8",
12+
"styled-components": "^4.2.0"
913
},
1014
"scripts": {
1115
"start": "react-scripts start",

‎public/index.html‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta
7-
name="viewport"
8-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
9-
/>
10-
<meta name="theme-color" content="#000000" />
11-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8+
<meta name="theme-color" content="#000000" />
9+
<!--
1210
manifest.json provides metadata used when your web app is installed on a
1311
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1412
-->
15-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16-
<!--
13+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
15+
crossorigin="anonymous" />
16+
<!--
1717
Notice the use of %PUBLIC_URL% in the tags above.
1818
It will be replaced with the URL of the `public` folder during the build.
1919
Only files inside the `public` folder can be referenced from the HTML.
@@ -22,12 +22,13 @@
2222
work correctly both with client-side routing and a non-root public URL.
2323
Learn how to configure a non-root public URL by running `npm run build`.
2424
-->
25-
<title>React App</title>
26-
</head>
27-
<body>
28-
<noscript>You need to enable JavaScript to run this app.</noscript>
29-
<div id="root"></div>
30-
<!--
25+
<title>React App</title>
26+
</head>
27+
28+
<body>
29+
<noscript>You need to enable JavaScript to run this app.</noscript>
30+
<div id="root"></div>
31+
<!--
3132
This HTML file is a template.
3233
If you open it directly in the browser, you will see an empty page.
3334
@@ -37,5 +38,6 @@
3738
To begin the development, run `npm start` or `yarn start`.
3839
To create a production bundle, use `npm run build` or `yarn build`.
3940
-->
40-
</body>
41+
</body>
42+
4143
</html>

‎src/About.js‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.js‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
import React, { Component } from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
2+
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
3+
import { Home } from './Home';
4+
import { About } from './About';
5+
import { Contact } from './Contact';
6+
import { NoMatch } from './NoMatch';
7+
import { Layout } from './components/Layout';
8+
import { NavigationBar } from './components/NavigationBar';
9+
import { Jumbotron } from './components/Jumbotron';
410

511
class App extends Component {
612
render() {
713
return (
8-
<div className="App">
9-
<header className="App-header">
10-
<img src={logo} className="App-logo" alt="logo" />
11-
<p>
12-
Edit <code>src/App.js</code> and save to reload.
13-
</p>
14-
<a
15-
className="App-link"
16-
href="https://reactjs.org"
17-
target="_blank"
18-
rel="noopener noreferrer"
19-
>
20-
Learn React
21-
</a>
22-
</header>
23-
</div>
14+
<React.Fragment>
15+
<NavigationBar />
16+
<Jumbotron />
17+
<Layout>
18+
<Router>
19+
<Switch>
20+
<Route exact path="/" component={Home} />
21+
<Route path="/about" component={About} />
22+
<Route path="/contact" component={Contact} />
23+
<Route component={NoMatch} />
24+
</Switch>
25+
</Router>
26+
</Layout>
27+
</React.Fragment>
2428
);
2529
}
2630
}

‎src/Contact.js‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Home.js‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/NoMatch.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
export const NoMatch = () => (
4+
<div>
5+
<h2>No Match</h2>
6+
</div>
7+
)

‎src/assets/boatImage.jpg‎

702 KB
Loading

‎src/components/Jumbotron.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import { Jumbotron as Jumbo, Container } from 'react-bootstrap';
3+
import styled from 'styled-components';
4+
import boatImage from '../assets/boatImage.jpg';
5+
6+
const Styles = styled.div`
7+
.jumbo {
8+
background: url(http://github.com/%3Cspan%20class=pl-s1%3E%3Cspan%20class=pl-kos%3E$%7B%3C/span%3E%3Cspan%20class=pl-s1%3EboatImage%3C/span%3E%3Cspan%20class=pl-kos%3E%7D%3C/span%3E%3C/span%3E) no-repeat fixed bottom;
9+
background-size: cover;
10+
color: #efefef;
11+
height: 200px;
12+
position: relative;
13+
z-index: -2;
14+
}
15+
16+
.overlay {
17+
background-color: #000;
18+
opacity: 0.6;
19+
position: absolute;
20+
top: 0;
21+
left: 0;
22+
bottom: 0;
23+
right: 0;
24+
z-index: -1;
25+
}
26+
`;
27+
28+
export const Jumbotron = () => (
29+
<Styles>
30+
<Jumbo fluid className="jumbo">
31+
<div className="overlay"></div>
32+
<Container>
33+
<h1>Welcome</h1>
34+
<p>Learn to code from my YouTube videos</p>
35+
</Container>
36+
</Jumbo>
37+
</Styles>
38+
)

‎src/components/Layout.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import { Container } from 'react-bootstrap';
3+
4+
export const Layout = (props) => (
5+
<Container>
6+
{props.children}
7+
</Container>
8+
)

0 commit comments

Comments
 (0)