Foundations of React Native

1. Introduction

The comprehensive introduction to React Native outlines the prerequisites and course objectives and offers guidance on efficient learning practices. Understand what to expect from the course and how to approach the learning journey effectively.

Greeting

Course Objectives

Course Prerequisites

Efficient Learning

2. Basic Concepts

Explore the foundational concepts of React Native, from setting up the development environment to understanding React Native components. Get hands-on experience building a simple app and laying the groundwork for more complex projects.

Setting up the Project

React Native Components

View and Text Components

Image Component

Styling

Challenge: Adding Styles

TouchableOpacity Component

ScrollView Component

Rendering Data Lists

Challenge: Interactive Resort List

Quiz

3. Common Principles

Learn efficient management of dynamic states, props, navigation, and hooks to create polished React Native applications.

State

Props

Challenge: Props and State

4. Advanced Concepts

Explore advanced aspects of React Native development, covering crucial topics such as Input handling, StatusBar, ActivityIndicators, and more. Dive deep into practical techniques for building sophisticated mobile applications.

Switch Component

ActivityIndicator Component

Modal Component

TextInput Component

Challenge: Dark/Light Mode Toggler with Activity Indicator

Quiz

Props

Theory

Props (short for properties) are a way to pass data from a parent component to a child component. They are similar to function arguments. Props allow you to customize and configure child components based on the requirements of the parent component.

Why do we need Props?

Props make components reusable and configurable. They enable the parent component to communicate with its children by passing data and functionality to them.

Working with Props

Passing Props

We pass props by including them as attributes when we use a component.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = 'Hello from parent';

  return <ChildComponent message={data} />;
};

In this example, the ParentComponent passes a prop called message with the value 'Hello from parent' to ChildComponent.

Receiving Props

In the receiving component (ChildComponent in this case), we can access the passed props as properties of the props object.

// ChildComponent.js
import React from 'react';
import { Text } from 'react-native';

const ChildComponent = (props) => {
  return <Text>{props.message}</Text>;
};

The ChildComponent receives the message prop and renders it within a Text component.

Default Props

We can define default values for props in case they are not provided.

// ChildComponent.js
import React from 'react';
import { Text } from 'react-native';

const ChildComponent = (props) => {
  // If message prop is not provided, use a default value
  const message = props.message || 'Default Message';

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

Code Description

Line 5: component accepts props as its argument, which represents the properties passed to it.
Line 7: Declares a constant message which is assigned the value of props.message if it's provided. If props.message is not provided (or evaluates to false, e.g., null or undefined), it defaults to 'Default Message'.
Line 9: Renders a Text component with the content of the message constant inside.

Here, if message is not provided as a prop, it defaults to 'Default Message'.

Example

Consider a scenario where we have a UserProfile component that receives user data as props.

// UserProfile.js
import React from "react";
import { View, Text } from "react-native";

const UserProfile = ({ data }) => {
  const { username, bio } = data;

  return (
    <View>
      <Text>{username}</Text>
      <Text>{bio}</Text>
    </View>
  );
};

export default UserProfile;

Code Description

Line 5: Defines a functional component named UserProfile that takes a prop named data.
Line 6: Destructures the data prop to extract username and bio. This assumes that the data prop is an object with properties username and bio.
Lines 8-13: The component renders the username and bio values within a View using Text components.

Now, when we use UserProfile in the App component, we can pass user data as props:

// App.js
import React from "react";
import { View, Text } from "react-native";
import UserProfile from "./UserProfile";

const App = () => {
  const user = {
    username: "JohnDoe",
    bio: "A passionate developer",
  };

  return (
    <View>
      <Text>Users</Text>
      <UserProfile data={user} />
    </View>
  );
};

export default App;

Code Description

Lines 7-10: Creates a sample user object with properties username and bio. This data will be passed to the UserProfile component as a prop.
Line 15: Renders the UserProfile component and passes the user data as a prop named data. This prop is accessed within the UserProfile component.

In Practice

Все було зрозуміло?

Секція 3. Розділ 2

Зміст курсу

Foundations of React Native

Props

Theory

Why do we need Props?

Props make components reusable and configurable. They enable the parent component to communicate with its children by passing data and functionality to them.

Working with Props

Passing Props

We pass props by including them as attributes when we use a component.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = 'Hello from parent';

  return <ChildComponent message={data} />;
};

In this example, the ParentComponent passes a prop called message with the value 'Hello from parent' to ChildComponent.

Receiving Props

In the receiving component (ChildComponent in this case), we can access the passed props as properties of the props object.

// ChildComponent.js
import React from 'react';
import { Text } from 'react-native';

const ChildComponent = (props) => {
  return <Text>{props.message}</Text>;
};

The ChildComponent receives the message prop and renders it within a Text component.

Default Props

We can define default values for props in case they are not provided.

// ChildComponent.js
import React from 'react';
import { Text } from 'react-native';

const ChildComponent = (props) => {
  // If message prop is not provided, use a default value
  const message = props.message || 'Default Message';

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

Code Description

Line 5: component accepts props as its argument, which represents the properties passed to it.
Line 7: Declares a constant message which is assigned the value of props.message if it's provided. If props.message is not provided (or evaluates to false, e.g., null or undefined), it defaults to 'Default Message'.
Line 9: Renders a Text component with the content of the message constant inside.

Here, if message is not provided as a prop, it defaults to 'Default Message'.

Example

Consider a scenario where we have a UserProfile component that receives user data as props.

// UserProfile.js
import React from "react";
import { View, Text } from "react-native";

const UserProfile = ({ data }) => {
  const { username, bio } = data;

  return (
    <View>
      <Text>{username}</Text>
      <Text>{bio}</Text>
    </View>
  );
};

export default UserProfile;

Code Description

Line 5: Defines a functional component named UserProfile that takes a prop named data.
Line 6: Destructures the data prop to extract username and bio. This assumes that the data prop is an object with properties username and bio.
Lines 8-13: The component renders the username and bio values within a View using Text components.

Now, when we use UserProfile in the App component, we can pass user data as props:

// App.js
import React from "react";
import { View, Text } from "react-native";
import UserProfile from "./UserProfile";

const App = () => {
  const user = {
    username: "JohnDoe",
    bio: "A passionate developer",
  };

  return (
    <View>
      <Text>Users</Text>
      <UserProfile data={user} />
    </View>
  );
};

export default App;

Code Description

Lines 7-10: Creates a sample user object with properties username and bio. This data will be passed to the UserProfile component as a prop.
Line 15: Renders the UserProfile component and passes the user data as a prop named data. This prop is accessed within the UserProfile component.

In Practice

Все було зрозуміло?

Секція 3. Розділ 2