React Native Overview

What is React Native?

React Native is a JavaScript framework that is used to develop mobile applications for iOS and Android. It lets you build cross-compatible mobile applications using only JavaScript, and you don’t have to worry about learning platform-specific application development languages such as Kotlin for Android or Swift for iOS.

Why We Use React Native?

Cross-Platform: You can develop an application for both Android and iOS ecosystems simultaneously by writing the same code with just a few modifications for each platform.
JavaScript: There is no need to know the languages used for platform-specific application development, as React Native uses only JavaScript, probably the most popular programming language right now, for the development of mobile applications.
Performance: React Native enables speedy development of mobile applications since a similar code is used for applications for both platforms. It also facilitates a hot reloading feature that makes sure that small changes done to the application are immediately visible to the developer.
Large Developers’ Community: A huge developers’ community ensures that all the queries are resolved in time, and therefore, adequate support is available for the React Native framework.

Difference between ReactJS and React Native:

ReactJS:

ReactJS is a JavaScript library for building user interfaces for web applications.
Used to build web applications.
HTML based components are used to develop UI (For Ex: HTML tags).
ReactJS uses Cascading Style Sheets (CSS).
Building complex web applications.

React Native:

React Native is a framework for building native mobile applications by compiling JavaScript code to native android/iOS app code.
Used to build native mobile applications for Android and iOS.
Native components are used to develop UI (For Ex: View and Text tags).
React Native uses a Stylesheet object (JavaScript object).
Building a simple mobile application.

React Native Setup:

NodeJS: Make sure it is Node 18 or newer.
JDK: Recommended is to install JDK17.
Android Studio: Install latest version of Android Studio.
Android SDK: Install and Configure Android Emulator.
Visual Studio: Install VS code for development.

React Native Basics:

Creating a new React Native application:

For creating a new React Native application, in your terminal run this below command: npx react-native@latest init ProjectName
To start our application, go to the project folder and run this command npm start
To run our application on android need use this command: npm run android

View, State, Props, and Style in React Native:

View: We can use View as a container tag and Text as text tag to display any text. There are two types of data that control a component in React Native: Props and State.
State: For data that is going to change in the future, we use state. The state contains the data or information about the component.
Props: Props is short for Properties. The components can be customized at the time of creation using different parameters, and those parameters are known as props. Props are passed from one container to another as a means of passing data between them.

Components in React Native:

Components are the reusable building blocks we use to create the user interface of our app. In two ways we can create components in React Native.

Class components:

A class component requires you to extend from React. Component and create a render function that returns a React element.

Functional components:

A functional component is just a plain JavaScript pure function that accepts props as an argument and returns a React element (JSX).

Life Cycle Methods:

Mounting: In this phase, component instance is created and inserted into the DOM.
Updating: In updating phase, a react component is said to be born and it start growing by receiving new updates.
Unmounting: In this phase, a react component gets removed from actual DOM.
Error Handling: It is called when any error occurs while rendering the component.

Hooks:

Hooks are new addition in React 16.8. They let you use state and other React features without writing a class. It mainly uses to handle the state and side effects in react functional component. Hooks don’t work inside classes they let you use React without classes React provides a few built-in Hooks like "useState" and "useEffect".

Navigation:

Navigation is nothing but redirecting from one page to another page, there are three types of navigations in react native. To use navigation in react native first we need to install “react-native-gesture-handler” and import in App.js or index.js.

Stack Navigation:

In this type after clicking on any button or after submitting something page will redirect to another page with back button.
To use this we need to install: “react-navigation/stack”

Tab Navigation:

In this type after clicking on each tab page will be redirected for this we need to create tabs first, there are two types of tab navigations are there
To use this we need to install: “react-native-tab-view”.
Bottom Tab Navigation: In this type we can see tabs at the bottom.
To use this we need to install: “react-navigation/material-bottom-tabs”
Top Tab Navigation: In this type we can see tabs at the top.
To use this we need to install: “react-navigation/material-top-tabs”

Drawer Navigation:

In this type we need to drawer from left (sometimes right) side for navigating between screens.
To use this we need to install: “react-navigation/drawer”

Handle List:

Displaying List Items in React Native, we can list the items using map function as like in React but in Recat Native if we use map function it will work but we can’t see the scroll if items are huge, so for that we have FlatList and SectionList from Recat Native we will use these in our app.

SectionList:

The React Native SectionList component is a list view component which sets the list of data into broken logical section, The broken data can be implemented using its section header prop renderSectionHeader. To implement the SectionList component, we need to import SectionList from 'react-native' library.

FlatList:

The FlatList component displays the similar structured data in a scrollable list, It works well for large lists of data where the number of list items might change over time, The FlatList shows only those renders elements which are currently displaying on the screen, not all the elements of the list at once. To implement the FlatList component, we need to import FlatList from 'react-native' library.

Rest API’s:

A RESTful API is an architectural style for an application program interface (API) that uses HTTP requests to access and use data. That data can be used to GET, PUT, POST and DELETE data types, which refers to the reading, updating, creating and deleting of operations concerning resources.
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers, HTTP works as a request-response protocol between a client and server, some http methods are get, post, put and delete, For Example: A client (browser) sends an HTTP request to the server, then the server returns a response to the client.
There are three common ways to make API calls:

XMLHttpRequest:

It’s a low-level API because it only provides a basic mechanism for making HTTP requests and leaves it up to the developer to parse the response, handle errors and manage the request’s state.

Fetch API:

Fetch API is a modern, promise-based API for making HTTP requests in JavaScript, It provides a simple and flexible interface for making GET, POST, PUT and DELETE requests and handling the response from the server.

Axios:

Axios is a popular JavaScript library for making HTTP requests, and it works great with React, Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations (create, read, update and delete), as well as handle the responses, To use Axios first we need to install it using this command: “npm install axios ” then import.

Redux:

Redux is an open-source JavaScript library for managing and centralizing application state. To manage the data in the redux state, we have 3 things: actions, reducers and stores. To use redux we need to run/install: “npm i @reduxjs/toolkit redux react-redux”

Old way of implementing redux:

Actions can be sent when a user presses a button, load an app, etc. They can contain information that you want to add to the state.
Reducers listen for actions. When it hears that an action has been sent to it, it updates the state.
The Store holds the Redux state and allows access and modifications to it. It’s the middleman between actions and reducers.

New way of implementing redux:

First we need to create a slice and in that set initial state and add reducer functions.
createSlice({}) is a function that accepts an initial state, an object of reducer functions, and a “slice name”, and automatically generates action creators and action types that correspond to the reducers and state.
Create store.jsx in that configure store and reducer finally use this store in Provider in App.jsx.

#What is React Native?

#Why We Use React Native?

#Difference between ReactJS and React Native:

#ReactJS:

#React Native:

#React Native Setup:

#React Native Basics:

#Creating a new React Native application:

#View, State, Props, and Style in React Native:

#Components in React Native:

#Class components:

#Functional components:

#Life Cycle Methods:

#Hooks:

#Navigation:

#Stack Navigation:

#Tab Navigation:

#Drawer Navigation:

#Handle List:

#SectionList:

#FlatList:

#Rest API’s:

#XMLHttpRequest:

#Fetch API:

#Axios:

#Redux:

#Old way of implementing redux:

#New way of implementing redux: