Class Notes for the Jobfair React Workshop
The goal of the workshop is to introduce students to the basic concepts of React by implementing features on a real app.
The live version of the app can be found here: Explore Comsysto Reply
Declarative
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.
Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Top-Down Data Flow (Unidirectional)
Data flows from parent to children components
Disclaimer
The Mental model for hooks is similar to the mental model for class component lifecycle only on the surface, and when considering more complex use cases the analogy starts to break down. But, this is a more advanced topic. (For the curious: https://iqkui.com/a-complete-guide-to-useeffect/)
JobFair Workshop App Wireframes
-
Break The UI Into A Component Hierarchy
-
Build A Static Version in React
-
Identify The Minimal (but complete) Representation Of UI State
-
Identify Where Your State Should Live
-
Add Inverse Data Flow