1 of 61

brief git clarification / review

Why do we keep doing

git reset --hard

and

git checkout wX-stepY

like… what do these commands even do again...

1

2 of 61

git reset --hard

resets the LOCAL version of your code (on your computer) to match the version that’s stored in the CLOUD (on github)

irreversibly deletes all local (tracked) changes

2

3 of 61

3

4 of 61

4

many minutes later...

man… i wish i could just restore the code to the original working version but I’d have to press “undo” like 10,000 times and vscode won’t even let me do that...

5 of 61

git reset --hard

5

6 of 61

6

7 of 61

git checkout wX-stepY

retrieves the branch “wX-stepY” from the cloud (github)

7

8 of 61

going through version history of a google doc and selecting a specific version to “restore”

→ it’s the same idea!

8

9 of 61

we want to “check out” a particular version of the code.

(in this case, it’s an individual step of our workshop.)

9

10 of 61

hope that clarifies things a bit!

if you have more questions about git / version control, feel free to come to OH :)

10

11 of 61

Workshop 3 - More React, using APIs, and Routing

Shannen Wu + Claire Cheng

11

12 of 61

Previously...

From Workshop 2

Profile page in React

Components
State and Props

From Lecture

What is an API?
HTTP requests
Asynchronous programming

12

13 of 61

Today!

Back to Catbook!

Getting more familiar with React
Interacting with an API from the frontend

GET
POST

13

API

content: "Hello world!"
creator_id: "5a590f0a57d115336c0a0079"
creator_name: "Aaron Sipser"
_id: "5a591353c26863287c2bd311"

GET

14 of 61

Getting started

Navigate to catbook-react repository
git reset --hard
git checkout w3-starter
npm install

14

15 of 61

Overview

Similar folder structure to last time
New file!

utilities.js

15

16 of 61

Recall: component hierarchy before

16

App

Navbar

Profile

CatHappiness

17 of 61

Component hierarchy after today!

17

Card

Comments

Block

SingleStory

Feed

NewStory

App

Navbar

Profile

Single

Comment

New

Comment

CatHappiness

NotFound

18 of 61

Goals for today

The Feed page

Ability to see other posts

GET

Ability to make your own post

POST

Frontend Routing

18

19 of 61

Let’s go!

npm run hotloader
In a browser, head to ‘localhost:5000’
Should look a lot like workshop 1

19

20 of 61

Starter!

20

21 of 61

Warmup

In App.js

1) Import Feed.js
2) Render Feed instead of Profile

21

22 of 61

Warmup

Questions?
Catch up

git reset --hard
git checkout w3-step1

22

23 of 61

Follow along: step 1

In Feed.js

Let’s get (GET) stories!

Follow along with me

Hold stories in state
Get stories in componentDidMount
Show stories in render

23

GET /api/stories

Returns all stories

Parameters: none

JSON.stringify(*list*) makes a list render-able

24 of 61

Follow along: step 1

Testing our GET

24

25 of 61

Follow along: step 1

Questions?
Catch up

git reset --hard
git checkout w3-step2

25

26 of 61

Your turn: step 2

In Feed.js

Import SingleStory.js
Render a SingleStory component, passing in dummy name and content

26

27 of 61

Your turn: step 2

In SingleStory.js

Let’s make our stories prettier!
Use JSX to render passed in props

CSS classes to use:

Card-story
u-bold
Card-storyContent

27

28 of 61

Your turn: step 2

Questions?
Catch up

git reset --hard
git checkout w3-step3

28

29 of 61

Follow along: step 3

In Feed.js

Putting our state and SingleStory together
Object array -> Component array?

29

30 of 61

Review: the map function

Recall: the map() method creates a new array by applying a function to every element of the starting array.

30

{ id: 1, name: Matt }
{ id: 2, name: Aaron }
{ id: 3, name: Jessica }
{ id: 4, name: Shannen }

Provided function

(e.g. put item.name in a div)

<div> Matt </div>
<div> Aaron </div>
<div> Jessica </div>
<div> Shannen </div>

React CAN’T render this!

React CAN render this!

31 of 61

Follow along: step 3

In Feed.js

Putting our state and SingleStory together
Object array -> Component array?

31

32 of 61

Follow along: step 3

In Feed.js

What to do if no stories?

32

33 of 61

Follow along: step 3

Questions?
Catch up

git reset --hard
git checkout w3-step4

33

34 of 61

That was GET, how about POST?

34

POST /api/story

Posts a new story

Parameters: content (string)

35 of 61

Follow along: step 4

In NewPostInput.js

Let’s make a component that can post (POST) stories

Follow along with me

The NewStory component
Using it in Feed

35

POST /api/story

Posts a new story

Parameters: content (string)

36 of 61

Follow along: step 4

36

37 of 61

Follow along: step 4

resuming at 3:05 PM ET

Questions?

Please ask! We’ll have you do something similar to steps 1-4 later!

Catch up

git reset --hard
git checkout w3-step5

37

38 of 61

resuming at 3:05 PM ET

38

39 of 61

Follow along: step 5

If you haven’t done this already…

git reset --hard
git checkout w3-step5

39

40 of 61

App navigation?

Determine content via routing!
Examples:

catbook.com
catbook.com/profile
catbook.com/asdf

40

Feed

App

Navbar

Profile

NotFound

Recall:

41 of 61

App navigation?

We will be using the Reach Router library
https://reach.tech/router

41

42 of 61

App navigation?

42

URL

(address bar)

Router (component)

Render A (component)

Render B (component)

Render C (component)

- or-

43 of 61

Follow along: step 5

In App.js

Using the Router component

In NavBar.js

Using the Link component

43

44 of 61

Follow along: step 5

44

45 of 61

Follow along: step 5

Questions?
Catch up

git reset --hard
git checkout w3-step6

45

46 of 61

Steps 6-8

Now that stories are complete, it’s time to work on comments.
Steps 6-8 are highly analogous to steps 1-4, but we’ll be working in Card.js instead of Feed.js
Reminder of high level overview:

GET to obtain stories
SingleComment component renders data

46

47 of 61

Steps 6-8

47

Previously:

GET /api/stories

Returns all stories

Parameters: none

POST /api/story

Posts a new story

Parameters: content

Now:

GET /api/comment

Returns all comments for a story

Parameters: parent (string)

POST /api/comment

Posts a new comment

Parameters: parent (string)

content

48 of 61

Follow along: Step 6

GET comments in Card.js
Render them like stories
Use <Card (props) /> in Feed.js

49 of 61

End of step 6

49

50 of 61

Your turn! Step 7

Implement SingleComment.js
Use <SingleComment (props) /> in Card.js (like how we used <Card /> in Feed.js)

50

51 of 61

Your turn! Step 8

Implement NewComment in NewPostInput.js
Use <NewComment (props) /> in Card.js

51

GET /api/comment

Returns all comments for a story

Parameters: parent (string)

POST /api/comment

Posts a new comment

Parameters: parent (string)

content

52 of 61

End of step 7

52

53 of 61

End of step 8

53

54 of 61

Your turn! Steps 6-8

Tips:

Refer to Feed.js, SingleStory.js, and NewStory.js

Styles provided!

Ask for help!

git reset --hard
git checkout w3-stepX

Your tasks:

Step 6:

GET comments in Card.js
Render them like stories
Use the Card in Feed.js

Step 7:

Implement SingleComment.js
Use SingleComment in Card.js

Step 8:

Implement NewComment in NewPostInput.js
Use NewComment in Card.js

54

55 of 61

Let’s get on the same page

Catch up:

git reset --hard
git checkout w3-step9

55

56 of 61

Follow along: step 9

Extracting out components?

Want to keep components small and modular

Let’s try and improve upon Card.js

56

57 of 61

End of step 9

57

58 of 61

Final touches: step 10

Catch up:

git reset --hard
git checkout w3-step10

What to do about needing to refresh?
Let’s use the power of React!
Follow along!

58

59 of 61

Your turn: step 10

Do the same for comments!
In Card.js

1) Define an addNewComment function
2) Pass as prop to CommentsBlock

In CommentsBlock.js

1) Pass addNewComment as prop to NewComment

In NewPostInput.js

1) Use .then to call AddNewComment after posting

59

60 of 61

The end!

If you weren’t able to finish live updating, complete it at home.
If you’d just like to see the solution:

git reset --hard
git checkout w3-complete

60

61 of 61

Homework: weblab.to/homework 3

61