Lesson 1 of 16
What React Native is
React Native lets you build real, native mobile apps for iOS and Android using JavaScript and React — the same React you may know from the web. Instead of rendering to a browser's DOM, it renders to actual native UI components. Understanding what React Native is — and isn't — sets you up to use it well. Let's understand the tool. Let's see what React Native really is.
What React Native is
REACT NATIVE = build NATIVE mobile apps (iOS + Android) with JavaScript + React.
THE KEY IDEA:
- You write React (components, JSX, props, state, hooks) — but instead of
rendering to HTML/DOM (like React on the web), it renders to REAL NATIVE UI
components (actual iOS + Android views).
- So your <View> becomes a native container, <Text> a native text view, etc.
The result is a genuine native app — not a website in a wrapper.
WHY IT'S POPULAR:
- ONE CODEBASE for iOS + Android (cross-platform — write once, run on both).
- Uses JAVASCRIPT/TypeScript + REACT -> web/React developers can build mobile
apps with skills they already have. (Huge on-ramp.)
- REAL NATIVE performance + feel (native components, not a webview).
- Made by Meta; used by major apps (Instagram, Discord, Shopify, and many more);
huge ecosystem + community.
- Hot reload / fast refresh -> fast iteration.
WHAT IT IS NOT:
- NOT a webview/hybrid app (it's not HTML in a shell — it renders native UI).
- NOT "write once, PERFECT on both" — you still handle some platform
differences, and very demanding apps may need native code/modules.
- NOT React-for-the-web — no HTML tags (<div>, <p>); you use RN's native
components (<View>, <Text>) instead.
React Native lets you build native mobile apps (iOS + Android) with JavaScript and React. The key idea: you write React (components, JSX, props, state, hooks) — but instead of rendering to HTML/DOM (like React on the web), it renders to real native UI components (actual iOS and Android views), so your View becomes a native container, Text a native text view, etc. The result is a genuine native app — not a website in a wrapper. It's popular because: one codebase for iOS + Android (write once, run on both), it uses JavaScript/TypeScript + React (so web/React developers can build mobile apps with skills they already have — a huge on-ramp), it has real native performance and feel (native components, not a webview), it's made by Meta and used by major apps (Instagram, Discord, Shopify) with a huge ecosystem, and it has hot reload/fast refresh for fast iteration. What it is not: not a webview/hybrid app (not HTML in a shell — it renders native UI), not "write once, perfect on both" (you still handle some platform differences, and demanding apps may need native code), and not React-for-the-web (no HTML tags like div/p — you use RN's native components like View/Text).
How a React Native app looks
A MINIMAL REACT NATIVE COMPONENT (looks like React, but native components):
import { View, Text } from 'react-native';
export default function App() {
return (
<View>
<Text>Hello, React Native!</Text>
</View>
);
}
NOTICE:
- It's a React component (a function returning JSX).
- Instead of <div>, you use <View> (a native container). Instead of a paragraph,
<Text> (all text MUST go inside a <Text> component in RN).
- You import components from 'react-native'.
THE MENTAL MODEL:
- If you know React: it's the SAME model (components, props, state, hooks, the
render-from-state idea) with NATIVE primitives instead of HTML elements. Most
of your React knowledge TRANSFERS (a whole lesson on this).
- If you don't know React yet: learn React basics (components, JSX, props, state)
first — RN builds directly on them.
WHAT YOU'LL LEARN IN THIS COURSE:
- The CORE COMPONENTS (View, Text, Image, etc.), styling (StyleSheet + Flexbox),
state (useState), touches + input, lists (FlatList), fetching data, local
storage, navigation, assets, real-device testing, and building/publishing —
all in React Native, using Expo (the easy way to start, next lesson).
A minimal React Native component looks like React but uses native components: import View and Text from 'react-native', and return JSX — but instead of div you use View (a native container), and instead of a paragraph you use Text (all text must go inside a Text component in RN). The mental model: if you know React, it's the same model (components, props, state, hooks, render-from-state) with native primitives instead of HTML elements — most of your React knowledge transfers (a whole lesson on this); if you don't know React yet, learn React basics first (components, JSX, props, state), because RN builds directly on them. In this course you'll learn the core components (View, Text, Image), styling (StyleSheet + Flexbox), state (useState), touches + input, lists (FlatList), fetching data, local storage, navigation, assets, real-device testing, and building/publishing — all in React Native, using Expo (the easy way to start, next lesson).
The mistake beginners make
The confusion mistake is thinking React Native renders HTML / is React-for-the-web — trying to use div, p, or CSS classes (which don't exist in RN), when RN uses native components (View, Text) and StyleSheet objects. Learn RN's native primitives — it's React, but not the web DOM. The second mistake is thinking it's a webview/hybrid (or 'just a website') — assuming React Native wraps a web page, when it renders real native UI (native performance and feel). Understand it's a genuine native app. The third mistake is trying React Native without knowing React — jumping into RN without understanding React's fundamentals (components, JSX, props, state, hooks), which RN builds on, so everything feels confusing. Learn React first (or alongside) — RN is React with native components. And expecting 'write once, perfect everywhere' (you still handle some platform differences). Understand RN renders native components (not HTML/webview), learn React first (RN builds on it), and expect to handle some platform differences.
Your turn
Your turn
- Understand the core idea: React Native lets you build real NATIVE iOS + Android apps with JavaScript + React, rendering to actual native UI components (not HTML/DOM, not a webview).
- See the native primitives: note that instead of you use
, instead of a paragraph you use (and all text must go inside a ), imported from 'react-native'. - Check your React knowledge: recognise that RN is the SAME React model (components, JSX, props, state, hooks) with native primitives — if you don't know React yet, learn its basics first, because RN builds on them.
- Correct the misconceptions: RN is NOT React-for-the-web (no HTML tags/CSS classes), NOT a webview/hybrid (it renders native UI), and NOT 'write once, perfect on both' (you handle some platform differences).
- Preview the journey: note what you'll learn — core components, StyleSheet + Flexbox styling, useState, touches/input, FlatList, fetching, AsyncStorage, navigation, assets, real-device testing, and building/publishing — using Expo (next lesson).
Key points
- React Native builds real NATIVE iOS + Android apps with JavaScript + React — you write React (components/JSX/props/state/hooks) but it renders to actual native UI components (a
becomes a native container, a native text view), not HTML/DOM. - It's popular for: one codebase for both platforms, using JS/React (web/React developers can build mobile with existing skills), real native performance/feel (not a webview), Meta-made + used by major apps + a huge ecosystem, and hot reload.
- It is NOT a webview/hybrid (it renders native UI), NOT React-for-the-web (no /
/CSS classes — use
/ /StyleSheet), and NOT 'write once, perfect on both' (you handle some platform differences; demanding apps may need native modules). - The mental model: if you know React, it's the same model with native primitives (most knowledge transfers); if not, learn React basics (components/JSX/props/state) first — RN builds on them; all text must go inside a
component. - The mistakes: thinking RN renders HTML/is React-for-the-web (use native components + StyleSheet), thinking it's a webview/'just a website' (it's genuinely native), trying RN without knowing React (learn React first), and expecting 'write once, perfect everywhere'.
- The mental model: if you know React, it's the same model with native primitives (most knowledge transfers); if not, learn React basics (components/JSX/props/state) first — RN builds on them; all text must go inside a
Q&A · 0
Enrol to ask questions and join the discussion.
No questions yet — be the first to ask.