Today's Workshop
There is no pre-workshop this week! Just keep working on your website. Today's workshop will be a joint workshop with the Design workshop, so you'll be able to learn about web development from an alternative perspective.
Next week will be the project showcase, so make sure you have your project ready to go!
Wait, what's this?
This lesson was born out of a lack of time to cover all the topics I wanted to cover this quarter. So far, we've talked a lot about web development, but more specifically website development. We've talked about how to build a website, but we haven't talked about how to build a web application, or about building human-centered digital experiences. This is a topic that I'm very passionate about, and I think it's important to talk about, so I've decided to make this a bonus workshop.
It's at this point that we go one level down from Next.js to React and learn the fundamentals about how interactions and the user interface work within React, and what that enables us to do with Next.js. But it's also a point to look into design theory and how to build a human-centered digital experience.
đ° Note from Ritesh
A lot of my work (if not all of it) is in the realm of Human-Computer Interaction, to which the Joint Workshop and this Bonus is catered best by. I think these are important topics to cover that won't just make you a better developer, but a better advocate for users from all backgrounds. If we had more weeks, I'd love to cover more of these topics formally, but for now, I hope this is a good start.
If you find this stuff interesting, feel free to chat with me about it!
Below are links to resources from the React team and other individuals and groups that I believe are good resources to not only learn about developing interactions, but the fundamentals on why they work the way they do.
Describing the User Interface (UI)
- Thinking in React
- JavaScript in JSX with Curly Braces
- Passing Props to a Component
- Keeping Components Pure
- Understanding Your UI as a Tree
Adding Interactivity
- Responding to Events
- State: A Componentâs Memory
- Render and Commit
- State as a Snapshot
- Queueing a Series of State Updates
- Updating Objects in State
- Updating Arrays in State
State Management
- Reacting to Input with State
- Choosing the State Structure
- Sharing State between Components
- Preserving and Resetting State