Introduction to React Native

# CHAPTER 1

Introduction to React Native #

1. Introduction #

2. Learning Objectives #

• Define what React Native is and its primary purpose.

• Understand the core architecture (The JavaScript Bridge).

• List the advantages and disadvantages of React Native.

• Compare React Native with Flutter and other cross-platform tools.

• Identify major real-world apps built with React Native.

3. What is React Native? #

4. React Native Architecture (The Bridge) #

1. 1. The Native Thread: Handles the main UI and native device features (like the camera or GPS).

1. 2. The JavaScript Thread: This is where your React logic runs (calculating math, updating state, fetching APIs).

1. 3. The Bridge: The communication layer. When your JS thread wants to display a button, it sends a serialized JSON message across the Bridge to the Native thread, saying, *"Please draw an iOS UIButton here."*

*(Note: React Native is currently rolling out the "New Architecture" via JSI, which removes the bridge for direct C++ communication, making it even faster!)*

5. Why Use React Native? (Advantages) #

• Code Reusability: Write once, run everywhere. Share up to 90% of your codebase between iOS and Android.

• Fast Refresh: See your code changes instantly on your emulator without recompiling the entire app.

• Leverage Web Skills: If you know React for the web, you already know 80% of React Native.

• Vast Ecosystem: Access to millions of packages on npm.

Disadvantages:

• Performance: Because it uses a JavaScript bridge, it is slightly slower than pure native code (Java/Swift) for incredibly heavy 3D games or complex animations.

• Native Knowledge Sometimes Required: For highly complex device hardware integrations, you might still need to write a little Java or Swift.

6. React Native vs Flutter #

• Language: React Native uses JavaScript/TypeScript. Flutter uses Dart.

• Rendering: React Native commands the phone to draw native OEM widgets (it looks exactly like a real iOS app because it *uses* real iOS buttons). Flutter draws every pixel itself on a blank canvas (like a game engine).

• Popularity: React Native has a massive community and more enterprise jobs because it allows web developers to easily transition to mobile.

7. Real-World Use Cases #

• Facebook & Instagram

• Uber Eats

• Discord

• Pinterest

• Skype

• Tesla

8. Mini Project: Mental Model Mapping #

<div>
  <h1>Hello World</h1>
</div>

In React Native, there is no HTML. You use Native Components:

• <div> becomes <View>

• <h1> or <p> becomes <Text>

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

export default function App() {
  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
}

9. Common Mistakes #

• Trying to use HTML/CSS: Beginners often try to write <div className="container"> in React Native. It will instantly crash. Mobile phones do not understand HTML. You must use React Native's specific UI components like <View> and <Text>.

10. Best Practices #

• Learn JavaScript deeply: React Native is just a framework. The logic powering your app will be pure JavaScript (or TypeScript). A strong foundation in ES6 JavaScript will make learning React Native exponentially easier.

11. Practice Exercises #

1. 1. Name three famous mobile applications built using React Native.

1. 2. What is the fundamental architectural difference between how a web browser renders a React app versus how a mobile phone renders a React Native app?

12. MCQs with Answers #

13. Interview Questions #

• Q: Contrast React Native with traditional Native App Development (Java/Swift). What are the business and technical tradeoffs a CTO must consider when choosing between them?

• Q: Explain the concept of the React Native "Bridge." What performance bottleneck does it introduce, and how does the upcoming "New Architecture" aim to solve it?

• Q: If you are migrating a web developer from React.js to React Native, what are the three most critical paradigm shifts they need to understand regarding UI rendering?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #