Updating to CRA 2

_chapters/add-app-favicons.md

@@ -49,7 +49,7 @@ This should generate your favicon package and the accompanying code.
       "type": "image/png"
     }
   ],
-  "start_url": "./index.html",
+  "start_url": ".",
   "display": "standalone",
   "theme_color": "#ffffff",
   "background_color": "#ffffff"

_chapters/call-the-list-api.md

@@ -4,7 +4,6 @@ title: Call the List API
 date: 2017-01-27 00:00:00
 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.
 context: true
-code: frontend
 comments_id: call-the-list-api/127
 ---
 
@@ -54,23 +53,24 @@ renderNotesList(notes) {
   return [{}].concat(notes).map(
     (note, i) =>
       i !== 0
-        ? <ListGroupItem
+        ? <LinkContainer
             key={note.noteId}
-            href={`/notes/${note.noteId}`}
-            onClick={this.handleNoteClick}
-            header={note.content.trim().split("\n")[0]}
+            to={`/notes/${note.noteId}`}
           >
-            {"Created: " + new Date(note.createdAt).toLocaleString()}
-          </ListGroupItem>
-        : <ListGroupItem
+            <ListGroupItem header={note.content.trim().split("\n")[0]}>
+              {"Created: " + new Date(note.createdAt).toLocaleString()}
+            </ListGroupItem>
+          </LinkContainer>
+        : <LinkContainer
             key="new"
-            href="/notes/new"
-            onClick={this.handleNoteClick}
+            to="/notes/new"
           >
-            <h4>
-              <b>{"\uFF0B"}</b> Create a new note
-            </h4>
-          </ListGroupItem>
+            <ListGroupItem>
+              <h4>
+                <b>{"\uFF0B"}</b> Create a new note
+              </h4>
+            </ListGroupItem>
+          </LinkContainer>
   );
 }
 
@@ -86,13 +86,19 @@ handleNoteClick = event => {
 import { PageHeader, ListGroup, ListGroupItem } from "react-bootstrap";
 ```
 
+<img class="code-marker" src="/assets/s.png" />Also include the `LinkContainer` from `react-router-bootstrap`.
+
+``` javascript
+import { LinkContainer } from "react-router-bootstrap";
+```
+
 The code above does a few things.
 
 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.
 
 2. We render the first line of each note as the `ListGroupItem` header by doing `note.content.trim().split('\n')[0]`.
 
-3. And `onClick` for each of the list items we navigate to their respective pages.
+3. And the `LinkContainer` component directs our app to each of the items.
 
 <img class="code-marker" src="/assets/s.png" />Let's also add a couple of styles to our `src/containers/Home.css`.
 

_chapters/configure-aws-amplify.md

@@ -4,7 +4,6 @@ title: Configure AWS Amplify
 date: 2017-01-12 12:00:00
 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.
 context: true
-code: frontend
 comments_id: configure-aws-amplify/151
 ---
 

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

@@ -4,7 +4,6 @@ title: Connect to API Gateway with IAM Auth
 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.
 date: 2018-04-11 00:00:00
 context: true
-code: frontend
 comments_id: 113
 ---
 

_chapters/create-a-build-script.md

@@ -2,7 +2,7 @@
 layout: post
 title: Create a Build Script
 date: 2018-03-26 00:00:00
-code: frontend
+code: frontend_full
 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.
 comments_id: create-a-build-script/189
 ---

_chapters/delete-a-note.md

@@ -4,7 +4,6 @@ title: Delete a Note
 date: 2017-01-31 00:00:00
 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.
 context: true
-code: frontend
 comments_id: comments-for-delete-a-note/137
 ---
 

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

@@ -4,7 +4,6 @@ title: Give Feedback While Logging In
 date: 2017-01-18 00:00:00
 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.
 context: true
-code: frontend
 comments_id: give-feedback-while-logging-in/46
 ---
 

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

@@ -26,23 +26,27 @@ This installs the NPM package and adds the dependency to your `package.json`.
 
 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`.
 
-<img class="code-marker" src="/assets/s.png" />Replace code in `src/index.js` with the following.
+<img class="code-marker" src="/assets/s.png" />Replace the following code in `src/index.js`:
 
 ``` coffee
-import React from "react";
-import ReactDOM from "react-dom";
-import { BrowserRouter as Router } from "react-router-dom";
-import App from "./App";
-import registerServiceWorker from "./registerServiceWorker";
-import "./index.css";
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+<img class="code-marker" src="/assets/s.png" />With this:
 
+``` coffee
 ReactDOM.render(
   <Router>
     <App />
   </Router>,
   document.getElementById("root")
 );
-registerServiceWorker();
+```
+
+<img class="code-marker" src="/assets/s.png" />And import this in the header of `src/index.js`.
+
+``` coffee
+import { BrowserRouter as Router } from "react-router-dom";
 ```
 
 We've made two small changes here.

_chapters/redirect-on-login.md

@@ -4,7 +4,6 @@ title: Redirect on Login
 date: 2017-02-04 00:00:00
 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.
 context: true
-code: frontend
 comments_id: redirect-on-login/24
 ---
 
@@ -14,7 +13,7 @@ Let's start by adding a method to read the `redirect` URL from the querystring.
 
 <img class="code-marker" src="/assets/s.png" />Add the following method to your `src/components/UnauthenticatedRoute.js` below the imports.
 
-``` javascript
+``` coffee
 function querystring(name, url = window.location.href) {
   name = name.replace(/[[]]/g, "\\$&");
 

_chapters/setup-custom-fonts.md

@@ -29,12 +29,18 @@ Here we are referencing all the 5 different weights (300, 400, 600, 700, and 800
 
 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`.
 
-<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.
+<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.
 
 ``` css
-font-family: "Open Sans", sans-serif;
-font-size: 16px;
-color: #333;
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  color: #333;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 ```
 
 <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.

_chapters/signup-with-aws-cognito.md

@@ -4,7 +4,6 @@ title: Signup with AWS Cognito
 date: 2017-01-21 00:00:00
 description: To implement a signup form in our React.js app using Amazon Cognito we are going to use AWS Amplify. We are going to call the Auth.signUp() method to sign a user up and call the Auth.confirmSignUp() method with the confirmation code to complete the process.
 context: true
-code: frontend
 comments_id: signup-with-aws-cognito/130
 ---
 

_chapters/update-the-app.md

@@ -2,8 +2,8 @@
 layout: post
 title: Update the App
 date: 2017-02-13 00:00:00
-code: frontend
 description: Tutorial on how to make changes to your React.js single page application.
+code: frontend_part1
 comments_id: comments-for-update-the-app/43
 ---
 

_chapters/upload-a-file-to-s3.md

@@ -4,7 +4,6 @@ title: Upload a File to S3
 date: 2017-01-24 00:00:00
 description: We want users to be able to upload a file in our React.js app and add it as an attachment to their note. To upload files to S3 directly from our React.js app we are going to use AWS Amplify's Storage.put() method.
 context: true
-code: frontend
 comments_id: comments-for-upload-a-file-to-s3/123
 ---
 

_includes/post-links.html

@@ -29,7 +29,7 @@
     {% capture repo_tag %}Backend Part I Source{% endcapture %}
 
   {% elsif page.code == 'frontend_part1' %}
-    {% capture repo_url %}{{ site.frontend_github_repo }}/tree/update-the-app{% endcapture %}
+    {% capture repo_url %}{{ site.frontend_github_repo }}/tree/part-1{% endcapture %}
     {% capture repo_tag %}Frontend Part I Source{% endcapture %}
 
   {% elsif page.code == 'backend_full' %}