Skip to content

Commit 5ac6ac6

Browse files
mrscobblermrscobbler
committed
008 & 009 code
1 parent 1b02997 commit 5ac6ac6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+11119
-1
lines changed

‎006-profile-page/src/App.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React, { Component } from 'react';
33
import logo from './logo.svg';
44
import './App.css';
5-
console.log(Component);
5+
66
class App extends Component{
77
constructor(props) {
88
super(props);

‎008-404/.gitignore

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
6+
# testing
7+
coverage
8+
9+
# production
10+
build
11+
12+
# misc
13+
.DS_Store
14+
.env
15+
npm-debug.log

‎008-404/README.md

+1,244
Large diffs are not rendered by default.

‎008-404/daily-ui-404-page.md

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
page_id: react-daily-ui-008
3+
series: react-daily-ui
4+
permalink: 008-404-page
5+
title: React Daily UI - 008 Creating a 404 Page with React Router
6+
description:
7+
published: true
8+
draft: false
9+
date: 'Thurs Apr 06 2017 08:53:00 GMT-0700 (PDT)'
10+
authors: [ 'sophia', 'jack' ]
11+
hero_image: /assets/images/series/react-daily-ui/008/react-daily-ui-008.jpg
12+
main_image: /assets/images/series/react-daily-ui/008/react-daily-ui-008.jpg
13+
codeRoot: '__FILE_PATH__'
14+
imagesDir: '../../../assets/images/series/react-daily-ui/008'
15+
autotoc: true
16+
fileMetaKeyHeadingsAllowed: true
17+
---
18+
19+
> This post is a part of the React Daily UI post series, a joint effort between [Jack Oliver](http://www.jackoliver.info/), [Sophia Shoemaker](https://twitter.com/wisecobbler), and the rest of the team at [Fullstack React](https://www.fullstackreact.com/).
20+
> Each day we're explaining in detail how to create a UI component with React.
21+
>
22+
> You can view [the Codepen implementation here](http://codepen.io/jackoliver/pen/zBQAWo)
23+
>
24+
> Or you view the code [on Github here](https://github.com/fullstackreact/react-daily-ui)
25+
26+
27+
Welcome to React Daily UI, where every day is opportunity to learn how to build beautiful React applications. We're really excited to be partnering with [Jack Oliver](http://www.jackoliver.info/) who is embarking on this ambitious project with us.
28+
29+
Jack is designing and writing the code for these applications and we're going to deconstruct each one to highlight the features that are unique to React.
30+
31+
Today we're going to learn how to use React Router v4 and include a 404 page for our website:
32+
33+
<iframe height='380' scrolling='no' title='React DailyUI - 008 - 404' src='//codepen.io/jackoliver/embed/XKvWAV/?height=380&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/jackoliver/pen/XKvWAV/'>React DailyUI - 008 - 404</a> by Jack Oliver (<a href='http://codepen.io/jackoliver'>@jackoliver</a>) on <a href='http://codepen.io'>CodePen</a>.
34+
</iframe>
35+
36+
## Overview
37+
Today we're going to make a simple website. The website we are going to build deviates slightly from Jack Oliver's original implementation on CodePen so we can highlight some of the features of the latest version of React Router. We are going to learn about version 4 of React Router which is a different approach to how the router works compared to earlier versions. [The documentation for React Router v4](https://reacttraining.com/react-router/) is a really great resource and highly recommended for getting started with React Router v4.
38+
39+
## Table of Contents
40+
41+
<!-- toc -->
42+
<!-- tocstop -->
43+
44+
<!--template
45+
path="src/layouts/partials/ctas/dashed_email_input_cta.html"
46+
heading="Want to be a pro at building UIs in React?"
47+
body="This post is the first of many that will explain step-by-step how to create professional UI components in React. If you want to become a pro at building UIs in React, put in your email below and we'll notify you as each post is completed."
48+
cta="NOTIFY ME"
49+
formId="DailyUI-008-a"
50+
formAction="https://fd338.infusionsoft.com/app/form/process/0a407f636d37a2d3606fe5d63dc0ce31"
51+
infFormXid="0a407f636d37a2d3606fe5d63dc0ce31"
52+
infFormName="Daily UI Form Submitted"
53+
-->
54+
55+
## Source code structure
56+
57+
First, we're going to create three pages for our site: the home page, an "about us" page and our "404" page. All of the pages for our website will be in the `pages` folder (which lives inside the `src` folder). Each page will have a JavaScript file. If there are any other associated assets with that page, such as a CSS file or images, the JavaScript file and the corresponding assets will all be put in a folder.
58+
59+
Our website has two JavaScript files in our `pages` folder: `Home.js` and `About.js` and a `NotFound` folder which contains the JavaScript and CSS for the 404 page.
60+
61+
<img class="centered" style="width:55%" src="/assets/images/series/react-daily-ui/008/filestructure.png"/>
62+
63+
### The `Home` and `About` components
64+
Our `Home` and `About` components are very simple function components that return the title of the page with no other content.
65+
66+
{lang=javascript,crop-query=(.Home),undent=true}
67+
<<[](src/pages/Home.js)
68+
69+
{lang=javascript,crop-query=(.About),undent=true}
70+
<<[](src/pages/About.js)
71+
72+
### The `NotFound` component
73+
Our `NotFound` component has some slightly different styling which includes a `gif` for a background image.
74+
75+
{lang=javascript,crop-query=(.NotFound),undent=true}
76+
<<[](src/pages/NotFound/NotFound.js)
77+
78+
Here is the CSS code for it:
79+
80+
```
81+
.page-container .bg {
82+
position: absolute;
83+
top: 0;
84+
left: 0;
85+
width: 100vw;
86+
height: 100vh;
87+
background-size: cover;
88+
mix-blend-mode: overlay;
89+
}
90+
```
91+
92+
## Set up React Router
93+
To set up React Router we need to first install the latest version for the web:
94+
95+
`npm install react-router-dom`
96+
97+
Then we need to `import` the components we'll need to use React Router in our website.
98+
99+
The components we are going to need are:
100+
101+
* `BrowserRouter`
102+
* `NavLink`
103+
* `Route`
104+
* `Switch`
105+
* `Redirect`
106+
107+
We'll import all these components in the top of our `index.js` file like so:
108+
{lang=javascript,crop-query=context(.BrowserRouter,1,5),undent=true}
109+
<<[](src/index.js)
110+
111+
Now that we've imported all the components we need, let's use them to create our website.
112+
113+
### `BrowserRouter`
114+
115+
If you look at our `index.js` file, we have wrapped our entire application in a `BrowserRouter` component. The `BrowserRouter` component is the "meat & potatoes" of using React Router. The `BrowserRouter` component inherits from a core `Router` component and makes it possible to include routing in our React web applications.
116+
117+
### `NavLink`
118+
119+
Inside our `BrowserRouter` component we have the navigation area of our page which contains links to the various pages of our site. We are going to use the `NavLink` component for our links. The `NavLink` component automatically adds the `active` class to the rendered `a` element when the current URL matches the `to` path in our `NavLink` component.
120+
{lang=javascript,crop-query=window(choose(.ReactDOM, 1),4,11),undent=true}
121+
<<[](src/index.js)
122+
123+
### `Route`
124+
125+
Below the navigation section of our page is where all the React Router magic actually happens!
126+
127+
We use two React Router components, `Route` &amp; `Switch` to determine which page the user will actually see when they click on a link in our navigation. We wrap `Route` components inside a `Switch` component, but before we get to the purpose of the `Switch` component, let's first understand how to use the `Route` component because the it is one of the most crucial pieces of using React Router.
128+
129+
In our website we have 3 `Route` components and each one has a few features that make it different from the others. All of our `Route` contain `props` that will determine when and how we want our pages to be displayed. Each `Route` uses the `component` prop to specify which component we want rendered.
130+
131+
The first `Route` renders our `Home` component and also uses the following `props`:
132+
133+
1. `path`: This prop specifies which path we want to match. In the case of the home page we want the `Home` component to render when the user browsers to `/`
134+
2. `exact`: This prop indicates that we only want to render when the path matches exactly. This is important for the `/` path. If we did not specify `exact`, when the user typed in any URL to browse our website, the `Home` component would render every time, regardless of the path since every path in our website contains `/` (`/about` &amp; `/about-us`).
135+
{lang=javascript,crop-query=window(choose(.ReactDOM, 1),14,14),undent=true}
136+
<<[](src/index.js)
137+
138+
The second `Route` renders our About page and contains the `path` prop as well. This `Route` does not use the `exact` prop -- any path that contains `/about` will render the About page
139+
{lang=javascript,crop-query=window(choose(.ReactDOM, 1),16,16),undent=true}
140+
<<[](src/index.js)
141+
142+
Finally, our third `Route` is our 404 page. This `Route` component does not contain the `path` prop, so it will always render.
143+
{lang=javascript,crop-query=window(choose(.ReactDOM, 1),17,17),undent=true}
144+
<<[](src/index.js)
145+
146+
### `Redirect`
147+
Within our `Switch` component we also have one more type of component, a `Redirect` component. This component allows us to set up redirects. For our website, we want to make sure that if the user browsers to `/about-us` we redirect them to the correct URL, `/about`, so we'll add this `Redirect` component to make sure that happens.
148+
{lang=javascript,crop-query=window(choose(.ReactDOM, 1),15,15),undent=true}
149+
<<[](src/index.js)
150+
151+
### `Switch`
152+
153+
All of our `Route` components and our `Redirect` component are contained within a `Switch` component. By default, a `Route` will render a component if the all the requirements for a `Route` are met. For example, if we did not wrap our three `Route` components in a `Switch` component, and the user browsed to the `/about` URL, the `About` component and our `404` component would both render on the page. Wrapping our `Route` components in a `Switch` tells our router that we only want to render the first "match" it finds. So placing our "404" `Route` as the last route ensures that if there are no matches, the 404 page will be displayed (and only the 404 page).
154+
{lang=javascript,crop-query=window(choose(.ReactDOM, 1),13,18),undent=true}
155+
<<[](src/index.js)
156+
157+
158+
## Try it out!
159+
160+
Check out the Codepen example:
161+
162+
<iframe height='380' scrolling='no' title='React DailyUI - 008 - 404' src='//codepen.io/jackoliver/embed/XKvWAV/?height=380&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/jackoliver/pen/XKvWAV/'>React DailyUI - 008 - 404</a> by Jack Oliver (<a href='http://codepen.io/jackoliver'>@jackoliver</a>) on <a href='http://codepen.io'>CodePen</a>.
163+
</iframe>
164+
165+
> The complete source for this article is also available [on Github here](https://github.com/fullstackreact/react-daily-ui).
166+
>
167+
> To start the app, download the code, `cd` into the project directory and type:
168+
>
169+
> npm install
170+
> npm start
171+
>
172+
173+
<!--template
174+
path="src/layouts/partials/ctas/dashed_email_input_cta.html"
175+
heading="Want to be a pro at building UIs in React?"
176+
body="This post is the first of many that will explain step-by-step how to create professional UI components in React. If you want to become a pro at building UIs in React, put in your email below and we'll notify you as each post is completed."
177+
cta="NOTIFY ME"
178+
formId="DailyUI-008-b"
179+
formAction="https://fd338.infusionsoft.com/app/form/process/0a407f636d37a2d3606fe5d63dc0ce31"
180+
infFormXid="0a407f636d37a2d3606fe5d63dc0ce31"
181+
infFormName="Daily UI Form Submitted"
182+
-->

‎008-404/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "008-404",
3+
"version": "0.1.0",
4+
"private": true,
5+
"devDependencies": {
6+
"react-scripts": "0.8.5"
7+
},
8+
"dependencies": {
9+
"react": "^15.4.2",
10+
"react-dom": "^15.4.2",
11+
"react-router": "^4.0.0-beta.4",
12+
"react-router-dom": "^4.0.0-beta.4"
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build",
17+
"test": "react-scripts test --env=jsdom",
18+
"eject": "react-scripts eject"
19+
}
20+
}

‎008-404/public/favicon.ico

24.3 KB
Binary file not shown.

‎008-404/public/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7+
<!--
8+
Notice the use of %PUBLIC_URL% in the tag above.
9+
It will be replaced with the URL of the `public` folder during the build.
10+
Only files inside the `public` folder can be referenced from the HTML.
11+
12+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13+
work correctly both with client-side routing and a non-root public URL.
14+
Learn how to configure a non-root public URL by running `npm run build`.
15+
-->
16+
<title>React App</title>
17+
</head>
18+
<body>
19+
<div id="root"></div>
20+
<!--
21+
This HTML file is a template.
22+
If you open it directly in the browser, you will see an empty page.
23+
24+
You can add webfonts, meta tags, or analytics to this file.
25+
The build step will place the bundled scripts into the <body> tag.
26+
27+
To begin the development, run `npm start`.
28+
To create a production bundle, use `npm run build`.
29+
-->
30+
</body>
31+
</html>

‎008-404/react-daily-ui-008.jpg

186 KB
Loading

‎008-404/src/index.css

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
@import 'https://fonts.googleapis.com/css?family=Alfa+Slab+One';
2+
3+
body {
4+
margin: 0;
5+
padding: 0;
6+
font-family: sans-serif;
7+
}
8+
a{
9+
text-decoration: none;
10+
color:white;
11+
text-transform: uppercase;
12+
font-weight: bold;
13+
}
14+
.navigation{
15+
display: -webkit-box;
16+
display: -ms-flexbox;
17+
display: flex;
18+
align-items:center;
19+
position: absolute;
20+
z-index: 100;
21+
}
22+
.navigation li{
23+
margin:10px;
24+
list-style-type: none;
25+
border:1px solid white;
26+
cursor: pointer;
27+
color:white;
28+
}
29+
.navigation li a{
30+
color:white;
31+
padding:10px;
32+
display:block;
33+
}
34+
.navigation li:hover, .navigation li.active{
35+
background:white;
36+
color:black;
37+
}
38+
.navigation li:hover a, .navigation li.active a{
39+
color:black;
40+
}
41+
.page-container {
42+
/*position: absolute;
43+
top: 0;
44+
left: 0;
45+
width: 100vw;
46+
height: 100vh;*/
47+
position:relative;
48+
background: #121212;
49+
display: -webkit-box;
50+
display: -ms-flexbox;
51+
display: flex;
52+
-webkit-box-align: center;
53+
-ms-flex-align: center;
54+
align-items: center;
55+
-webkit-box-pack: center;
56+
-ms-flex-pack: center;
57+
justify-content: center;
58+
}
59+
.page-container .bg {
60+
/*position: absolute;
61+
top: 0;
62+
left: 0;
63+
width: 100vw;
64+
height: 100vh;
65+
background-size: cover;
66+
mix-blend-mode: overlay;*/
67+
}
68+
.page-container .title {
69+
font-family: 'Alfa Slab One', cursive;
70+
font-size: 144px;
71+
height: 100vh;
72+
color: white;
73+
width: 100%;
74+
display: -webkit-box;
75+
display: -ms-flexbox;
76+
display: flex;
77+
background-position: center;
78+
-webkit-box-align: center;
79+
-ms-flex-align: center;
80+
align-items: center;
81+
background-size: cover;
82+
-webkit-box-pack: center;
83+
-ms-flex-pack: center;
84+
justify-content: center;
85+
}

‎008-404/src/index.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import {
4+
BrowserRouter,
5+
Route,
6+
NavLink,
7+
Switch,
8+
Redirect
9+
} from "react-router-dom";
10+
import NotFound from "./pages/NotFound/NotFound";
11+
import Home from "./pages/Home";
12+
import About from "./pages/About";
13+
import "./index.css";
14+
15+
ReactDOM.render(
16+
<BrowserRouter>
17+
<div>
18+
<nav>
19+
<ul className="navigation">
20+
<li><NavLink to="/">Home</NavLink></li>
21+
<li>
22+
<NavLink to="/about-us">Old About Us Page (will redirect)</NavLink>
23+
</li>
24+
<li><NavLink to="/about">About Us</NavLink></li>
25+
<li><NavLink to="/not-found">Invalid Page</NavLink></li>
26+
</ul>
27+
</nav>
28+
<Switch>
29+
<Route path="/" exact component={Home} />
30+
<Redirect from="/about-us" to="/about" />
31+
<Route path="/about" component={About} />
32+
<Route component={NotFound} />
33+
</Switch>
34+
</div>
35+
</BrowserRouter>,
36+
document.getElementById("root")
37+
);

‎008-404/src/logo.svg

+7
Loading

0 commit comments

Comments
 (0)