Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 204f0bc

Browse files
committed
fixes the paths to images
1 parent 8a8be24 commit 204f0bc

File tree

12 files changed

+44
-44
lines changed

12 files changed

+44
-44
lines changed

‎day-04/post.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,11 @@ Looking at this component, there are 2 separate parts to the larger component as
140140
1. The title bar
141141
2. The content
142142

143-
<img class="wide" src="../images/04/breakdown.png" />
143+
<img class="wide" src="/assets/series/30-days-of-react/images/04/breakdown.png" />
144144

145145
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.
146146

147-
<img class="wide" src="../images/04/breakdown-2.png" />
147+
<img class="wide" src="/assets/series/30-days-of-react/images/04/breakdown-2.png" />
148148

149149
> 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.
150150
>

‎day-12/post.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ With `node` installed on our system, we can install the `create-react-app` packa
4444
npm install --global create-react-app
4545
```
4646

47-
<img class="wide" src="../images/12/install-create-react-app.jpg" />
47+
<img class="wide" src="/assets/series/30-days-of-react/images/12/install-create-react-app.jpg" />
4848

4949
With `create-react-app` installed globally, we'll be able to use the `create-react-app` command anywhere in our terminal.
5050

@@ -56,31 +56,31 @@ In terminal, we can create a new React application using the command and adding
5656
create-react-app 30days && cd 30days
5757
```
5858

59-
<img class="wide" src="../images/12/create-app.jpg" />
59+
<img class="wide" src="/assets/series/30-days-of-react/images/12/create-app.jpg" />
6060

6161
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:
6262

6363
```bash
6464
npm start
6565
```
6666

67-
<img class="wide" src="../images/12/npm-start.jpg" />
67+
<img class="wide" src="/assets/series/30-days-of-react/images/12/npm-start.jpg" />
6868

6969
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/).
7070

71-
<img class="wide" src="../images/12/chrome-start.jpg" />
71+
<img class="wide" src="/assets/series/30-days-of-react/images/12/chrome-start.jpg" />
7272

7373
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.
7474

75-
<img class="wide" src="../images/12/tree.jpg" />
75+
<img class="wide" src="/assets/series/30-days-of-react/images/12/tree.jpg" />
7676

7777
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.
7878

79-
<img class="wide" src="../images/12/app.jpg" />
79+
<img class="wide" src="/assets/series/30-days-of-react/images/12/app.jpg" />
8080

8181
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.
8282

83-
<img class="wide" src="../images/12/index-html.jpg" />
83+
<img class="wide" src="/assets/series/30-days-of-react/images/12/index-html.jpg" />
8484

8585
Let's look at a few of the features `create-react-app` enables for us.
8686

@@ -246,6 +246,6 @@ We can build our app using the `npm run build` command in the root of our projec
246246
npm run build
247247
```
248248

249-
<img class="wide" src="../images/12/build.jpg" />
249+
<img class="wide" src="/assets/series/30-days-of-react/images/12/build.jpg" />
250250

251251
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.

‎day-13/post.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export default App;
9292

9393
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!
9494

95-
<img class="wide" src="../images/13/run-no-key.jpg" />
95+
<img class="wide" src="/assets/series/30-days-of-react/images/13/run-no-key.jpg" />
9696

9797
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.
9898

@@ -211,7 +211,7 @@ const App = props => {
211211
212212
Back in the browser, everything still works.
213213

214-
<img class="wide" src="../images/13/children-map.jpg" />
214+
<img class="wide" src="/assets/series/30-days-of-react/images/13/children-map.jpg" />
215215

216216
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.
217217

‎day-14/post.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ In order to use fetch, we'll need to install the library in our app we previousl
3838
npm install --save whatwg-fetch
3939
```
4040

41-
<img class="wide" src="../images/14/install-fetch.jpg" />
41+
<img class="wide" src="/assets/series/30-days-of-react/images/14/install-fetch.jpg" />
4242

4343
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:
4444

‎day-17/post.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ We'll use the very popular [react-router](https://github.com/reactjs/react-route
2929
npm install --save react-router-dom
3030
```
3131

32-
<img class="wide" src="../images/17/install-react-router.png" />
32+
<img class="wide" src="/assets/series/30-days-of-react/images/17/install-react-router.png" />
3333

3434
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.
3535

‎day-19/post.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ We'll also need to install another package that we'll use with redux, the `react
3232
npm install --save react-redux
3333
```
3434

35-
<img class="wide" src="../images/19/install-redux.png" />
35+
<img class="wide" src="/assets/series/30-days-of-react/images/19/install-redux.png" />
3636

3737
## Configuration and setup
3838

@@ -300,7 +300,7 @@ const Root = props => {
300300

301301
If we load our page in the browser, we'll see we have one giant error and no page gets rendered.
302302

303-
<img class="wide" src="../images/19/no-reducer.png" />
303+
<img class="wide" src="/assets/series/30-days-of-react/images/19/no-reducer.png" />
304304

305305
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.
306306

‎day-23/post.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ In the terminal, let's execute our tests:
125125
yarn test
126126
```
127127

128-
<img class="wide" src="../images/23/first-tests.jpg" />
128+
<img class="wide" src="/assets/series/30-days-of-react/images/23/first-tests.jpg" />
129129

130130
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).
131131

@@ -149,7 +149,7 @@ Re-running the test, we can see we have two passing tests
149149
yarn test
150150
```
151151

152-
<img class="wide" src="../images/23/second-tests.png" />
152+
<img class="wide" src="/assets/series/30-days-of-react/images/23/second-tests.png" />
153153

154154
## Expectations
155155

‎day-24/post.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ As a reminder, we can run our tests using either the `npm test` command or the `
111111
yarn test
112112
```
113113

114-
<img class="wide" src="../images/24/passing-test.png" />
114+
<img class="wide" src="/assets/series/30-days-of-react/images/24/passing-test.png" />
115115

116116
With our one passing test, we've confirmed our test setup is working.
117117

‎day-25/post.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ We can run our tests in the same manner as we did before using the `yarn test` c
104104
yarn test
105105
```
106106

107-
<img class="wide" src="../images/25/enzyme-test-1.png" />
107+
<img class="wide" src="/assets/series/30-days-of-react/images/25/enzyme-test-1.png" />
108108

109109
Our test passes and is more readable and maintainable.
110110

@@ -178,7 +178,7 @@ describe("Timeline", () => {
178178

179179
Running our tests, we'll see these two expectations pass:
180180

181-
<img class="wide" src="../images/25/enzyme-test-2.png" />
181+
<img class="wide" src="/assets/series/30-days-of-react/images/25/enzyme-test-2.png" />
182182

183183
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.
184184

‎day-26/post.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -162,23 +162,23 @@ If you downloaded it through homebrew, you can use the `selenium-server` command
162162
selenium-server
163163
```
164164

165-
<img class="wide" src="../images/26/selenium-server.png" />
165+
<img class="wide" src="/assets/series/30-days-of-react/images/26/selenium-server.png" />
166166

167167
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:
168168

169169
```bash
170170
npm start
171171
```
172172

173-
<img class="wide" src="../images/26/npm-start.jpg" />
173+
<img class="wide" src="/assets/series/30-days-of-react/images/26/npm-start.jpg" />
174174

175175
Finally, in the third and final terminal window, we'll run our tests using the `nightwatch` command.
176176

177177
```bash
178178
nightwatch
179179
```
180180

181-
<img class="wide" src="../images/26/nightwatch-1.jpg" />
181+
<img class="wide" src="/assets/series/30-days-of-react/images/26/nightwatch-1.jpg" />
182182

183183
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?).
184184

@@ -234,7 +234,7 @@ Running these tests again (in the third terminal window):
234234
nightwatch
235235
```
236236

237-
<img class="wide" src="../images/26/nightwatch-2.jpg" />
237+
<img class="wide" src="/assets/series/30-days-of-react/images/26/nightwatch-2.jpg" />
238238

239239
We can do a similar thing with the `logging out` step from our browser. To get a user to log out, we will:
240240

@@ -306,7 +306,7 @@ Now let's run the entire suite and make sure it passes again using the `nightwat
306306
nightwatch
307307
```
308308

309-
<img class="wide" src="../images/26/nightwatch-3.jpg" />
309+
<img class="wide" src="/assets/series/30-days-of-react/images/26/nightwatch-3.jpg" />
310310

311311
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).
312312

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /