React Native is a popular framework developed by Facebook for building mobile applications using JavaScript and React. It allows developers to create natively-rendered mobile apps for iOS and Android using a single codebase. This means you can write your app once and run it on both platforms, saving time and effort.

• Single Codebase: Write your code once and deploy it on both iOS and Android.
• Native Performance: React Native uses native components, ensuring high performance and a smooth user experience.

• JavaScript: The primary programming language used in React Native.
• React: A JavaScript library for building user interfaces, which React Native extends to mobile development.

• Bridging: React Native bridges JavaScript and native code, allowing you to use native components directly in your JavaScript code.
• Reusable Components: Create reusable components that can be used across different parts of your app.

• Instant Feedback: See changes in your code immediately without recompiling the entire app.
• Faster Development: Speeds up the development process by allowing you to iterate quickly.

Let's look at a simple example to understand how React Native works. We'll create a basic "Hello World" app.

1. Install React Native CLI:

   npm install -g react-native-cli
   

2. Create a New Project:

   react-native init HelloWorld
   cd HelloWorld
   

3. Open the Project in Your Code Editor: Open the HelloWorld folder in your preferred code editor (e.g., VS Code).

4. Edit App.js: Replace the content of App.js with the following code:

   import React from 'react';
   import { Text, View } from 'react-native';
   
   const App = () => {
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text>Hello, World!</Text>
       </View>
     );
   };
   
   export default App;
   

5. Run the App:

   • For iOS:

     npx react-native run-ios
     

   • For Android:

     npx react-native run-android
     

• Import Statements:

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

  • React: The core library for building user interfaces.
  • Text and View: Core components provided by React Native.

• App Component:

  const App = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Hello, World!</Text>
      </View>
    );
  };
  

  • View: A container component that supports layout with flexbox, style, and touch handling.
  • Text: A component for displaying text.
  • style: An object that defines the layout and appearance of the View component.

• Export Statement:

  export default App;
  

  • Exports the App component as the default export of the module.

1. Objective: Create a React Native app that displays a personalized greeting message.
2. Steps:
   • Create a new React Native project.
   • Modify App.js to display a greeting message like "Hello, [Your Name]!".
   • Run the app on an emulator or a physical device.

1. Create a New Project:

   react-native init GreetingApp
   cd GreetingApp
   

2. Edit App.js:

   import React from 'react';
   import { Text, View } from 'react-native';
   
   const App = () => {
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text>Hello, [Your Name]!</Text>
       </View>
     );
   };
   
   export default App;
   

3. Run the App:

   • For iOS:

     npx react-native run-ios
     

   • For Android:

     npx react-native run-android
     

In this section, we introduced React Native, a powerful framework for building cross-platform mobile applications using JavaScript and React. We covered the key concepts, including cross-platform development, native components, and hot reloading. We also provided a practical example and an exercise to help you get started with React Native. In the next section, we will set up the development environment to begin building React Native applications.