Notes on React Native and React JS Integration

Introduction to React Native

  • What is React Native?
    • A framework for building mobile applications using React.
    • Allows developers to create native apps for iOS and Android using JavaScript.

Basics of React JS in React Native

  • React JS:

    • A JavaScript library used for building user interfaces, primarily for web applications.
    • It follows a component-based architecture, making it easier to create reusable UI components.

  • How React JS Works in React Native:

    • React Native uses the same fundamental principles of React JS but adapts them for mobile app development.
    • Components in React Native are not web components; they map to native UI components.

  • Key Components of React Native:

    • View: Analogous to a div in web development. It's a container for layout.
    • Text: Used for displaying text.
    • Image: For rendering images.
    • ScrollView: Enables scrolling in both vertical and horizontal directions.

Core Concepts of React Native

  • Props and State:

    • Props: Short for properties, they are read-only and must be used to pass data from parent to child components.
    • State: Represents the internal data within a component that can be changed.

  • Lifecycle Methods:

    • React Native components have lifecycle methods similar to React JS components, allowing you to run code at specific points in a component's life.

  • Styling:

    • React Native uses a Flexbox-based approach for styling, which is different from CSS used in web applications.
    • Styles are written in JavaScript, allowing dynamic styling based on component state.

Conclusion

  • React Native combines the power of React with native mobile development, allowing for efficient cross-platform app development. As developers familiarize themselves with React JS principles, transitioning to React Native becomes seamless, enabling the use of familiar concepts while building mobile applications.