← 2.12.3 →
1095 words Slides

2.2 Making Code Changes

Course: Claude Code - Essentials Section: Core Workflows Video Length: 2-5 minutes Presenter: Daniel Treasure

Opening Hook

Now that you know your codebase inside and out, it's time to make changes. Claude Code doesn't just read code—it edits files, creates new ones, and refactors existing code. But first, it asks for your approval. In this video, we'll show how the approval flow works, and how Claude proposes changes so you stay in control.

Key Talking Points

  1. Claude Proposes Before Changing
  2. When you ask Claude to edit a file, it shows you the diff first
  3. You see exactly what's changing, line by line
  4. No changes are made until you approve

  5. Show on screen: Ask for a code change and see the approval prompt appear

  6. The Diff View Tells the Story

  7. Green lines are additions; red lines are removals (or your terminal equivalent)
  8. It's easy to spot if Claude understood your request correctly
  9. You can approve once, for the session, or deny and ask for revisions

  10. Show: A simple edit with visible diffs. Highlight what changed and why

  11. File Edits vs. New Files

  12. Edit: Claude changes existing code—most common
  13. Create: Claude writes a brand new file when needed (e.g., a new component, utility module)
  14. Both require approval; new files show a full preview

  15. Show: One edit (maybe fixing a bug) and one new file (e.g., a helper function)

  16. Refactoring with Confidence

  17. Ask Claude to improve structure without changing behavior: "Refactor this module to use async/await"
  18. Claude understands intent and preserves functionality
  19. The diff preview lets you verify before accepting

  20. Show: A refactor example where the logic stays the same but code is cleaner

  21. Editing Multiple Files in One Request

  22. Claude can edit 2-3 files at once if changes are related
  23. Shows diffs for each file in sequence
  24. Approve them together or individually (depending on permission mode)
  25. Show: A request that touches 2 files (e.g., "add a new endpoint and update the router")

Demo Plan

Demo Project: Continue with the same project from 2.1 (so context carries over)

Setup: - Resume the session from 2.1, or start fresh with the same project - Have terminal and Claude Code session open - Confirm you understand the codebase from 2.1

On-Camera Sequence (2-3 minutes):

  1. Simple Edit (Permission Approval) Fix the typo in the welcome message in main.js (Prepare a typo in a visible file beforehand, or ask Claude to add a comment with a typo)
  2. Claude proposes the change with diff
  3. Show the approval prompt
  4. Accept it and show the file is updated
  5. Highlight the "until session end" vs. "once" vs. "deny" options

  6. ~45 seconds

  7. Creating a New File Create a utility module for date formatting in src/utils/dateFormatter.js

  8. Claude writes the file and shows a preview
  9. Explain that new files also need approval
  10. Accept and confirm the file appears in the project

  11. ~30 seconds

  12. Refactoring Request Refactor the authentication logic to use async/await instead of promises (Use an existing file with promise-based async code)

  13. Show Claude understands the intent
  14. Diffs show the structural changes
  15. Point out: same behavior, cleaner code
  16. Accept and verify the logic is preserved

  17. ~30 seconds

  18. (Optional) Multi-File Change Add a new /users endpoint. Update the router file and create a new controller file.

  19. Show Claude handling 2 files
  20. Multiple diffs appear in sequence
  21. Option to approve both at once or review separately
  22. ~20 seconds

Code Examples & Commands

Asking for edits:

Fix the bug on line 42 of auth.js
Refactor this function to use async/await
Add input validation to the login form
Improve the comments in database.ts
Change the color scheme from blue to green

Asking for new files:

Create a new utility function for parsing JSON
Generate a test file for the Calculator class
Write a middleware for logging requests

During approval prompt: - Type y or yes to approve once - Type s or session to approve for the entire session (skip future prompts for edits) - Type n or no to reject the change - Type e or edit to request revisions (end edit mode, ask for changes)

Gotchas & Tips

  1. Approval Modes Matter – In later videos, we'll show how to set "acceptEdits" mode to auto-approve. For now, approval is per-change.

  2. Diffs Can Be Large – For big refactors, the diff might scroll off-screen. You can press spacebar to see more, or zoom out the terminal.

  3. Claude Respects Existing Style – If you have a specific code style (indentation, naming, etc.), mention it once and Claude remembers. Future edits use that style.

  4. You Can Always Revert – If you approve a change and regret it, just ask Claude to undo it or use git to revert (we cover that in 2.3).

  5. Edits Are Instant – Once approved, Claude writes the file immediately. You see changes in your editor or IDE in real time.

  6. New Files Don't Auto-Appear in Some IDEs – If you're using VS Code, it may not refresh immediately. You can refresh the file explorer or close/reopen the project.

Lead-out

You now know how to read code and make changes. But how do you track those changes? That's where Git comes in. In the next video, we'll show how Claude helps you create commits, switch branches, and manage your version control workflow.

Reference Material

  • Common Workflows - Making Code Changes: https://code.claude.com/docs/en/common-workflows
  • Quickstart - Make Your First Code Change: https://code.claude.com/docs/en/quickstart
  • Edit Tool Documentation: https://code.claude.com/docs/en/cli-reference
  • Permissions System: https://code.claude.com/docs/en/permissions

Relevant Articles & Posts

  • Best Practices: Lukasz Fryc's "15 Tips from Running 6 Projects" (DEV Community) – covers code quality and verification
  • Workflows: Joe Njenga's "17 Best Claude Code Workflows" (Medium) – includes refactoring patterns
  • Official Guide: Best Practices - Claude Code Docs (https://code.claude.com/docs/en/best-practices)

Additional Notes

  • Emphasize user control—Claude proposes, you approve
  • Show diffs clearly; pause so viewers can read what changed
  • Use a relatable example (fixing a typo, adding a comment) so first-time users aren't intimidated
  • Mention that next videos (2.3 onward) build on this workflow
  • If time, mention: CLAUDE.md files (coming in Section 3) let you set code style preferences for Claude