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
Lesson 1: Building with React
- 80