Contract Class
• Start Date
• Name
• Contact
Person Class
• First Name
• Last Name
• Full Name
“App”
• List of Contracts
• List of Active
Contracts
• Contracts by
Contact
Slide 19
Slide 19 text
React
Slide 20
Slide 20 text
Components
Slide 21
Slide 21 text
Atomic Design
“…is methodology for creating
design systems. There are five
distinct levels in atomic design”
- Brad Frost
Slide 22
Slide 22 text
http://bradfrost.com/blog/post/atomic-web-design/
Slide 23
Slide 23 text
State
Machines
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Virtual DOM
Slide 27
Slide 27 text
JSX
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Props
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
LAB
Slide 37
Slide 37 text
But First…
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
• Use objects from lab 1
• Display a list of contracts
• Show the contact
• Show Start Date
“GraphQL is a query language for
APIs and a runtime for fulfilling
those queries with your existing
data … gives clients the power to
ask for exactly what they need and
nothing more...”