Workshop 2: Catbook in React

Akshaj Kadaveru

​

1

​

weblab.is/questions

weblab.is/q

​

How to write any website

2

<App />

1 line of code!

React Apps are "components of components"

​

The App component (<App />)

React Apps are "components of components"

​

<Navbar />

<Feed />

<Sidebar />

4

React Apps are "components of components"

<Post />

<Post />

<Post /> ...

<Storysection />

<Suggestions />

5

React Apps are "components of components"

<Postbody />

<Comment />

<Comment /> ...

6

Props ('Inputs')

Inputs passed from a parent to a child component

7

<Post name="Akshaj" text="Welcome to web lab!" />

These are all props! (the inputs)

here, props = {name: "Akshaj", text: "Welcome to web lab!"}

State

Updatable pieces of information maintained by a component.

​

​

const [status, setStatus] = useState("busy");

const [isOnline, setIsOnline] = useState(false);

​

​

8

Big Picture (of a random app)

9

Another component

state: currentName

​

A fifth component

App

A fourth component

A component

state: numberOfLikes

A sixth component

e.g. state: currentYear, typeOfCar

​

A seventh component

props (e.g. name='joe'

numCats=4)

props

(e.g. phoneType="iPhone")

Big Picture

10

Feed

Post

App

Sidebar

Navbar

Big Picture

11

Feed

Post

App

Sidebar

Navbar

Suggestions

StorySection

Big Picture

12

Feed

Post

App

Sidebar

Navbar

NavButtons

SearchBar

Big Picture

13

Feed

Post

App

Sidebar

Navbar

Big Picture

14

Feed

Post

App

Sidebar

Navbar

Big Picture

15

Feed

Post

App

Sidebar

Navbar

250

Big Picture

16

Feed

Post

App

Sidebar

Navbar

250

Big Picture

17

Feed

Post

App

Sidebar

Navbar

250

Recap

• A React component lets you break down a chunk of your UI into a reusable and independent piece of code.
• A component can be represented as a piece of HTML code, other React components, or both.
• It can receive and maintain its own information
• React uses a component tree structure to pass information
• Each component can take in props (inputs), and manages its owned contained state (private information)

18

Check out our recap guide at weblab.to/react-guide-1

​

​

weblab.is/profile

19

20

​

Let's make sure everyone has the right version of node

​

Type

node -v

​

you should get '16.3.1' or '16.x.y'

​

21

1. Open the catbook-react folder in VS Code

2. Open the terminal window in VS Code, make sure you are in the 'catbook-react' folder

​

3. Run the following commands:

​

git fetch

git reset --hard�git checkout w2-starter

npm install

​

​

First: the component tree for Catbook!

22

App

NavBar

CatHappiness

Profile

First: the component tree for Catbook!

23

App

NavBar

CatHappiness

Profile

First: the component tree for Catbook!

24

App

NavBar

CatHappiness

Profile

​

​

npm run hotloader

​

Navigate to localhost:5000 and see the page update with your live changes!

​

​

​

​

25

Let's look at the starter code

• We use 'className' instead of class
• We put the React component name in front of our class names
• why? so that we don't have the same class name in different components
• CSS always applies to the entire webpage, so must include className to make it specific
• for example if we set p {color: red} in one component it actually applies to all paragraphs on the whole webpage

26

Writing Components

27

Exercise 1: Implementing React Navbar

• You’ve implemented Navbar using Vanilla HTML- let’s do it with React!
• Implement return() in Navbar.js with HTML code
• Implement Navbar.css .. go wild! Try to make the NavBar look like the catbook navbar, but feel free to add your own twist!

<div className="style-name">

​

28

Exercise 1a: React Navbar CSS

29

Exercise 1b: React Navbar JS

​

// NavBar.js

30

Let's get on the same page

​

git reset --hard�git checkout w2-step1

31

*If it doesn't let you checkout and says 'Please commit your changes or stash them', then 'git stash' should do the trick and you should be able to checkout

Save or close out of all of your 'unsaved' files:

Adding CatHappiness

32

Which component should we store 'catHappiness' in?

33

App

NavBar

CatHappiness

Profile

Why Profile? We want to update 'catHappiness' when the cat is clicked

34

App

NavBar

CatHappiness

Profile

Clicking on the cat needs to update catHappiness, and the cat is in Profile!

35

Profile Component

State: catHappiness (int)

CatHappiness Component

Prop: catHappiness (int)

App

NavBar

How do we add state to a component?

​

​

​

​

​

36

How do we add state to a component?

​

​

​

​

​

• const [variableName, functionThatSetsThatVariable] = useState(defaultValueOfTheVariable)

​

... we use useState!!

​

37

Exercise 2a: Add the 'catHappiness' state variable to Profile

​

In profile.js.

Also don't forget to import useState (import React, { useState } from "react")

​

Use the React Guide (weblab.to/react-guide-1) if you're stuck!

38

Exercise 2a: Add the 'catHappiness' state to Profile

​

// Profile.js (also don't forget to import useState)

39

Exercise 2b: Import the CatHappiness Component

​

​

// Profile.js

40

Exercise 3a: Add the CatHappiness component

• Add in the CatHappiness component to Profile.js (in the TODO STEP 1 area), as well as a header in front of it to look like:

​

​

​

• Also, pass in catHappiness as a prop! Don’t forget, the syntax will look like:

​

​

41

42

Are we done?

43

Exercise 3b: Display the incoming CatHappiness Prop

​

44

// CatHappiness.js

Exercise 3b: Use the incoming the CatHappiness Prop

​

45

// CatHappiness.js

Let's get on the same page

git reset --hard�git checkout w2-step2

46

*If it doesn't let you checkout and says 'Please commit your changes or stash them', then 'git stash' should do the trick and you should be able to checkout

Save or close out of all of your 'unsaved' files:

Exercise 4: Update CatHappiness State

​

​

​

​

​

​

Now we need to change the CatHappiness when we click!

​

​

​

​

47

Exercise 4: Update CatHappiness State

​

​

​

​

​

​

• (Profile.js line 9) Implement the 'incrementCatHappiness' function
• (Profile.js line 15) Call the 'incrementCatHappiness' function whenever the profile picture is clicked

​

​

​

​

48

HINT: All divs have an 'onClick' prop that takes a function. Whenever a div is clicked, it runs its onClick function.

49

Works, just not the most readable. Also unnecessary since we aren't doing anything else inside this function.

Works and super clean code!! Recommended implementation!

Doesn't work since it will execute the function when the div element is created, not when it's clicked on.

Also pretty good

Let's get on the same page

git reset --hard�git checkout w2-complete

Navigate to localhost:5000 and change the cat happiness by clicking the profile picture!

50

Save or close out of all of your 'unsaved' files:

Recap: Writing Components

51

• We divide our app into c _ _ _ _ _ _ _ _ s, and put one in each file
• Each component is a function with p _ _ ps as the input, and returns HTML-like code
• Each component can store internal updatable private info as

's _ _ _ e' variables

​

• ( ) allows us to enter an HTML environment
• Inside the HTML environment, {} allows us to create a mini

j _ _ _ _ _ _ _ _ t environment

​

​

​

Recap: Writing Components

52

• We pass in props with <Post text="I love weblab" />
• We read in those props with props.text
• We declare state variables with

const [something, setSomething] = useState(initialValue)

• React uses className instead of class for css styles

​

​

weblab.is/react-guide-1

53