🦊 React Components, JSX, Props, & State 🦊

🗓️ Today’s Topics

• What did you learn from the tutorial(s) you did? First impressions of React?
• Build a small React app together in class
• Components and JSX
• Handling data in React with props and state

🎯 Project: Freeshelf

Today, you’ll start on your first React app without a tutorial. This is due on Monday.

React Freeshelf

🧰 Please be sure to install the React Developer Tools for Chrome.

📖 Read | 📺 Watch | 🎧 Listen

• 📖 What is React? A Visual Introduction for Beginners
• 📖 React Mental Model: Working with Input
• 📖 Using the State Hook
• 🎧 Podcast: Advice for New Devs If you haven’t listened to this yet, don’t miss it.

🔖 Resources

React

• Conditional Rendering in React
• React Docs: Handling Events in React
• Handing Events in React with examples for functional components
• Supported Events in React
• MDN React Todo List Walk-through
• Just show me the code for the MDN Todo List
• Create-React-App Docs

CSS

We care about the look and feel of the UI, but that doesn’t automatically mean we have to write custom CSS. Sometimes (like now when you are just learning React!) it makes sense to rely on a library for most or all of your styling. There are a range of libraries from the very comprehensive to the very minimal. Here are some lighter-weight ones that you could check out:

• SmolCSS - minimal snippets You can just copy and paste these styles as needed. 😎
• Bulma
• Tachyons
• Materialize

🦉 Code and Notes

• JS for React
• Example React Devs