React Native Tutorial
React Native lets you build real, native mobile apps for Android and iOS using
JavaScript and React — the same component model, the same JSX syntax, and (for a
lot of your logic) genuinely shared code across platforms. Unlike Cordova's WebView, React Native
renders actual native UI components — a <View> becomes a real native view, a
<Text> becomes a real native text label — which is why React Native apps feel
native, not "web-in-an-app." This track is the most complete on this site for React Native: 28
lessons covering React fundamentals, the full component and styling system, navigation, state
management from simple to production-grade, real APIs, native device access, animations, and a
hands-on UI design you can study line by line.
Where this fits: If you already know JavaScript and some React (or you've been through the site's own Javascript/jQuery tracks), you're most of the way there — React Native adds native components and mobile-specific APIs on top of concepts you likely already know.
How React Native Actually Works
| Piece | What it does |
|---|
| JavaScript engine | Your app's JS/JSX code runs on a JavaScript engine (historically JavaScriptCore/Hermes) embedded in the app |
| The bridge / JSI | Communication layer connecting your JavaScript code to real native UI components and device APIs |
| Native components | A <View> or <Text> in your JSX maps to a REAL native Android/iOS UI component — not an HTML element |
| Fast Refresh | Code changes appear in your running app almost instantly while preserving component state — React Native's version of hot reload |
A Quick Look Ahead
Example: A Minimal Functional Component
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
export default function WelcomeCard({ name }) {
const [count, setCount] = useState(0);
return (
<View>
<Text>Welcome, {name}! You clicked {count} times.</Text>
<Button title="Click me" onPress={() => setCount(count + 1)} />
</View>
);
}
Note: This is correct, real React Native/JSX code — but this website's own project doesn't run a React Native build, so you won't see it actually execute on this page. Follow along by creating your own project after the next page's installation steps.
What You'll Learn In This Track
| Area | Covered in |
|---|
| Foundations | Modern JS/JSX essentials, React components & props, state & hooks, your first app |
| Building UI | Core components, StyleSheet, Flexbox layout, touches & gestures, lists |
| App structure | Navigation, forms, Context API, Redux & Zustand |
| Real-world work | Fetch/Axios, async/await & error handling, AsyncStorage, images & assets |
| Going native | Platform-specific code, native modules & device APIs, animations |
| Real UI design | A hands-on Login Screen design you can study line by line |
| Shipping it | Debugging, testing, building & releasing, performance |