🗓️ Today’s Topics

• More about using state in React
• Conditional rendering
• How to make AJAX calls in React using Axios
• The useEffect hook

🎯 Project: React Slideshow

This project is due by class time tomorrow.

React Slideshow

📖 Read | 📺 Watch | 🎧 Listen

How to Think About Building Things in React

• 📺 Understanding what it means to be declarative instead of imperative - video
• 📖 Thinking in React
• 📖 Thinking in React 2020
• 📖 Thinking “declaratively” in React

Props and State

• 📖 Props vs. State - blog post
• 📺 Using State vs Props in React - video

🔖 Resources

AJAX in React

• Axios on GitHub
  • Axios docs: Getting Started
  • Axios: making a POST request
  • Axios Request Config
  • Axios Response Schema
• Notes: JS for React
• React Official Docs: AJAX and APIs

useEffect()

• Official React docs
• Ryan Florence tweet summarizing useEffect
• Dave Ceddia: How useEffect Works, with Examples

Conditional Rendering and Handling Events

• 4 Techniques for Conditional Rendering in React
• Handling Events in React

👾 Code

• Example React Devs for Hire
• CodePen flexbox example
• CodePen grid example
• Example React Freeshelf

🗓️ Today’s Topics

• Show your finished Habit Tracker
• HTTP requests and responses
• REST APIs
• Django REST Framework (DRF)

🎯 Project: DRF Tutorial

Complete the official Django REST Framework tutorial. You may find it easier going if you follow the guide by Will Vincent.

Will Vincent uses the exact same code and steps but is much more beginner-friendly. He also uses pipenv for the virtual environment like we do. Will’s tutorial stops short of the last step, step 6, in the official tutorial. If you finish step 5 and want to keep going, you can continue with the official tutorial, but this is not required.

You should complete the tutorial by tomorrow. This assignment link generates an empty repo that you can use to push your completed tutorial to.

⛔ Do not copy & paste the code. You’ll get a lot more out of the tutorial if you type it out yourself.

📖 Read | 📺 Watch | 🎧 Listen

• 🎧 Django Chat: Django REST Framework
• 📖 Web Applications 101
• 📖 How HTTP works and why it’s important - Free Code Camp
• 📖 A Beginner’s Guide to REST
• 📖 REST APIs: How They Work and What You Need to Know
• 📖 Django REST Framework: An Introduction - RealPython

ICYMI 👀

These links were posted last week, but you may not have gotten to them.

• 📖 RESTful APIs – read up through the “Standard Methods” subsection of the section on “Methods”. You can read more if you want to but it gets pretty deep.
• 📺 Safia Abdullah, You and Me Learn All About HTTP
• Web APIs Explained By Selling Goods From Your Farm

🔖 Resources

• Django REST Framework Documentation
• An overview of HTTP - MDN
• HTTP Messages - MDN

👾 Notes

• REST APIs 101

🗓️ 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

Today’s Topics

• Interacting with models in the shell
• Queries and more queries

🎯 Project: Still Working on Habit Tracker

Habit Tracker is due on Monday. You can do this! 💪 What do you need to figure out in order to finish it?

📖 Read | 📺 Watch | 🎧 Listen

• Database Design for Beginners This is a talk from RailsConf, which is focused on Ruby on Rails (Rails is a framework for building web applications in Ruby, very similiar to Django). The talk is an excellent introduction to how to think about your data model – that is, the logic that drives the decisions you make about the models in your code and the structure of your database. Please watch it all the way through; even though it uses Ruby examples you should be able to get the gist.

Building APIs

This is prep material for the topic we will begin next week.

• RESTful APIs Read up through the “Standard Methods” subsection of the section on “Methods”. You can read more if you want to but it gets pretty deep.
• Safia Abdullah, You and Me Learn All About HTTP
• Web APIs Explained By Selling Goods From Your Farm

🔖 Resources

Using the shell (Django’s interactive REPL, not pipenv shell)

• Official Django docs on using the shell
• Django extensions: shell_plus

🦄 PRO TIPS

• django-debug-toolbar has a SQL panel that will show you the queries you are running in the view.
• With shell_plus, you can see output of all the SQL queries if you run it like this:

python manage.py shell_plus --print-sql

Lookups

• Pretty Printed Video: How Model Queries Work in Django
• Pretty Printed Video: Querying One-to-Many Relationships in Django
• Django QuerySets
• Django Model Managers
• Django Queries: Retrieving Objects
• Field lookups
• Lookups that span relationships
• Lookups with Related objects
• Django Related Objects Reference
• Complex lookups with Q
• F objects

Constraints

• Django Docs: model constraints -> this gives you the general format/syntax
• Django Docs: UniqueConstraint

Aggregate & Annotate

• PrettyPrinted Video: Basics of Django Aggregations
• Pretty Printed Video: How to Use Annotate in Django
• Django docs:Aggregate & Annotate
• Django docs: Combining Aggregations with other QuerySets
• Aggregation Functions (e.g., Avg, Count, Min, Max)

🦉 Code & Notes

• Django Model Queries CheatSheet
• Example Django Recipes