🗓️ Today’s topics

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

✅ To Do Before Class

• Continue working on Exercism. I’ll take requests for one to work through together in class.
• Need some JS review? Create a list of topics that you would like us to dig into some more and share in class.

• Read

  Watch

  Listen for today or anything from yesterday that you didn’t get to.

• Work on the React tutorial project(s) below.

🛠️ Setup

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

• Node & npm
• ESLint for VS Code
• React developer tools for Chrome

📖 Read | 📺 Watch | 🎧 Listen

• ⭐ 📖 React Quick Start (beta docs) These docs are still being written, so they are incomplete, but what is written is much more helpful than the older offical docs.
• 📖 React docs
• 📺 Kent C. Dodds, The Introduction to React You’ve Been Missing
• 🎧 Syntax.fm podcast: The React Episode
• An Absolute Beginner’s Guide to npm You can skim this – there is more here than you need.

🎯 Project: React Tutorial

Beginner’s Guide to React Tutorial. This is a really friendly total beginner tutorial that will show you the most modern way to build React apps.

This link will create an empty repo on GitHub that you can use to push your tutorial code to..

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

• The Beginner’s Guide to React - video-driven, intense and 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, but still pretty accessible

🔖 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 Essential. Please install it.
• Airbnb JavaScript Style Guide Remember we talked about following code standards? Here is one popular style guide.

👾 Code & Notes

• Replit transforming arrays with loops and map
• Phase 1 notes on Arrays - if you’re feeling rusty it would be great to type these examples out in a console or repl.it and run them yourself
• Most minimal React app ever

🗓️ Today’s Topics

• The woes of deployment and what to do about them
• Django managers, lookups, and querysets
• Using the Django shell to test out your models and make queries

🎯 Project: Continue Building Habit Tracker

Today your models should be done, so you can begin building out the urls, views, and templates you will need. Before you write the code, plan for what you will need. A good way to do this is to sketch out what your user will see.

There are examples for a lot of what you need to do in the Django Recipes codebase but you will have to adapt them to your Habit Tracker use cases.

🔖 Resources

• Postgres GUI: Postico

Models

• List of all Django Reference content related to Models
• Don’t forget! Django Best Practices: Custom User Model
• Django Docs: Saving Model Instances

Managers and QuerySets

• Django Model Managers
• Django Related Objects Reference
• Django QuerySets

Queries

You can think of queries as talking to the database. To support all our CRUD actions, we need to be able to create, read, update, and delete objects from the database. Django has a built-in library (the Django ORM) that lets us do all that.

• Django Queries: Retrieving Objects
• Django Queries: Field lookups
• Django Queries: Lookups that span relationships
• Django Queries: Lookups with Related objects

🌟 EXTRA/TMI

Links in this section are really more information than you need right now, but it’s relevant and interesting. Things included here are good to know but ok to save for later.

• What is SQL?
• SQL Basics: Learn X in Y minutes -> this is a helpful reference for SQL syntax when you run into it. You do not need to write SQL for Django because the Django ORM does it for you, and it does it well. The Django docs often illustrate queries made by the ORM using SQL syntax, however, and you will find it helpful in your job to know the basics.

🦉 Code & Notes

• Habit Tracker models diagram from class
• Example: Django Music App
• Deploying a Django App to Heroku
• Using Postgres Locally
• ⭐ Django Queries Cheat Sheet

⚠️ You only need to read this post if you are on the front end team 🦊

🗓️ Today’s topics

• Return to JavaScript!
• The modern JavaScript ecosystem
• ES6 features

📖 Read | 📺 Watch | 🎧 Listen

These are required readings, videos, and/or podcasts. Read, watch, or listen, and take notes.

• ⭐ 📖 Modern JavaScript Explained for Dinosaurs -> This is essential for context.
• 📖 State of JS 2021 Survey Results -> This is actually data collected in 2022. Skim for an overview of current trends in the JS ecosystem.
• 📺 ES6 tutorial for beginners
• 📺 Modern JavaScript for Django Developers
• 📖 Modern JavaScript for Django Developers - this is the blog post version of the above talk. Read the first two parts only:
  • Part 1: Organizing your Front-End Codebase in a Django Project
  • ⭐Part 2: A Crash Course in Modern JavaScript Tooling – this is a complement to the first article on this list.

🎯 To Do

1. Review the code in JavaScript You Need to Know for React. You’ll need to be able to read and use the JS in these notes to work with React effectively. It would be valuable practice to type out the examples and run them yourself.

2. Complete at least two exercises from this list on Exercism.io JavaScript Track. You’re encouraged to work together!

• Isogram
• Scrabble Score
• ETL
• Simple Cipher
• Hamming
• Gigasecond
• Grade School

Read the tests provided with each exercise by clicking on the Tests tab in the editor (or opening the test file if you are using the CLI). The tests will show you exactly how the function you’re supposed to write will be called and with what arguments.

💫 PRO TIPS: When you run the tests, only focus on ONE test at a time. Write code that will get that test – and ONLY that test – passing. Then, when you have one passing test, look at the next failing test. Again, just that one! Write code to pass this test. This may require you to rewrite the code you just wrote to pass the first test. That’s ok. Writing code like this is called Test-Driven Development (TDD) and it’s a useful skill to practice. One test at a time, try to keep previously tests passing, read the test results each time carefully, and be patient.

If you get through two, keep going! More practice is better.

Please come to our class meeting with either/both of the following:

• a solution you got working
• a question about something that blocked your progress

🔖 Resources

• MDN: A Re-Introduction to JS
• The Modern JavaScript Tutorial -> This is a solid and comprehensive reference with topics clearly labeled.
• Clean Code: JavaScript -> “Clean Code” is a concept popularized by a book of the same name by Robert C. Martin. It means code that is easy to understand and easy to change. This guide applies these concepts to show you how to write clear and maintainable JavaScript. This is something that you will pick up as you go along, so don’t worry about “following the rules.” The rules are subjective and open to interpretation (as this guide shows). But it’s good to know that standards for code exist and developers are commonly expected to conform to them.
• Make sure that Node and npm are installed on your computer -> You probably did this way back in the beginning but here’s a link to the set-up instructions in case you need it.

⚠️ You only need to read this post if you are on the back end team 🐻

🗓️ Today’s Topics

• Using PostgreSQL with Django
• Deploying Django applications to Heroku

🎯 Project: Habit Tracker

You’ll be working on Habit Tracker this week.

It’s important to read the project requirements thoroughly and to start to think about how you would do this project.

First steps: generate the project skeleton; make sure you are using Postgres; deploy to Heroku; and design your models. Make sure to create a diagram showing model fields and relationships. Talk through with each other how you are thinking about this.

By tomorrow:

• Your application should be deployed to Heroku.
• Your models should be functional – that means you can see and work with them at least in the admin (and ideally in the Django shell) and they do what they are supposed to do.
• You should be able to create habits and associated daily records in the Django shell (I recommend using shell_plus which is available when you have django-extensions installed).

📖 Read | 📺 Watch | 🎧 Listen

These are this week’s required readings, videos, and/or podcasts. Read, watch, or listen, and take notes.

Deployment

• 📺 Katie McLaughlin, What is Deployment, Anyway?
• 📖 Full Stack Python: Deployment
• 📖 Heroku Reference: Deploying Django Apps to Heroku
  • Walkthrough: Getting Started with Python/Django Apps on Heroku
• 🎧 Deploying and Running Django Web Apps in 2021

Databases & Data Modeling

• 📖 Full Stack Python: Databases
• 📖 Full Stack Python: ORMs
• 📖 What is a relational database?
• 📖 Class-Responsibility-Collaborator Model (CRC)
• 📺 Entity Relationship Diagrams (ERD), from Lucid Chart
• 📖 Writing Safe Database Migrations in Django

Debugging

• 📖 Python Debugging with Pdb
• 📺 Python Debugging with Pdb - Course on RealPython - only the first three videos are free but they are useful!
• 📺 Damilare Onajole, Debugging Python

🔖 Resources

Authentication, Registration, and the User Model in Django

• django-registration-redux
  • We are using the simple (one-step) backend
• Django docs: User Authentication
• Django docs: built-in User Model -> documentation for all the things you get for free with the User from Django
• Django docs: Extending the built-in User Model with AbstractUser
  • Django Best Practices: Custom User Model -> This tutorial is good to read for an overview, but you don’t need to follow the instructions to implement the forms to create or change a user, since we are using the django-registration-redux package for that.
• Django docs: Authentication in Web Requests -> django-registration-redux handles some of this for us (giving us the login and logout urls, for instance) but it’s helpful to see other ways you can use the authenticated user.
• The login_required decorator
• Limiting access to logged-in users that pass a test

Deployment & Other Useful Stuff

• Walkthrough: Starting a new Django Project
• 🚀 Deploying a Django app to Heroku
• Using Postgres Locally
• Django Docs: Deployment Checklist
• How to use django-extensions shell_plus

👾 Code

• Example Django Music