Today’s Topics

• How AJAX and APIs work
• How to make AJAX calls from React using fetch() or Axios.

🎯 Project

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: making a POST request
  • Axios Request Config
  • Axios Response Schema
• Notes: JS for React
• React Official Docs: AJAX and APIs

How to Think About Building Things in React

• Thinking in React
• 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
• Example React Freeshelf

Today’s Topics

• Show 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 he takes more time to explain what is going on and uses the django admin interface instead of the shell to create objects in the database. 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 morning.

Some tips about the DRF Tutorial to keep in mind:

• Do not copy & paste the code. You’ll get a lot more out of it if you type it out yourself.
• Don’t use the Momentum Django Project Template for the tutorial. The custom user model in that template conflicts with what the tutorial has you do.

📖 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

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

🔖 Resources

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

🦉 Code & 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

🎯 Do

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

React Freeshelf

📖 Read | 📺 Watch | 🎧 Listen

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

🔖 Resources

• Conditional Rendering in React
• Handling Events in React
• Supported Events in React

👨‍💻 Code Examples

• MDN React Todo List Walk-through
• Just show me the code for the MDN Todo List
• React Devs For Hire

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 know in order to finish it?

📖 Read | 📺 Watch | 🎧 Listen

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
• Podcast: Advice for New Devs This is a front-end focused podcast but the advice is applicable to everyone.

🔖 Resources

• 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

⚛ Today’s topics

• Exercism review
• Intro to React
  • How does React work?
  • What does React code look like?

🛠️ Setup

Make sure you have the following set up in your local environment (docs listed below in Resources):

• Node & npm
• create-react-app
• ESLint for VS Code
• React developer tools for Chrome

📖 Read | 📺 Watch | 🎧 Listen

• React docs
• Kent C. Dodds, The Introduction to React You’ve Been Missing

🎯 Do

Beginner’s Guide to React Tutorial. This will show you the most modern way to build React apps. This project will be in Git, but you will use a repository you make.

If you finish this and want to keep going, try one of these other tutorials:

• The Beginner’s Guide to React - video-driven, very complete
• The official React tutorial - classic, official. Uses class-based components, which are a bit older, but still widely used
• Dave Ceddia’s React tutorial - very long, very comprehensive

🔖 Resources

• Create React App Docs
• ESLint Plug-in for VS Code
• ESLint Docs: Getting Started You probably don’t need to get too deep into this right now, but if you want to know more about configuring ESLint, this is the place to go.
• How to Lint and Format Code with ESLint in VS Code This tutorial walks you through using ESLint in a more comprehensive way.
• React Dev Tools Extension Chrome