React vs React Native

Real-world analogy

What is it?

React Native lets you build native mobile apps (iOS + Android) using React and JavaScript. Unlike hybrid apps (like Cordova), React Native renders REAL native UI components — so your app feels native because it IS native.

Real-world relevance

Facebook, Instagram, Discord, Shopify, and Pinterest all use React Native. Many teams share 60-80% of code between web (React) and mobile (React Native).

Key points

• Same Language — Both use JavaScript/TypeScript and React concepts (components, hooks, state). If you know React, learning React Native is just learning new component names!
• Different Output — React renders HTML elements (div, span, p). React Native renders native mobile components (View, Text, TouchableOpacity). Web = browser. Mobile = iOS/Android.
• Code Sharing — Business logic, API calls, state management — all can be shared between web (React) and mobile (React Native)! Only UI differs.
• Expo for Easy Setup — Expo is to React Native what create-react-app is to React. Instant setup, hot reload, testing on your phone instantly. No Android Studio!
• Styling Differences — React uses CSS. React Native uses StyleSheet (like inline styles). No CSS here — just JavaScript objects. Learn once, apply everywhere!
• Navigation Different — React Router for web. React Navigation for mobile. Different APIs but same concepts (stacks, tabs, drawers).
• Performance Considerations — React Native apps can be slower than native (written in Swift/Kotlin) but much faster to develop. Trade-off between speed and time-to-market!
• Third-Party Libraries — Some npm packages work on web only. Check compatibility! React Navigation, Expo libraries work cross-platform. Native modules need bridges!

Code example

// React (Web) 🌐
function Welcome() {
  return (
    <div className="container">
      <h1>Hello Web!</h1>
      <p>Click the button</p>
      <button onClick={handleClick}>
        Press Me
      </button>
    </div>
  );
}

// React Native (Mobile) 📱
// Same logic, different building blocks!
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

function Welcome() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello Mobile!</Text>
      <Text>Tap the button</Text>
      <TouchableOpacity onPress={handlePress}>
        <Text>Press Me</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

// The translation table 📋
// Web              →  Mobile
// div              →  View
// p, span, h1      →  Text
// button           →  TouchableOpacity
// img              →  Image
// input            →  TextInput
// onClick          →  onPress
// className        →  style prop
// CSS              →  StyleSheet

// Shared code between React & React Native ✨
// In services/api.ts
export async function getUsers(): Promise<User[]> {
  const response = await fetch('/api/users');
  return response.json();
}

// In Web component
import { getUsers } from '../services/api';
function UserList() {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    getUsers().then(setUsers);
  }, []);

  return (
    <div>
      {users.map(u => <div key={u.id}>{u.name}</div>)}
    </div>
  );
}

// In Mobile component — SAME logic!
import { getUsers } from '../services/api';
function UserList() {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    getUsers().then(setUsers);
  }, []);

  return (
    <View>
      {users.map(u => <Text key={u.id}>{u.name}</Text>)}
    </View>
  );
}

Line-by-line walkthrough

1. 1. React (Web) 🌐
2. 2. Declaring a function
3. 3. Returning a value
4. 4.
5. 5.
6. 6.
7. 7.
8. 8.
9. 9.
10. 10.
11. 11. Closing expression
12. 12. Closing block
13. 13.
14. 14. React Native (Mobile) 📱
15. 15. Same logic, different building blocks!
16. 16. Importing required dependencies
17. 17.
18. 18. Declaring a function
19. 19. Returning a value
20. 20.
21. 21.
22. 22.
23. 23.
24. 24.
25. 25.
26. 26.
27. 27. Closing expression
28. 28. Closing block
29. 29.
30. 30. Declaring a variable
31. 31.
32. 32.
33. 33.
34. 34.
35. 35. Closing block
36. 36.
37. 37.
38. 38.
39. 39. Closing block
40. 40.
41. 41.
42. 42. The translation table 📋
43. 43. Web → Mobile
44. 44. div → View
45. 45. p, span, h1 → Text
46. 46. button → TouchableOpacity
47. 47. img → Image
48. 48. input → TextInput
49. 49. onClick → onPress
50. 50. className → style prop
51. 51. CSS → StyleSheet
52. 52.
53. 53. Shared code between React & React Native ✨
54. 54. In services/api.ts
55. 55. Exporting for use in other files
56. 56. Declaring a variable
57. 57. Returning a value
58. 58. Closing block
59. 59.
60. 60. In Web component
61. 61. Importing required dependencies
62. 62. Declaring a function
63. 63. Declaring a variable
64. 64.
65. 65.
66. 66.
67. 67.
68. 68.
69. 69. Returning a value
70. 70.
71. 71.
72. 72.
73. 73. Closing expression
74. 74. Closing block
75. 75.
76. 76. In Mobile component — SAME logic!
77. 77. Importing required dependencies
78. 78. Declaring a function
79. 79. Declaring a variable
80. 80.
81. 81.
82. 82.
83. 83.
84. 84.
85. 85. Returning a value
86. 86.
87. 87.
88. 88.
89. 89. Closing expression
90. 90. Closing block

Spot the bug

// React Native
function Welcome() {
  return (
    <div className="container">
      <h1>Hello Mobile!</h1>
    </div>
  );
}

Explain like I'm 5

Fun fact

Hands-on challenge

More resources

• React Native Documentation (React Native Official)
• Expo Documentation (Expo Official)
• React Native in 100 Seconds (Fireship)