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

View and Text Components

View Component

The View component is a fundamental building block in React Native, similar to a div in web development;
It's used to structure and style the layout of your mobile app;
Properties like flex, justifyContent, and alignItems control its layout.

All the React Native components we are considering should be imported from the react-native package.

Example

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

const App = () => {
  return (
    <View>
      {/* Other components go here */}
    </View>
  );
};

export default App;

Code Description

Line 2: Imports the View component from the react-native library.

Line 4: Declares a functional component named App.

Lines 5-9: The component returns JSX. In this case, it returns a View component, which acts as a container for other UI components.

Text Component

The Text component is used to display text in your app;
It's similar to the HTML <span> or <p> tags;
You can style text using various properties such as fontSize, color, and fontWeight.

Example

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

const App = () => {
  return (
    <View>
      <Text>The first line of text in the app.</Text>
    </View>
  );
};

export default App;

Code Description

Line 2: Imports the Text component from the react-native library.

Line 4: Declares a functional component named App.

Lines 5-9: The component returns a View component containing a Text component. The Text component displays the text "The first line of text in the app."

In Practice

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

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

Зміст курсу

Foundations of React Native

View and Text Components

View Component

The View component is a fundamental building block in React Native, similar to a div in web development;
It's used to structure and style the layout of your mobile app;
Properties like flex, justifyContent, and alignItems control its layout.

All the React Native components we are considering should be imported from the react-native package.

Example

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

const App = () => {
  return (
    <View>
      {/* Other components go here */}
    </View>
  );
};

export default App;

Code Description

Line 2: Imports the View component from the react-native library.

Line 4: Declares a functional component named App.

Lines 5-9: The component returns JSX. In this case, it returns a View component, which acts as a container for other UI components.

Text Component

The Text component is used to display text in your app;
It's similar to the HTML <span> or <p> tags;
You can style text using various properties such as fontSize, color, and fontWeight.

Example

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

const App = () => {
  return (
    <View>
      <Text>The first line of text in the app.</Text>
    </View>
  );
};

export default App;

Code Description

Line 2: Imports the Text component from the react-native library.

Line 4: Declares a functional component named App.

Lines 5-9: The component returns a View component containing a Text component. The Text component displays the text "The first line of text in the app."

In Practice

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

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