React

React Native is a framework for mobile app development, based on the fundamental principles of React. Understanding React's core concepts greatly assists in using React Native effectively.

React for React Native

In this article, we'll delve into React's core concepts and see how they apply to React Native.

1. Component

Components are the core of both React and React Native. They are reusable units that make up the UI and are independent and recyclable.

React Example:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

React Native Example:

import { Text } from 'react-native';

function Welcome(props) {
  return <Text>Hello, {props.name}</Text>;
}

2. State & Props

React components manage data through state and props. Props are data passed down from parent components, while state represents data that can change within a component.

Components can have their own state and properties (props), and the UI of a React application is composed of a combination of these components. Components can be defined either as functional or class-based. In modern React applications, functional components are predominantly used.

When designing components in React, props and state are two crucial concepts. These two help define how a component processes and displays information.

props (Properties)

props is short for "properties".

1. Information Transfer: props are used to pass information from a parent component to a child component.
2. Read-only: props cannot be modified within a component. In other words, a component must use the props as they are received.
3. Example: Imagine giving someone your business card to convey your name. The information on that card doesn't change. Similarly, props passed to a component can be thought of as unchangeable information.

state (Status)

state is information managed within the component.

1. Changeable: state can change over time. It can be updated for various reasons, such as user interactions or receiving new data from a server.
2. Internally Managed: state is managed only within the component, and it cannot be directly modified from outside.
3. Example: Imagine things like your mood or thoughts, which can change as time passes. The component's state manages information that can change over time in a similar way.

To summarize briefly:

props: Information received from the parent that cannot be changed.

• Official Documentation: Passing Props to a Component

state: Information managed within the component that can change depending on time or circumstances.

• Official Documentation: Managing State

React Native Example:

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

function Counter(): JSX.Element {
  const [count, setCount] = useState<number>(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <>
      <Text>{count}</Text>
      <Button title="Increase" onPress={increment} />
    </>
  );
}

export default Counter;

3. Lifecycle & Hooks

Lifecycle methods are used in class components and get executed at specific times during a component's life. In function components, similar functionalities can be achieved using Hooks.

React Native Hooks Example:

import { useState, useEffect } from 'react';
import { Text } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Executes when the component mounts or updates.
    console.log('Component updated!');

    return () => {
      // Executes when the component will unmount.
      console.log('Component will unmount!');
    };
  }, [count]); // Executes every time 'count' changes.

  return <Text>{count}</Text>;
}

These fundamental concepts of React apply directly to React Native. Building on these React principles allows for more effective mobile app development in React Native. Thus, a solid grasp of React's fundamentals will naturally lead to a smoother transition to React Native.