You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+29-33Lines changed: 29 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,24 +10,20 @@ The code you are given for the project implements the search form and the loadin
10
10
11
11
Let's take a look at the code that's already there. Many of the starter files should already be familiar to you if you completed [the previous workshop](https://github.com/ziad-saab/react-intro-workshop).
12
12
13
-
*`server.js`: Tiny Express app that will serve our application files
14
-
*`webpack.config.js`: Configuration for bundling our code files to `app-bundle.js`
15
13
*`package.json`: Configuration file for NPM, contains dependencies and project metadata
16
-
*`.gitignore`: Files that should be ignored by Git. `node_modules` can always be regenerated, and so can `app-bundle.js`.
17
-
*`src/index.html`: File that gets served by Express to load our app
18
-
*`src/js/app.js`: This file is the entry point for Webpack. It puts our app on the screen.
19
-
*`src/js/app-bundle.js`: Never need to touch this file. It gets generated by Webpack and is loaded by the browser.
20
-
*`src/js/app-bundle.js.map`: Contains source mapping info for the browser's Developer Tools
21
-
*`src/js/components/*`: All the components of our application.
22
-
*`src/css/app.css`: The styles for our app. Check it out to see how your starter app is being styled, and add to it to complete the project.
14
+
*`.gitignore`: Files that should be ignored by Git. `node_modules` can always be regenerated
15
+
*`public/index.html`: File that gets served thru Webpack after having been filled in
16
+
*`src/index.js`: This file is the entry point for the app. It puts our app on the screen!
17
+
*`src/components/*`: All the components of our application.
18
+
*`src/index.css`: The styles for our app. Check it out to see how your starter app is being styled, and add to it to complete the project. Notice that we don't <link> this CSS from the index? How does this work?? Make sure you understand!!!
23
19
24
20
**To get started coding on this project, remember the following steps**:
25
21
26
22
1.`npm install` the first time you clone this repo
27
-
2.`npm run dev` anytime you want to start developing. This will watch your JS files and re-run webpack when there are changes
28
-
3.`node server.js` to start the Express server that will serve the app.
23
+
2.`npm start` anytime you want to start developing. This will watch your JS files and re-run webpack when there are changes
24
+
3.Start coding!
29
25
30
-
In `app.js` we have the following route structure:
26
+
In `index.js` we have the following route structure:
31
27
32
28
```javascript
33
29
<Route path="/" component={App}>
@@ -94,7 +90,7 @@ When clicking on the followers link in the UI, notice that the URL changes to `/
94
90
95
91
96
92
### Step 1: adding the route
97
-
In `app.js`, you currently have your user route setup like this:
93
+
In `index.js`, you currently have your user route setup like this:
98
94
99
95
```javascript
100
96
<Route path="user/:username" component={User} />
@@ -122,7 +118,7 @@ For the moment, create the component only with a `render` function. In there, us
122
118
```
123
119
124
120
### Step 3: displaying the nested component inside its parent
125
-
When the URL changes to `followers`, we want to display the followers alongside the current `User` component. This is why we are nesting the followers route inside user.
121
+
When the URL changes to `followers`, we want to display the followers alongside the current `User` component. **This is why we are nesting the followers route inside the user route.**
126
122
127
123
To reflect this nesting in our tree of components, we have to add a `{this.props.children}` output to our `User` component.
128
124
@@ -131,7 +127,7 @@ Modify the `User` component to make it display its children just before the clos
131
127
When this is done, go back to your browser. Search for a user, and click on FOLLOWERS. The followers component should be displayed below the user info.
132
128
133
129
### Step 4: loading GitHub data in the `Followers` component:
134
-
We want to load the followers of the current user as soon as the `Followers` component is mounted in the DOM. In the `componentDidMount` of `Followers`, use jQuery's `getJSON` to make a request to GitHub's API for the followers. Simply add `/followers` to the GitHub API URL for the user e.g. https://api.github.com/users/ziad-saab/followers
130
+
We want to load the followers of the current user as soon as the `Followers` component is mounted in the DOM. In the `componentDidMount` of `Followers`, use `fetch` to make a request to GitHub's API for the followers. Simply add `/followers` to the GitHub API URL for the user e.g. https://api.github.com/users/ziad-saab/followers
135
131
136
132
In the callback to your AJAX request, use `setState` to set a `followers` state on your component.
137
133
@@ -147,28 +143,26 @@ Using the `this.state.followers` in your `render` method, display the followers
147
143
</Link>
148
144
```
149
145
150
-
And here's a visual example of four `GithubUser` instances (remember to use `vertical-align` in your CSS to align the image and the name):
146
+
And here's a visual example of four `GithubUser` instances (you can use `vertical-align` in your CSS to align the image and the name):
2. In `Followers`, use require to import your `GithubUser` component.
150
+
2. In `Followers`, import your `GithubUser` component.
155
151
3. In the `render` method of `Followers`, use `map` to take the array at `this.state.followers`, and map it to an array of `<GithubUser />` elements, passing the `user` prop. The code of `Followers`' `render` method should look like this:
156
152
157
153
```javascript
158
-
functionrender() {
159
-
if (!this.state.followers) {
160
-
return<div>LOADINGFOLLOWERS...</div>
161
-
}
162
-
163
-
return (
164
-
<div className="followers-page">
165
-
<h2>Followers of {this.props.params.username}</h2>
166
-
<ul>
167
-
{this.state.followers.map(/* INSERT CODE HERE TO RETURN A NEW <GithubUser/> */)}
168
-
</ul>
169
-
</div>
170
-
);
154
+
if (!this.state.followers) {
155
+
return<div>LOADINGFOLLOWERS...</div>
171
156
}
157
+
158
+
return (
159
+
<div className="followers-page">
160
+
<h2>Followers of {this.props.params.username}</h2>
161
+
<ul>
162
+
{this.state.followers.map(/* INSERT CODE HERE TO RETURN A NEW <GithubUser/> */)}
163
+
</ul>
164
+
</div>
165
+
);
172
166
```
173
167
174
168
Having done this, you should have a full `Followers` component ready to go.
@@ -224,7 +218,7 @@ For this challenge, we're going to use the [`react-infinite`](https://github.com
224
218
225
219
Right now, if you look at a profile with a lot of followers, you'll notice that GitHub API only returns the first 25 followers. The API has a `per_page` query string parameter that you can set, but the maximum number of items per page is still 100. If someone has more than 100 followers, you'd have to do many requests to get all of them.
226
220
227
-
React Infinite will take care of most of the heavy lifting for us. First of all, it's never a good idea to have thousands of elements on the page if the user is only seeing a handful. React Infinite will be efficient in showing only the elements that are in the view. Second, React Infinite will detect the scroll position and can fire off a callback when the scrolling reaches the edge of your container.
221
+
React Infinite will take care of most of the heavy lifting for us. First of all, it's never a good idea to have thousands of elements on the page if the user is only seeing a handful. React Infinite will be efficient in showing only the elements that are in the viewport. Second, React Infinite will detect the scroll position and can fire off a callback when the scrolling reaches the edge of your container.
228
222
229
223
All you have to do is provide React Infinite with the callback function that will load your data, and pass your items to the `<Infinite>` component.
230
224
@@ -239,11 +233,13 @@ Let's do it step by step for **followers** and then you can reproduce it for the
239
233
Your `Followers` component currently loads its data on `componentDidMount`. It turns out that if you mount an `<Infinite>` component without any data, it will automatically call your callback function to fetch more data.
240
234
241
235
### Step 1.1: Adding new state data to `Followers`
242
-
In the `getInitialState` method of `Followers`, let's add a few more pieces of state. Let's add a `page` state and initialize it to `1`. Add another state called `loading` and set it to `false`. Finally, add a `followers` state and set it to an empty array.
236
+
In the `constructor` method of `Followers`, let's add a few more pieces of state. Let's add a `page` state and initialize it to `1`. Add another state called `loading` and set it to `false`. Finally, add a `followers` state and set it to an empty array.
243
237
244
238
### Step 1.2: Change the `componentDidMount` method name to `fetchData`. In your AJAX call, add two query string parameters to the GitHub API URL: `page` will come from your state, and `per_page` can be set to anything between 1 and 100. Set it to 50. Your URL should look like this:
0 commit comments