Level 1 · Complete beginner · 10 min
How Mobile Apps Differ From the Web
Mobile apps run natively on a phone instead of inside a browser tab, which changes how they look, feel, and get built.
What you will learn
- Explain the difference between a website, a mobile web page, and a native app
- Describe what React Native does and why it exists
- Recognize the constraints unique to mobile (screen size, touch, offline, app stores)
The idea
A website runs inside a browser. A native mobile app runs directly on the phone's operating system (iOS or Android), with access to the camera, GPS, push notifications, and the phone's own navigation gestures. React Native lets you write your app once in JavaScript and React, and it compiles down to real native screens on both iOS and Android — not a website wrapped in a browser.
Why does this matter?
Companies build native apps (not just websites) because phones expect app-like behavior: swipe gestures, offline support, push notifications, and icons on the home screen. Users judge a shopping app very differently than a shopping website, even if the underlying data is the same. Knowing these differences shapes every technical decision you will make in this course.
A real-world analogy
Think of a website as a food truck that parks in a browser's parking lot — it borrows the browser's tools (address bar, back button, tabs). A native app is more like a restaurant with its own building: it owns the whole space, decides its own layout, and can do things a food truck cannot, like storing food overnight (offline data) or having a dedicated delivery bike (push notifications).
See it in code
// React (web) — renders HTML
function Greeting() {
return <div className="box"><p>Hello, web!</p></div>;
}
// React Native — renders native views, no HTML at all
function Greeting() {
return (
<View style={{ padding: 16 }}>
<Text>Hello, mobile!</Text>
</View>
);
}Line by line
<div className="box">On the web, `div` becomes a real HTML element the browser understands.
<View style={{ padding: 16 }}>On mobile, `View` is a React Native component that becomes a native container — there is no HTML or CSS engine underneath.
<Text>Hello, mobile!</Text>Even plain text must be wrapped in a `Text` component — mobile has no bare text nodes like the browser does.
What do you think happens?
Why can't you use a plain <p> tag in React Native?
Have a guess before you read on. Guessing wrong is part of learning it.
Try it yourself
Imagine you are rewriting a recipe website as a mobile app. List three things the mobile version needs that the website did not (for example: works without internet, has a home-screen icon, uses swipe gestures).
Worth knowing
Common mistake: assuming CSS class names, media queries, or <div>/<span> will work in React Native. They will not — styling and layout use a JavaScript object system (closer to CSS but stricter), which the next lesson covers.
The proper words for it
- Native app
- An app installed on a phone that runs directly on the OS, not inside a browser.
- React Native
- A framework that lets you write native iOS and Android apps using JavaScript and React.
- Cross-platform
- Writing one codebase that works on multiple platforms (iOS and Android) instead of two separate native codebases.
Where you'll meet this
Apps like Instagram, Shopify, and Discord use React Native for large parts of their mobile apps, sharing code between iOS and Android teams instead of maintaining two completely separate native codebases.
Lesson recap
- Native apps run on the OS directly, not in a browser
- React Native maps JSX to real native views (View, Text, etc.), not HTML
- Mobile apps have different constraints: touch, offline, app stores, home screens
Still fuzzy on any of this?
That's normal, and it's not a dead end. Pick a different way to hear it.
Quick check
1. What does React Native ultimately render on a phone?
2. Which of these is a constraint unique to mobile that a typical website does not need to handle?
3. True or false: You can use <div> and CSS class names directly in React Native.