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

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

Lesson 1: Building with React

By amsul

Made with Slides.com

Lesson 1: Building with React

  • 147

More from amsul