fixes the paths to images

jashmenn · jashmenn · commit 204f0bcc31a7 · 2020-02-27T15:57:51.000-06:00
diff --git a/day-04/post.md b/day-04/post.md
@@ -140,11 +140,11 @@ Looking at this component, there are 2 separate parts to the larger component as
 1. The title bar
 2. The content
 
-<img class="wide" src="../images/04/breakdown.png" />
+<img class="wide" src="/assets/series/30-days-of-react/images/04/breakdown.png" />
 
 We can chop up the content part of the component into individual places of concern. There are 3 different _item_ components inside the content part.
 
-<img class="wide" src="../images/04/breakdown-2.png" />
+<img class="wide" src="/assets/series/30-days-of-react/images/04/breakdown-2.png" />
 
 > If we wanted to go one step further, we could even break down the title bar into 3 component parts, the _menu_ button, the _title_, and the _search_ icon. We could dive even further into each one of those if we needed to.
 >
diff --git a/day-12/post.md b/day-12/post.md
@@ -44,7 +44,7 @@ With `node` installed on our system, we can install the `create-react-app` packa
 npm install --global create-react-app
 ```
 
-<img class="wide" src="../images/12/install-create-react-app.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/12/install-create-react-app.jpg" />
 
 With `create-react-app` installed globally, we'll be able to use the `create-react-app` command anywhere in our terminal.
 
@@ -56,31 +56,31 @@ In terminal, we can create a new React application using the command and adding
 create-react-app 30days && cd 30days
 ```
 
-<img class="wide" src="../images/12/create-app.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/12/create-app.jpg" />
 
 Let's start our app in the browser. The `create-react-app` package comes with a few built-in scripts it created for us (in the `package.json` file). We can _start_ editing our app using the built-in webserver using the `npm start` command:
 
 ```bash
 npm start
 ```
 
-<img class="wide" src="../images/12/npm-start.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/12/npm-start.jpg" />
 
 This command will open a window in Chrome to the default app it created for us running at the url: [http://localhost:3000/](http://localhost:3000/).
 
-<img class="wide" src="../images/12/chrome-start.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/12/chrome-start.jpg" />
 
 Let's edit the newly created app. Looking at the directory structure it created, we'll see we have a basic node app running with a `public/index.html` and a few files in the `src/` directory that comprise our running app.
 
-<img class="wide" src="../images/12/tree.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/12/tree.jpg" />
 
 Let's open up the `src/App.js` file and we'll see we have a very basic component that should all look familiar. It has a simple render function which returns the result we see in the Chrome window.
 
-<img class="wide" src="../images/12/app.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/12/app.jpg" />
 
 The `index.html` file has a single `<div />` node with the id of `#root`, where the app itself will be mounted for us automatically (this is handled in the `src/index.js` file). Anytime we want to add webfonts, style tags, etc. we can load them in the `index.html` file.
 
-<img class="wide" src="../images/12/index-html.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/12/index-html.jpg" />
 
 Let's look at a few of the features `create-react-app` enables for us.
 
@@ -246,6 +246,6 @@ We can build our app using the `npm run build` command in the root of our projec
 npm run build
 ```
 
-<img class="wide" src="../images/12/build.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/12/build.jpg" />
 
 With that, we now have a live-reloading single-page app (SPA) ready for development. Tomorrow, we'll use this new app we built diving into rendering multiple components at run-time.
diff --git a/day-13/post.md b/day-13/post.md
@@ -92,7 +92,7 @@ export default App;
 
 Starting the app again with the command generated by the `create-react-app` command: `npm start`, we can see the app is working in the browser!
 
-<img class="wide" src="../images/13/run-no-key.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/13/run-no-key.jpg" />
 
 However, if we open the developer console, we'll see we have an error printed out. This error is caused by the fact that React doesn't know how to keep track of the individual components in our list as each one just looks like a `<li />` component.
 
@@ -211,7 +211,7 @@ const App = props => {
 
 Back in the browser, everything still works.
 
-<img class="wide" src="../images/13/children-map.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/13/children-map.jpg" />
 
 There are several other really useful methods in the `React.Children` object available to us. We'll mostly use the `React.Children.map()` function, but it's good to know about the other ones [available](https://facebook.github.io/react/docs/top-level-api.html#react.children) to us. Check out the [documentation](https://facebook.github.io/react/docs/top-level-api.html#react.children) for a longer list.
 
diff --git a/day-14/post.md b/day-14/post.md
@@ -38,7 +38,7 @@ In order to use fetch, we'll need to install the library in our app we previousl
 npm install --save whatwg-fetch
 ```
 
-<img class="wide" src="../images/14/install-fetch.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/14/install-fetch.jpg" />
 
 With the library installed, we can make a request to an off-site server. In order to get access to the `fetch` library, we'll need to `import` the package in our script. Let's update the top few lines of our `src/App.js` file adding the second line:
 
diff --git a/day-17/post.md b/day-17/post.md
@@ -29,7 +29,7 @@ We'll use the very popular [react-router](https://github.com/reactjs/react-route
 npm install --save react-router-dom
 ```
 
-<img class="wide" src="../images/17/install-react-router.png" />
+<img class="wide" src="/assets/series/30-days-of-react/images/17/install-react-router.png" />
 
 With `react-router` installed, we'll import a few packages from the library and update our app architecture. Before we make those updates, let's take a step back and from a high level look at _how_ and _why_ we architect our application this way.
 
diff --git a/day-19/post.md b/day-19/post.md
@@ -32,7 +32,7 @@ We'll also need to install another package that we'll use with redux, the `react
 npm install --save react-redux
 ```
 
-<img class="wide" src="../images/19/install-redux.png" />
+<img class="wide" src="/assets/series/30-days-of-react/images/19/install-redux.png" />
 
 ## Configuration and setup
 
@@ -300,7 +300,7 @@ const Root = props => {
 
 If we load our page in the browser, we'll see we have one giant error and no page gets rendered.
 
-<img class="wide" src="../images/19/no-reducer.png" />
+<img class="wide" src="/assets/series/30-days-of-react/images/19/no-reducer.png" />
 
 The error redux is giving us is telling us that we don't have a reducer inside our store. Without a reducer, it won't know what to do with actions or how to create the state, etc. In order to move beyond this error, we'll need to reference our rootReducer we created.
 
diff --git a/day-23/post.md b/day-23/post.md
@@ -125,7 +125,7 @@ In the terminal, let's execute our tests:
 yarn test
 ```
 
-<img class="wide" src="../images/23/first-tests.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/23/first-tests.jpg" />
 
 From this output, we can see the two tests with one passing test (with a green checkmark) and one failing test (with the red x and a description of the failure).
 
@@ -149,7 +149,7 @@ Re-running the test, we can see we have two passing tests
 yarn test
 ```
 
-<img class="wide" src="../images/23/second-tests.png" />
+<img class="wide" src="/assets/series/30-days-of-react/images/23/second-tests.png" />
 
 ## Expectations
 
diff --git a/day-24/post.md b/day-24/post.md
@@ -111,7 +111,7 @@ As a reminder, we can run our tests using either the `npm test` command or the `
 yarn test
 ```
 
-<img class="wide" src="../images/24/passing-test.png" />
+<img class="wide" src="/assets/series/30-days-of-react/images/24/passing-test.png" />
 
 With our one passing test, we've confirmed our test setup is working.
 
diff --git a/day-25/post.md b/day-25/post.md
@@ -104,7 +104,7 @@ We can run our tests in the same manner as we did before using the `yarn test` c
 yarn test
 ```
 
-<img class="wide" src="../images/25/enzyme-test-1.png" />
+<img class="wide" src="/assets/series/30-days-of-react/images/25/enzyme-test-1.png" />
 
 Our test passes and is more readable and maintainable.
 
@@ -178,7 +178,7 @@ describe("Timeline", () => {
 
 Running our tests, we'll see these two expectations pass:
 
-<img class="wide" src="../images/25/enzyme-test-2.png" />
+<img class="wide" src="/assets/series/30-days-of-react/images/25/enzyme-test-2.png" />
 
 Next, let's update our search button tests. We have two tests here, where one requires us to test an interaction. Enzyme provides a very clean interface for handling interactions. Let's see how we can write a test against the search icon.
 
diff --git a/day-26/post.md b/day-26/post.md
@@ -162,23 +162,23 @@ If you downloaded it through homebrew, you can use the `selenium-server` command
 selenium-server
 ```
 
-<img class="wide" src="../images/26/selenium-server.png" />
+<img class="wide" src="/assets/series/30-days-of-react/images/26/selenium-server.png" />
 
 In the second window, we'll need to launch our app. Remember, the browser we're going to launch will _actually_ hit our site, so we need an instance of it running. We can start our app up with the `npm start` comamnd:
 
 ```bash
 npm start
 ```
 
-<img class="wide" src="../images/26/npm-start.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/26/npm-start.jpg" />
 
 Finally, in the third and final terminal window, we'll run our tests using the `nightwatch` command.
 
 ```bash
 nightwatch
 ```
 
-<img class="wide" src="../images/26/nightwatch-1.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/26/nightwatch-1.jpg" />
 
 When we run the `nightwatch` command, we'll see a chrome window open up, visit the site, and click on the login link automatically... (pretty cool, right?).
 
@@ -234,7 +234,7 @@ Running these tests again (in the third terminal window):
 nightwatch
 ```
 
-<img class="wide" src="../images/26/nightwatch-2.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/26/nightwatch-2.jpg" />
 
 We can do a similar thing with the `logging out` step from our browser. To get a user to log out, we will:
 
@@ -306,7 +306,7 @@ Now let's run the entire suite and make sure it passes again using the `nightwat
 nightwatch
 ```
 
-<img class="wide" src="../images/26/nightwatch-3.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/26/nightwatch-3.jpg" />
 
 One final note, if you're interested in a deeper set of selenium tutorials, check out the free tutorials from guru99.com at [https://www.guru99.com/selenium-tutorial.html](https://www.guru99.com/selenium-tutorial.html). They are pretty in-depth and well done (in our opinion).
 
diff --git a/day-28/post.md b/day-28/post.md
@@ -38,7 +38,7 @@ Let's use our build system to generate a list of production files we'll want to
 npm run build
 ```
 
-<img class="wide" src="../images/28/npm-build.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/npm-build.jpg" />
 
 ## Where
 
@@ -65,7 +65,7 @@ We'll explore a few of these options together.
 
 ## surge.sh
 
-<img class="wide" src="../images/28/surge.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/surge.jpg" />
 
 [surge.sh](https://surge.sh/) is arguably one of the easiest hosting providers to host our static site with. They provide a way for us to easily and repeatable methods for hosting our sites. 
 
@@ -83,23 +83,23 @@ surge -p build
 
 The surge tool will run and it will upload all of our files to a domain specified by the output of the tool. In the case of the previous run, this uploads our files to the url of [hateful-impulse.surge.sh](http://hateful-impulse.surge.sh/) (or the SSL version at [https://hateful-impulse.surge.sh/](https://hateful-impulse.surge.sh/))
 
-<img class="wide" src="../images/28/surge-deploy.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/surge-deploy.jpg" />
 
 For more information on `surge`, check out their documentation at [https://surge.sh/help/](https://surge.sh/help/).
 
 ## Github pages
 
-<img class="wide" src="../images/28/github-pages.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/github-pages.jpg" />
 
 [github pages](https://pages.github.com/) is another easy service to deploy our static files to. It's dependent upon using github to host our git files, but is another easy-to-use hosting environment for single page applications. 
 
 We'll need to start by creating our github pages repository on github. With an active account, we can visit the [github.com/new](https://github.com/new) site and create a repository. 
 
-<img class="wide" src="../images/28/github-repo.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/github-repo.jpg" />
 
 With this repo, it will redirect us to the repo url. Let's click on the `clone or download` button and find the github git url. Let's copy and paste this to our clipboard and head to our terminal.
 
-<img class="wide" src="../images/28/github-url.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/github-url.jpg" />
 
 In our terminal, let's add this as a remote origin for our git repo. 
 
@@ -130,7 +130,7 @@ git filter-branch -f --prune-empty --subdirectory-filter build
 git checkout -
 ```
 
-<img class="wide" src="../images/28/git-branch.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/git-branch.jpg" />
 
 Since github pages does not serve directly from the root, but instead the build folder, we'll need to add a configuration to our `package.json` by setting the `homepage` key to the `package.json` file with our github url. Let's open the `package.json` file and add the "homepage" key:
 
@@ -182,7 +182,7 @@ For more information on github pages, check out their documentation at [https://
 
 ## Heroku
 
-<img class="wide" src="../images/28/heroku.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/heroku.jpg" />
 
 [Heroku](https://www.heroku.com/) is a very cool hosting service that allows us to host both static and non-static websites. We might want to deploy a static site to heroku as we may want to move to a dynamic backend at some point, are already comfortable with deploying to heroku, etc. 
 
@@ -196,7 +196,7 @@ Finally, we'll need to run `heroku login` to set up credentials for our applicat
 heroku login
 ```
 
-<img class="wide" src="../images/28/heroku-login.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/heroku-login.jpg" />
 
 Next, we'll need to tell the `heroku` command-line that we have a heroku app. We can do this by calling `heroku apps:create` from the command-line in our project root:
 
@@ -206,7 +206,7 @@ heroku apps:create
 heroku apps:create thirty-days-of-react-demo
 ```
 
-<img class="wide" src="../images/28/heroku-create.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/heroku-create.jpg" />
 
 Heroku knows how to run our application thanks to [buildpacks](https://devcenter.heroku.com/articles/buildpacks). We'll need to tell heroku we have a static-file buildpack so it knows to serve our application as a static file/spa. 
 
@@ -216,7 +216,7 @@ We'll need to install the static-files plugin for heroku. This can be easiy inst
 heroku plugins:install heroku-cli-static
 ```
 
-<img class="wide" src="../images/28/heroku-plugin.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/heroku-plugin.jpg" />
 
 We can add the static file buildpack with the following command:
 
@@ -230,7 +230,7 @@ For any configuration updates, we'll need to run the `static:init` command from
 heroku static:init
 ```
 
-<img class="wide" src="../images/28/heroku-static-init.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/28/heroku-static-init.jpg" />
 
 Now we can deploy our static site to heroku using the `git` workflow:
 
diff --git a/day-29/post.md b/day-29/post.md
@@ -158,7 +158,7 @@ npm run release
 
 With all our tests passing, our updated application will be deployed successfully!
 
-<img class="wide" src="../images/29/deploy-script.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/29/deploy-script.jpg" />
 
 If any of our tests fail, we'll get all the output of our command, including the failure errors. Let's update one of our tests to make them fail purposefully to test the script.
 
@@ -178,7 +178,7 @@ Let's rerun the `release` script and watch it fail and _not_ run the deploy scri
 npm run release
 ```
 
-<img class="wide" src="../images/29/deploy-fail.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/29/deploy-fail.jpg" />
 
 As we see, we'll get the output of the failing test in our logs, so we can fix the bug and then rerelease our application again by running the `npm run release` script again.
 
@@ -188,15 +188,15 @@ As we see, we'll get the output of the failing test in our logs, so we can fix t
 
 Head to [travis-ci.org](https://travis-ci.org/) and sign up there.
 
-<img class="wide" src="../images/29/travis-setup.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/29/travis-setup.jpg" />
 
 Once you're signed up, click on the `+` button and find your repository:
 
-<img class="wide" src="../images/29/travis-select-repo.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/29/travis-select-repo.jpg" />
 
 From the project screen, click on the big 'activate repo' button.
 
-<img class="wide" src="../images/29/travis-activate-repo.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/29/travis-activate-repo.jpg" />
 
 To allow Travis CI to automatically log in for us during deployment, we need to add `SURGE_LOGIN` and `SURGE_TOKEN` environment variables. Open the _More Options_ menu and click settings.
 
@@ -230,7 +230,7 @@ git push github master
 
 That's it. Now travis will execute our tests based on the default script of `npm test`.
 
-<img class="wide" src="../images/29/travis-output.jpg" />
+<img class="wide" src="/assets/series/30-days-of-react/images/29/travis-output.jpg" />
 
 Now, we'll want travis to actually deploy our app for us. Since we already have a `scripts/deploy.sh` script that will deploy our app, we can use this to deploy from travis.
 
