JavaScript vs Python: Understand the Key Differences | Simplilearn
While Python can be used to create the back-end of a web application, JavaScript can be used to create the back-end as well as the front-end.
React Native
Similarly, you can be utilizing JavaScript when interacting with a mobile app because frameworks like <anchor>React Native</anchor> allow us to create apps that adapt to diverse devices. Because JavaScript is a powerful language that provides us with the tools we need to construct the components of a web application, it is frequently utilized in web development.
React Native Tutorial for Beginners [Updated] | Simplilearn
All Courses

All Courses

Log in

Software Development

Explore our curated learning milestones for you!

Click here to close suggestions!

#### Table of Contents

# The Ultimate React Native Tutorial

Share This Article:

Last updated on Aug 13, 2024111819

React Native

#### Table of Contents

React Native is the most popular framework for developing cross-platform mobile applications. This framework has made it possible to create native mobile apps for multiple platforms simultaneously. You can develop full-blown mobile applications for both iOS and Android using a single language, i.e., JavaScript. This is a huge advantage, as it saves a lot of time and money and also eliminates the steep learning curves that are associated with each platform’s native development language ( Java or Kotlin for Android, and C or C++ for iOS).

This article will help you get a grip on the basic concepts of React Native. First, we’ll go through the framework’s fundamental aspects. After the basics have been covered, we are going to make our mobile application, a “To-do” app. This application is all about improving productivity as it will allow us to add, manage, and remove tasks. Let’s get started.

## 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.

React Native applications are real mobile applications and not just web applets. Facebook released the first version of React Native in March 2015.

react-native

Fig: React Native to Platform

#### Want a Top Software Development Job? Start Here!

Want a Top Software Development Job? Start Here!

## Why Use React Native?

- ### Cross-Platform

One of the most significant advantages of React Native is that 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.

#### Want a Top Software Development Job? Start Here!

Want a Top Software Development Job? Start Here!

- ### 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.

- ### It Keeps Getting Better

The community, as mentioned above, also keeps updating React Native with new functionalities and making sure that bugs do not occur.

- ### Used by Many Companies

Though the framework is relatively new, many companies have already migrated the applications to this framework. Additional companies are looking to use the framework to speed up the process of development and maintenance.

#### Want a Top Software Development Job? Start Here!

Want a Top Software Development Job? Start Here!

- ### Excellent Career Opportunities

React Native has become very popular lately due to advantages like cross-compatibility. Consequently, this popularity has led to high demand for React Native developers.

#### Want a Top Software Development Job? Start Here!

Want a Top Software Development Job? Start Here!

## View, State, Props, and Style

### View

The View is an elemental component of React Native for building a user interface. It is a container that supports layout with flexbox, style, touch handling, and accessibility controls. It maps directly to the native view similar to whatever platform on React Native app is running on.

react-hello

The code inside the “View” block is outputted to the screen

### State

There are two types of data that control a component in React Native: props and state. For data that is going to change in the future, we use state. The state contains the data or information about the component. It determines the behavior of the component and how it will render.

import-react

- The “state” object contains the data that gets rendered on screen
- The “Text” code block renders the state on screen

### 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.



- In the class “TVshows,” prop is passed to another component called “Watch”
- In the class “Watch,” the received prop is used in the component

### Style

React Native uses JavaScript for styling the application. All core components use a prop named “style.” The style names and values are similar to CSS that works for the web. To style our components, we can either use inline styling or use StyleSheet, which is a React Native component.

inline-style

- Inline style is used for the text “inline style”
- Stylesheet object is created to style the texts, “blue” and “bigBlack”

#### Want a Top Software Development Job? Start Here!

Want a Top Software Development Job? Start Here!

## React Native Apps VS Platform-Specific Apps

These are the most critical differences between React Native and platform-specific mobile applications:

React Native

Platform-Specific

Cross-Platform

Apps work in both iOS and Android

The app is made for a specific platform

Developers

Developers having a strong web development background

Developers having a strong platform knowledge

Build time

Fast

Slow

Applications

Simple

Complex

Long-term support

Not recommended as the framework can get shut down

Recommended for long-term investment

Resources

Best for small development teams with limited resources

Best for experienced development reams with adequate resources

## React Native Prerequisites

Here are some ideas and concepts that you should be familiar with before starting to work on React Native:

- You should be familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes
- You should have a basic knowledge of JavaScript
- You should have some familiarity with HTML and CSS
- Finally, if you have worked with React before, you already know a lot about React Native, and there should be absolutely no problem in working with it

## Create a React Native Application: To-do App

We are going to make our mobile application, and we will call it To-do. This application will allow us to add and manage tasks in the application. In this react native tutorial, we will focus on running the app in Android OS, so the code is optimized accordingly. We recommend using an Android mobile for this tutorial.

Our final mobile application will look like this. Let’s get started!

## Set-Up the Development Environment

to-do-app

“Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript codebase.”  - Expo documentation

Navigate to https://expo.io/learn. We will use the Expo framework to develop our React Native application. There you will find all the instructions you need to start creating.

fall-in-love

- The first step is not relevant in our case; so let’s skip it and directly start with Step 02, which is to install nodeJS on the computer.

node

- After nodeJS is installed, we need to follow Step 03 and get the command-line tool for Expo; for that, type the following command in the command prompt or terminal

npm install Expo-cli --global

- After the Expo-cli tool is installed, we need to follow Step 04 and create our project. To do that, type the following command in the command prompt or terminal.

expo init todo-app

Next, choose blank from this screen for a blank application while including Expo workflow features.

command-prompt.

Enter the name of your application, and press Enter to continue setting up the application.

command-prompt2

- To start the application, you can navigate to the newly created project folder and type “npm start.” To stop the application, press Ctrl + C.

cd todo-app

npm start

#### Master Core Java 8 Concepts, Java Servlet & More!

Master Core Java 8 Concepts, Java Servlet & More!

The development server will start running, and a new tab will open in your web browser with the Expo manager screen.

expo

There are two ways you can now preview the application:

- You can either run the app on an Android emulator, which you can get by installing Android Studio on the computer.
- Or, you can install the Expo application on your phone and scan the QR code to run the application on the phone. The To-do app will load and will update as you make changes in the code.

Install a text editor of your choice. We are using the Visual Studio Code in this react native tutorial. Still, you can also use other editors like Atom and Sublime Text if you are more comfortable with those.

/code-editing

Now we have all the tools we need to create a new React Native application. We have already created one, the To-do app. So let’s get started by creating the components of our mobile application.

## Create Components of the App

Similar to React, everything here is a component. Everything you see here is a separate component that has been combined to create a complete mobile application. The following are the components that we will be creating for this application:

- ### App

This component will act as a container for all the other components to come together and provide a complete application

- ### Header

As the name suggests, this component will be the header of the mobile application

- ### Display Image

This component is used here to display the image on the main screen

- ### To-do Item

Each task added is a separate component

- ### To-do Input

This component is used to add tasks to the application

It is very important to visualize a React Native application in terms of components before starting to work on it, and that’s precisely what we are doing here.

### Let’s now start with the development of To-do App:

display

- Open the project folder in the text editor, and inside the src folder, create a components folder into which we will add all our components.

1. ### Header:

2. Inside the components folder, create a new file named Header.js

3. Add the following code in that file. We see below how the code works.

4. import React from "react";

5. import { StyleSheet, View, Text } from "react-native";

6. const Header = props => {

7. 
8. 
9. 
10. 
11. 
12. };

13. const styles = StyleSheet.create({

14. 
15. 
16. 
17. 
18. 
19. 
20. 
21. 
22. 
23. 
24. 
25. 
26. });

27. export default Header;

28. Import React. (Line 1)

29. Import React Native components. (Line 2)

30. Return Header text along with style. (Lines 5 – 9)

31. Add style to create the Header using StyleSheet. (Lines 12 – 25)

32. Export the component. (Line 27)

### 2. Display Image:

1. Inside the components folder, create a new file named DisplayImage.js

2. Add the following code in that file. We see below how the code works.

3. import React from "react";

4. import { Image, StyleSheet } from "react-native";

5. const DisplayImage = props => {

6. 
7. 
8. 
9. 
10. 
11. 
12. 
13. };

14. const styles = StyleSheet.create({

15. 
16. 
17. 
18. 
19. 
20. 
21. });

22. export default DisplayImage;

23. Import React. (Line 1)

24. Import React native components. (Line 2)

25. If condition (conditional rendering) to display the image only when there is no task. (Lines 5 – 11)

26. Image source is the location of the image where it is to be imported from. (Line 7)

27. 
28. 

### 3. To-do Item:

1. Inside the components folder, create a new file named TodoItem.js

2. Add the following code to that file. We see below how the code works.

3. import React, { useState } from "react";

4. import {

5. 
6. 
7. 
8. 
9. 
10. } from "react-native";

11. const TodoItem = props => {

12. 
13. 
14. 
15. 
16. 
17. 
18. 
19. 
20. 
21. 
22. 
23. 
24. 
25. 
26. 
27. };

28. const styles = StyleSheet.create({

29. 
30. 
31. 
32. 
33. 
34. 
35. 
36. 
37. 
38. 
39. 
40. 
41. 
42. 
43. 
44. 
45. 
46. 
47. 
48. 
49. 
50. 
51. 
52. 
53. 
54. 
55. 
56. 
57. 
58. 
59. 
60. 
61. 
62. 
63. 
64. });

65. export default TodoItem;

66. 
67. 
68. 
69. 
70. 
71. 

### 4. To-do Input:

1. Inside the components folder, create a new folder named TodoInput.js

2. Add the following code to that file. We see below how the code works.

3. import React, { useState } from "react";

4. import {

5. 
6. 
7. 
8. 
9. 
10. 
11. 
12. } from "react-native";

13. import Header from "./Header";

14. const TodoInput = props => {

15. 
16. 
17. 
18. 
19. 
20. 
21. 
22. 
23. 
24. 
25. 
26. 
27. 
28. 
29. 
30. 
31. 
32. 
33. 
34. 
35. 
36. 
37. 
38. 
39. 
40. 
41. 
42. 
43. 
44. 
45. 
46. 
47. 
48. 
49. 
50. 
51. 
52. 
53. 
54. 
55. 
56. 
57. 
58. 
59. 
60. };

61. const styles = StyleSheet.create({

62. 
63. 
64. 
65. 
66. 
67. 
68. 
69. 
70. 
71. 
72. 
73. 
74. 
75. 
76. 
77. 
78. 
79. 
80. 
81. 
82. });

83. export default TodoInput;

84. 
85. 
86. 
87. 
88. 

> TodoInputHandler: sets enteredTask state to enteredText. (Lines 16 – 18)

> addTaskHandler: clears the text field after adding a task. (Lines 20 – 23)

> checkInput: checks if the user has entered the task or left the field blank. (Lines 25 – 32
6. Return a modal (react native component) that contains the input field and buttons. (Lines 35 – 62)
7. Add styles using StyleSheet to the components. (Lines 66 – 87)
8. Export the component. (Line 89)

### 5. App:

1. Replace the default code in the App.js file with the following code. We show below how the code works.

2. import React, { useState } from "react";

3. import { StyleSheet, View, Button, FlatList, Image } from "react-native";

4. import TodoItem from "./components/TodoItem";

5. import TodoInput from "./components/TodoInput";

6. import DisplayImage from "./components/DisplayImage";

7. import Header from "./components/Header";

8. export default function App() {

9. 
10. 
11. 
12. 
13. 
14. 
15. 
16. 
17. 
18. 
19. 
20. 
21. 
22. 
23. 
24. 
25. 
26. 
27. 
28. 
29. 
30. 
31. 
32. 
33. 
34. 
35. 
36. 
37. 
38. 
39. 
40. 
41. 
42. 
43. 
44. 
45. 
46. 
47. 
48. 
49. 
50. 
51. 
52. 
53. }

54. const styles = StyleSheet.create({

55. 
56. 
57. 
58. 
59. 
60. 
61. 
62. 
63. });

64. Import React and useState hook. (Line 1)

65. Import React native components. (Line 2)

66. Import these components of the project into the app component: (Lines 4 – 7)

> TodoItem

> TodoInput

> DisplayMessage

> Header
4. Define initial states for the data to be rendered. (Lines 10 – 11)
5. Functions are appropriately named according to the tasks they perform:

> addTaskHandler: adds tasks to the list. (Lines 13 – 19)

> deleteTaskHandler: deletes tasks from the list. (Lines 21 – 25)

> canceltaskAdditionHandler: cancels adding tasks to the list. (Lines 27 – 29)
6. Return the components while passing props to each component. (Lines 31 -58)
7. Add styling to components using StyleSheet. (Lines 61 - 70)

We have completed the development of our To-do mobile application, and it should be working as illustrated below. Let’s go ahead and summarize all that we have done to create this mobile application.

## Summary of the Steps:

1. Set-up an environment for the development of the application
2. Install the Expo app on the mobile device to preview the application in real-time
3. Visualize the application in terms of components and then maintain the project structure accordingly in the text editor
4. Add all the components to the project
5. Make sure each component works as expected
6. Enjoy the result and feel free to tweak the design and functionality as you want

We have now created a fully functional mobile application using React Native that works and looks great! We hope you were able to follow all of the instructions easily and can sit back and bask in your accomplishment!

## Industry Trends

React Native has become very popular in the world of mobile app development, and that popularity is steadily increasing.

- With the adoption of React Native on the rise, the digital world needs more knowledgeable developers. As a result, React Native developer salaries are on the higher side of the spectrum when compared with that of other front-end developers.

react-pay1.

The average salary for a React Native developer across the United States is a whopping USD 91,000 per year!

react-pay2

The average salary for a React Native developer in India is ₹7,25,000 per year!

- React Native is a relatively new tool in the world of app development but has already been adopted by many well-known companies such as Facebook, Instagram, Airbnb, and Netflix.

react3

This brings us to the end of our tutorial. Remember, React Native is the most popular framework for building mobile applications, and it is here to stay. The framework’s increasing popularity has led to a growing need for more React Native developers, a demand that shows no signs of abating, making this a very attractive career choice. To learn more, check out our Full Stack Developer - MERN Stack.

## Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Cohort Starts: 7 Oct, 2024

Cohort Starts: 18 Sep, 2024

Cohort Starts: 18 Sep, 2024

Cohort Starts: 7 Oct, 2024

8 months$ 1,499

## Recommended Reads

prevNext

### Get Affiliated Certificationswith Live Class programs

Full Stack Developer - MERN Stack Masters Program

#### Full Stack Developer - MERN Stack Masters Program

- 40+ micro skilling exercises & 6+ work-like professional projects
- Develop expertise in 10+ full stack development tools and frameworks

6 Months months

Java Certification Training

#### Java Certification Training

- 24x7 learner assistance and support

© 2009 -2024- Simplilearn Americas Inc.

Follow us!

Company

Work with us

Discover

For Businesses

Learn On the Go!

Trending Post Graduate Programs

Trending Bootcamp Programs

Trending Master Programs

Trending Courses

Trending Categories

Trending Resources

OK

smpl_2024-09-13

- Disclaimer
- PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.