Build with React

Lesson 1: UIs and APIs

November 2019

Amsul Naeem

twitter.com/amsul_

slides.com/amsul

Function Components vs Class Components

UIs and APIs

React UI Kits

Function Components vs Class Components

Same end goal, different API.

Functional programming model
Input props → Output element
Auto diffing to initialize behaviour
Methods for effect synchronization
Co-located logic

Object-oriented model
Input props → Object to compute outputs
Manual diffing to initialize behaviour
Methods for lifecycle of component
Co-located methods

function MyFunctionComponent {}

class MyClassComponent extends React.Component {}

DEMO

Exercise 1

Refactor a basic stopwatch app from a Class Component to a Function Component:

State
Lifecycle methods
Event handlers
Helper methods

Starting point:

github.com/George-Brown-College/2019-Full-Stack-React
Under the module-4/lesson-01 directory
Follow the README file
Use src/Exercise1.js

Function Components vs Class Components

20 minute break

Different Kits for different setups

React UI Kits

Vanilla JS (or plain JS)
React
Angular
Vue
Lots more that optimize for different things

Material UI

React UI Kits

Built with React from ground up.
- No messy markup to deal with.
- Able to utilize powers of React APIs.
Uses Material Design's design language.
Built-in SVG icon components.
Built-in CSS-in-JS solution.
Great documentation
- material-ui.com

DEMO

Exercise 2

Build a form with Material UI:

Text Field: First Name & Last Name
Dropdown: Choose quote from an API
- Show loading state
Dropdown: List of provinces from an API
- Show loading state
(Optional) Photo: Province flag using province code

Reference: material-ui.com

Starting point:

Continue from the same directory as the previous exercise
Within the src/index.js directory
- Comment out Exercise1 and comment in Exercise2

React UI Kits

End of Lesson

Lesson 1: UIs and APIs

November 2019

Amsul Naeem

twitter.com/amsul_

slides.com/amsul

Made with Slides.com