Chapter 3: Understanding React Native Components

1. Introduction to React Native Components

What are React Native Components?

Definition: Components are the building blocks of a React Native application. They allow you to split the UI into independent, reusable pieces, and think about each piece in isolation.
Types of Components:
- Functional Components: Simplified components that focus on rendering UI based on the props passed to them.
- Class Components: Traditional React components that can manage their own state and lifecycle methods.

Example of a Functional Component:

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

const Greeting = (props) => {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
};

export default Greeting;

In this example, Greeting is a simple functional component that takes name as a prop and displays it in a Text component.

2. The Role of Components in React Native

Why Use Components?

Reusability: Components can be reused throughout the application, reducing redundancy.
Maintainability: Separating UI into components makes code easier to manage and maintain.
Composition: Components can be composed together to create more complex UIs.

Example of Component Composition:

import React from "react";
import { View } from "react-native";
import Greeting from "./Greeting";

const WelcomeScreen = () => {
  return (
    <View>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </View>
  );
};

export default WelcomeScreen;

Here, the WelcomeScreen component is composed of two Greeting components, demonstrating how smaller components can be combined to form a more complex UI.

3. Overview of Core Components

Key Core Components in React Native:

View: The most basic building block of UI, akin to a div in web development. It’s used to wrap other components and apply layout styles.
Text: Used to display text in your app.
Image: For displaying images.
ScrollView: A scrollable container that can host multiple components and views.
TouchableOpacity: A wrapper for making views respond to touch, commonly used for creating buttons.

Example Using Core Components:

import React from "react";
import { View, Text, Image, ScrollView, TouchableOpacity } from "react-native";

const App = () => {
  return (
    <ScrollView>
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 24 }}>Welcome to My App</Text>
        <Image
          source={{ uri: "https://example.com/image.png" }}
          style={{ width: 200, height: 200 }}
        />
        <TouchableOpacity onPress={() => alert("Button Pressed!")}>
          <Text style={{ color: "blue" }}>Press Me</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

export default App;

In this example, the app showcases the use of View, Text, Image, ScrollView, and TouchableOpacity to create a simple interface.

4. Understanding JSX in React Native

What is JSX?

Definition: JSX stands for JavaScript XML. It allows you to write HTML-like syntax directly in JavaScript, making it easier to visualize the UI structure.
Why Use JSX?: It simplifies the process of writing React components, making your code more readable and closer to the actual output.

JSX vs. JavaScript:

JSX is not a string nor HTML, but it produces React “elements” which are then rendered to the UI.

Example of JSX in a React Native Component:

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

const JSXExample = () => {
  return (
    <View>
      <Text>Hello World!</Text>
    </View>
  );
};

export default JSXExample;

Here, the JSXExample component uses JSX to define its UI structure with a View containing a Text element.

JSX Transpilation:

Behind the scenes, JSX is transpiled by Babel into standard JavaScript. For example, <Text>Hello World!</Text> is transformed into React.createElement(Text, null, 'Hello World!').

Dynamic Expressions in JSX:

You can embed any JavaScript expression inside JSX by wrapping it in curly braces {}.

Example of Dynamic Expressions:

const name = "React Native";

return (
  <View>
    <Text>Welcome to {name}!</Text>
  </View>
);

In this example, the value of name is dynamically inserted into the Text component.

These notes provide a comprehensive introduction to React Native components, explaining their importance, providing code examples, and detailing key concepts like JSX and core components.