Getting started with React Native? Read this first!

React Native is a framework that allows developers to build mobile applications using JavaScript and React. It allows developers to use the same codebase for both iOS and Android platforms, making it a cost-effective and efficient solution for mobile development.

React Facebook first introduced native in 2015 as an open-source project. It is based on React, a JavaScript library for building user interfaces, and allows developers to build mobile apps that look and feel like native apps.

Use these tools and resources to build React Native app

There are two main ways to install and set up a React Native project using the Expo CLI or the React Native CLI.

Expo is a toolchain built around React Native that allows developers to easily set up and run React Native projects without needing Xcode or Android Studio.

Users can follow the steps below to get started with React Native.

Install and Set up using React Native CLI

React Native CLI is a command-line interface for building React Native projects. It allows developers to create and manage React Native projects, and build, run, and test apps for iOS and Android platforms.

Step 1 − The user will need Node, the React Native command line interface, a JDK, and Android Studio.

Step 2 − Install Android Studio and SDK and Configure the ANDROID_HOME environment variable.

Step 3 − If a global react-native-CLI package is previously installed in the system, we need to remove it as it may cause unexpected issues.

npm uninstall -g react-native-cli @react-native-community/cli

Step 4 − Create a new React Native project

npx react-native init <projectName>

Step 5 − navigate to the project directory

cd <projectName>

Step 6 − If users have a physical Android device, they can use it for development in place of an AVD by plugging it into their computer using a USB cable

Step 7 − Now, the user can enter the following command to run the project.

npx react-native start

Install and Set up using Expo Go

Step 1 − First, users must download and install the Node Js and npm (Node Package Manager) on the local computer.

Step 2 − Next, the user must install the Expo CLI. This can be done by running the following command in the terminal −

npm install -g expo-cli

Step 3 − Once the CLI is installed, the user can create a new React Native project by running the following command −

npx create-expo-app <projectName>

Step 4 − Navigate to the project directory

cd <project-name>

Step 5 − Now, the user can run the following command to start the development server.

npm start

step 6 − Now, users need to Install the Expo Go app on their iOS or Android phone and connect to the same wireless network as their computer. On Android, use the Expo Go app to scan the QR code from the terminal to open the project.

Create a simple "Hello World" project in React Native

With the above tools and resources, we can start building our first React Native app.

Create a new project (HelloWorld) by running the following commands −

npx create-expo-app HelloWorld
cd HelloWorld

npm start

Open the "App.js" file in the editor or IDE, and replace the existing code with the following −

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

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

export default App;

The development server is started successfully, and when users scan the QR code from the terminal, they can see the output below.

Hello World!

React Native Functions and Concepts for Building Mobile Apps

The core concepts and functions needed for building efficient and user-friendly mobile apps with React Native.

Components

React Native uses a component-based architecture, where components are the building blocks of the app, and these can be reused and nested to create complex UI.

Props and state

React Native uses props and states to manage the data and state of an app. Props are used to pass data from a parent component to a child component, while the state is used to manage a component's internal state.

Hooks

React Native hooks allow users to use state and other React features in functional components. The most commonly used hooks are useState, useEffect, useContext, useRef, etc.

Flexbox

React Native uses Flexbox, a layout system that allows users to position and size elements flexibly.

StyleSheet

React Native provides a StyleSheet API that allows users to define your components' styles.

Debugging

React Native provides a powerful debugging tool called the React Native Developer Tools that allows users to inspect the component tree, view the props and state of the components, and make changes to the code in real time.

Example – Todo App

In the example below, we will create a to-do list in React Native, and the user needs to start by setting up a basic project.

This simple, functional component allows users to add and remove todos from a list. It uses the useState hook to manage the state of the todo input field and the list of todos.

A button next to each todo on the list allows users to remove it.

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

const TodoList = () => {
   const [todo, setTodo] = useState('');
   const [todos, setTodos] = useState([]);

   const addTodo = () => {
      setTodos([...todos, todo]);
      setTodo('');
   }

   const removeTodo = (index) => {
      const newTodos = [...todos];
      newTodos.splice(index, 1);
      setTodos(newTodos);
   }

   return (
      <View>
         <TextInput
            placeholder="Enter a todo"
            value={todo}
            onChangeText={text => setTodo(text)}
         />
         <Button 
            title="Add Todo"
            onPress={addTodo}
         />
         {
            todos.map((item, index) => (
               <View key={index}>
                  <Text>{item}</Text>
                  <Button
                     title="Remove"
                     onPress={() => removeTodo(index)}
                  />
               </View>
            ))
         }
      </View>
   );
}

export default TodoList;

Output

We learned about some basics of React Native, including setting up your development environment, creating your first app, and debugging.

We also discussed some essential React Native functions and concepts for building mobile apps, such as using the useState and useEffect hooks, flexbox layout, and navigation. We also created a simple Todo List and a basic "Hello World" app.