How to Build Your First App with Claude Code (Complete Beginner Guide) | Code with Beto

Learn how to build your first mobile app using Claude Code, a terminal-based AI coding assistant that interacts with Anthropic models. It is designed for complete beginners with no coding experience who want to create mobile apps or websites by running commands and collaborating with AI in VS Code.

You'll learn how to install Claude Code, set up your environment with Node.js and Expo, and create a simple React Native app. I also explain why using a terminal and VS Code with Claude Code is a powerful way to live code apps, and how to preview your app on a phone using Expo Go.

What's inside

Why live coding with Claude Code is different and powerful
Installing Claude Code and verifying the setup
Using VS Code as the recommended environment for Claude Code
Types of apps you can build: websites with React and mobile apps with React Native
Installing Node.js to run JavaScript apps
Creating a new Expo React Native app with Claude Code
Previewing your app on your phone using Expo Go
Managing your project files and running commands inside VS Code

Why live coding with Claude Code is different and powerful

Most people use ChatGPT by copying and pasting code they don't understand, which often leads to frustration. Claude Code offers a better live coding experience by running directly in your terminal, allowing AI to execute commands, create files, and control your computer.

Using a terminal interface gives Claude Code full power to interact with your system, unlike desktop apps that limit this. This means you can build mobile apps and websites from zero code by running commands and collaborating with AI in real time.

Installing Claude Code and verifying the setup

To get started, copy the installation command from the official Claude Code website and paste it into your terminal. This sets up Claude Code on your computer. After installation, run to check the version and confirm it installed correctly.

This simple setup process gets you ready to start live coding with Claude Code immediately, without complex configuration.

Using VS Code as the recommended environment for Claude Code

While you can use your system terminal, VS Code is highly recommended because it provides a rich interface with file browsing, terminals, and extensions. Install the Claude Code extension inside VS Code to integrate AI coding features directly.

VS Code is free, open source, and available for Mac and Windows. It also supports AI agents and lets you see the files and changes Claude Code makes, which is crucial for beginners to understand their project structure.

Types of apps you can build: websites with React and mobile apps with React Native

Claude Code supports building any app, but the most common are websites and mobile apps. For websites, React is the recommended framework, and using Vite as a build tool simplifies setup.

For mobile apps, Expo combined with React Native is the suggested stack. React Native lets you build fully native iOS and Android apps from a single codebase. Expo provides a managed workflow and templates to get started quickly.

Installing Node.js to run JavaScript apps

Node.js is essential because it allows your computer to run JavaScript, the language behind React and React Native. Download the macOS or Windows installer from the Node.js website, run it, and verify installation by running in your terminal.

Without Node.js, commands to create and run React or React Native apps will not work.

Creating a new Expo React Native app with Claude Code

Inside VS Code, open a new folder for your project. Use the terminal to run to generate a new Expo app in the current folder. This clones an open-source template from Expo, giving you a ready-to-start React Native project.

You can see all the generated files in VS Code, which helps you understand the project structure. Claude Code can assist by running commands and editing code directly in this environment.

Previewing your app on your phone using Expo Go

To test your app live, download the Expo Go app from the App Store or Play Store. Expo Go acts as a sandbox to run your React Native app on your phone without building a full native binary.

After starting your Expo app in VS Code's terminal, scan the QR code with Expo Go on your phone to see your app running instantly. This makes development fast and interactive.

Managing your project files and running commands inside VS Code

VS Code lets you open terminals inside your project folder, view and edit files, and install extensions like Claude Code. This setup is ideal for live coding because you can see AI-generated changes, run commands, and test your app all in one place.

This workflow is much more transparent and beginner-friendly than using a raw terminal or desktop UI alone.

Resources

CourseReact Native course

Learn React Native fundamentals and ship real apps with lifetime access.

Premium resourcePro Membership

Access exclusive tutorials, live coding sessions, and personalized help.

Let's connect!