React Native Basics›Core· 25 min read

What is React Native?

Write one React codebase and get real Android and iOS apps — not a website squeezed into a box.

What you will learn

Say what React Native is in one line
Spot how it differs from web React
See why one codebase saves so much time

React, but for phones

You already know React for the web. React Native lets you build real mobile apps with that same React. You still write components, props, state and hooks — but instead of drawing a web page, React Native draws real native UI on Android and iOS.

The big win is one codebase, two platforms. The same JavaScript becomes a true Android app and a true iOS app. You reuse what you already know and ship to both app stores.

To feel why that matters: the old way meant writing your app twice — once in Kotlin/Java for Android, once in Swift for iPhone. Two teams, two languages, two copies of every screen, and every bug fixed twice. React Native lets you write it once and run it on both, the way one recipe can feed two tables.

How it differs from web React

There is no HTML and no CSS file. You swap the web tags you know for native building blocks:

Web React	React Native
`<div>`	`<View>` (a box / container)
`<p>` or `<span>`	`<Text>` (any text)
`<img>`	`<Image>`
`<button>`	`<Button>` or a touchable
CSS files	Style objects (`StyleSheet`)
Runs in a browser	Runs on a phone / emulator

Here is a tiny app so the shape feels familiar. It is just a React component:

A minimal React Native screen — a View wrapping a Text

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello from a real phone app!</Text>
    </View>
  );
}

Note: Output: On the phone you see the words: Hello from a real phone app! Notice there is no <div> or <p>. The View is a real native box and the Text is a real native label — not HTML.

Watch out: React Native is not a website wrapped in an app. Your <View> becomes a real native container and your <Text> becomes a real native text widget. There is no DOM and no HTML page underneath.

Tip: Almost everything you learned in React still applies: components, props, useState, useEffect, lists, conditional rendering. You are mostly learning new building blocks, not a new language.

Q. What does React Native render to?

Answer: React Native turns your components into real native widgets on both Android and iOS — not into HTML in a browser.

✍️ Practice

Write down three web React tags and the React Native component that replaces each.
In one sentence, explain "one codebase, two platforms" to a friend.

🏠 Homework

List two apps on your phone you would love to rebuild, and note why React Native (one codebase) would help.