Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d94ce6a

Browse files
jayairjayair
committed
Updating to CRA 2
1 parent d7b86bc commit d94ce6a

16 files changed

+48
-39
lines changed

‎_chapters/add-app-favicons.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ This should generate your favicon package and the accompanying code.
4949
"type": "image/png"
5050
}
5151
],
52-
"start_url": "./index.html",
52+
"start_url": ".",
5353
"display": "standalone",
5454
"theme_color": "#ffffff",
5555
"background_color": "#ffffff"

‎_chapters/call-the-list-api.md‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ title: Call the List API
44
date: 2017-01-27 00:00:00
55
description: To display a list of all of the user’s notes in our React.js app, we are going to make a GET request to our serverless API backend using the AWS Amplify API module. We are also going to use the ListGroup and ListGroupItem React-Bootstrap components to render the list.
66
context: true
7-
code: frontend
87
comments_id: call-the-list-api/127
98
---
109

@@ -54,23 +53,24 @@ renderNotesList(notes) {
5453
return [{}].concat(notes).map(
5554
(note, i) =>
5655
i !== 0
57-
? <ListGroupItem
56+
? <LinkContainer
5857
key={note.noteId}
59-
href={`/notes/${note.noteId}`}
60-
onClick={this.handleNoteClick}
61-
header={note.content.trim().split("\n")[0]}
58+
to={`/notes/${note.noteId}`}
6259
>
63-
{"Created: " + new Date(note.createdAt).toLocaleString()}
64-
</ListGroupItem>
65-
: <ListGroupItem
60+
<ListGroupItem header={note.content.trim().split("\n")[0]}>
61+
{"Created: " + new Date(note.createdAt).toLocaleString()}
62+
</ListGroupItem>
63+
</LinkContainer>
64+
: <LinkContainer
6665
key="new"
67-
href="/notes/new"
68-
onClick={this.handleNoteClick}
66+
to="/notes/new"
6967
>
70-
<h4>
71-
<b>{"\uFF0B"}</b> Create a new note
72-
</h4>
73-
</ListGroupItem>
68+
<ListGroupItem>
69+
<h4>
70+
<b>{"\uFF0B"}</b> Create a new note
71+
</h4>
72+
</ListGroupItem>
73+
</LinkContainer>
7474
);
7575
}
7676

@@ -86,13 +86,19 @@ handleNoteClick = event => {
8686
import { PageHeader, ListGroup, ListGroupItem } from "react-bootstrap";
8787
```
8888

89+
<img class="code-marker" src="/assets/s.png" />Also include the `LinkContainer` from `react-router-bootstrap`.
90+
91+
``` javascript
92+
import { LinkContainer } from "react-router-bootstrap";
93+
```
94+
8995
The code above does a few things.
9096

9197
1. It always renders a **Create a new note** button as the first item in the list (even if the list is empty). We do this by concatenating an array with an empty object with our `notes` array.
9298

9399
2. We render the first line of each note as the `ListGroupItem` header by doing `note.content.trim().split('\n')[0]`.
94100

95-
3. And `onClick` for each of the list items we navigate to their respective pages.
101+
3. And the `LinkContainer` component directs our app to each of the items.
96102

97103
<img class="code-marker" src="/assets/s.png" />Let's also add a couple of styles to our `src/containers/Home.css`.
98104

‎_chapters/configure-aws-amplify.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ title: Configure AWS Amplify
44
date: 2017-01-12 12:00:00
55
description: We are going to use the information of our AWS resources to configure AWS Amplify in our React app. We'll call the Amplify.configure() method when our app first loads.
66
context: true
7-
code: frontend
87
comments_id: configure-aws-amplify/151
98
---
109

‎_chapters/connect-to-api-gateway-with-iam-auth.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ title: Connect to API Gateway with IAM Auth
44
description: For our React.js app to make requests to a serverless backend API secured using AWS IAM, we need to sign our requests using Signature Version 4. But to be able to do that we need to use our User Pool user token and get temporary IAM credentials from our Identity Pool. Using these temporary IAM credentials we can then generate the Signature Version 4 security headers and make a request using HTTP fetch.
55
date: 2018-04-11 00:00:00
66
context: true
7-
code: frontend
87
comments_id: 113
98
---
109

‎_chapters/create-a-build-script.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: post
33
title: Create a Build Script
44
date: 2018-03-26 00:00:00
5-
code: frontend
5+
code: frontend_full
66
description: To configure our Create React App with Netlify, we need to add a build script to our project root. To make sure that we return a HTTP status code of 200 for our React Router routes we will be adding a redirects rule.
77
comments_id: create-a-build-script/189
88
---

‎_chapters/delete-a-note.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ title: Delete a Note
44
date: 2017-01-31 00:00:00
55
description: We want users to be able to delete their note in our React.js app. To do this we are going to make a DELETE request to our serverless API backend using AWS Amplify.
66
context: true
7-
code: frontend
87
comments_id: comments-for-delete-a-note/137
98
---
109

‎_chapters/give-feedback-while-logging-in.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ title: Give Feedback While Logging In
44
date: 2017-01-18 00:00:00
55
description: We should give users some feedback while we are logging them in to our React.js app. To do so we are going to create a component that animates a Glyphicon refresh icon inside a React-Bootstrap Button component. We’ll do the animation while the log in call is in progress.
66
context: true
7-
code: frontend
87
comments_id: give-feedback-while-logging-in/46
98
---
109

‎_chapters/handle-routes-with-react-router.md‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,27 @@ This installs the NPM package and adds the dependency to your `package.json`.
2626

2727
Even though we don't have any routes set up in our app, we can get the basic structure up and running. Our app currently runs from the `App` component in `src/App.js`. We are going to be using this component as the container for our entire app. To do that we'll encapsulate our `App` component within a `Router`.
2828

29-
<img class="code-marker" src="/assets/s.png" />Replace code in `src/index.js` with the following.
29+
<img class="code-marker" src="/assets/s.png" />Replace the following code in `src/index.js`:
3030

3131
``` coffee
32-
import React from "react";
33-
import ReactDOM from "react-dom";
34-
import { BrowserRouter as Router } from "react-router-dom";
35-
import App from "./App";
36-
import registerServiceWorker from "./registerServiceWorker";
37-
import "./index.css";
32+
ReactDOM.render(<App />, document.getElementById('root'));
33+
```
34+
35+
<img class="code-marker" src="/assets/s.png" />With this:
3836

37+
``` coffee
3938
ReactDOM.render(
4039
<Router>
4140
<App />
4241
</Router>,
4342
document.getElementById("root")
4443
);
45-
registerServiceWorker();
44+
```
45+
46+
<img class="code-marker" src="/assets/s.png" />And import this in the header of `src/index.js`.
47+
48+
``` coffee
49+
import { BrowserRouter as Router } from "react-router-dom";
4650
```
4751

4852
We've made two small changes here.

‎_chapters/redirect-on-login.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ title: Redirect on Login
44
date: 2017-02-04 00:00:00
55
description: To make sure that our React.js redirects a user to the right page after they login, we are going to use the React Router v4 Redirect component.
66
context: true
7-
code: frontend
87
comments_id: redirect-on-login/24
98
---
109

@@ -14,7 +13,7 @@ Let's start by adding a method to read the `redirect` URL from the querystring.
1413

1514
<img class="code-marker" src="/assets/s.png" />Add the following method to your `src/components/UnauthenticatedRoute.js` below the imports.
1615

17-
``` javascript
16+
``` coffee
1817
function querystring(name, url = window.location.href) {
1918
name = name.replace(/[[]]/g, "\\$&");
2019

‎_chapters/setup-custom-fonts.md‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,18 @@ Here we are referencing all the 5 different weights (300, 400, 600, 700, and 800
2929

3030
Now we are ready to add our newly added fonts to our stylesheets. Create React App helps separate the styles for our individual components and has a master stylesheet for the project located in `src/index.css`.
3131

32-
<img class="code-marker" src="/assets/s.png" />Let's change the current font in `src/index.css` for the `body` tag from `font-family: sans-serif;` to the following.
32+
<img class="code-marker" src="/assets/s.png" />Let's change the current font in `src/index.css` for the `body` tag to the following.
3333

3434
``` css
35-
font-family: "Open Sans", sans-serif;
36-
font-size: 16px;
37-
color: #333;
35+
body {
36+
margin: 0;
37+
padding: 0;
38+
font-family: "Open Sans", sans-serif;
39+
font-size: 16px;
40+
color: #333;
41+
-webkit-font-smoothing: antialiased;
42+
-moz-osx-font-smoothing: grayscale;
43+
}
3844
```
3945

4046
<img class="code-marker" src="/assets/s.png" />And let's change the fonts for the header tags to our new Serif font by adding this block to the css file.

0 commit comments

Comments
 (0)