🗓️ Today’s Topics

• How AJAX and APIs work
• The useEffect hook
• How to make AJAX calls from React using Axios

🎯 Project

This project is due next Monday. We’ll check in on progress at each class meeting between now and then.

React Trivia. Your goal today is to get a list of trivia categories showing on the page.

🔖 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

How to Think About Building Things in React

• Thinking in React
• Thinking in React 2020
• Thinking “declaratively” in React
• Props vs. State - blog post
• Using State vs Props in React - video

Conditional Rendering and Handling Events

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

👾 Code

• React Devs for Hire
• Video: use data from an AJAX request in state and in JSX
• CodePen flexbox example
• CodePen grid example

🗓️ Today’s Topics

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

🎯 Project

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. But if you finish step 5 and want to keep going, you can continue with the official tutorial.

You should complete the tutorial by tomorrow.

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

📖 Read | 📺 Watch | 🎧 Listen

• 🎧 Django Chat: Django REST Framework
• 📖 How HTTP works and why it’s important - Free Code Camp
• 📖 A Beginner’s Guide to REST
• 📖 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

• HTTP verbs/CRUD/SQL & REST URLs

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

• Overview: What is React?
• React Mental Model
• Using the State Hook
• Podcast: Advice for New Devs

🔖 Resources

• 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

🦉 Code and Notes

• React for JS
• React Devs for Hire

Videos for React Devs for Hire

• Make a component
• Render multiple components using an array of data, using .map()
• Use an array of objects as data
• Move data into a separate file and import it
• Conditionally render a component
• Hide/show a section of a component

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. It’s 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.

This rest of this section is material to prep for the topic we will begin next week: building APIs.

• 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 (the 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
• Django Recipes App