Full Stack Development with Django and React

Why Smarter. Django hosts each React app: a view and a template render a root element, React mounts on it, and calls back into Django’s REST API with the user’s session. It is a clear, complete example of a pattern that many real applications use, and students can follow a feature from database column to pixel.

Read. Django-React Integration, How the Web Console Hosts It, The Chat API Contract.

Exercises.

• Follow one list page from the Django URL, view and template, through the Vite build manifest, to the React component and the API it calls.

• Add a new list page for a resource, end to end, with Django and React tests.

• Study how the chat API contract is published as a JSON Schema from Pydantic models, and how the React side’s types are generated from it. Discuss what this prevents.

Course plans. Three complete, ready-to-teach plans, each with a schedule, graded assignments and rubrics, two capstone projects, recommended texts, further study and technical prerequisites. See Course Formats and Grading for what the formats have in common.

• Classroom bootcamp: 8 hours
• Two-week online course: 6 hours
• Four-week online course: 12 hours

See the Smarter Instructor Guide to install Smarter and set up a class.