React Native - Tausif Khan, Study Guides, Projects, Research of Computer science

Download React Native - Tausif Khan and more Study Guides, Projects, Research Computer science in PDF only on Docsity!

I

REACT NATIVE

TECHNOLOGY

II

St. John College of Engineering and Management

Palghar (East) Dist. Palghar

Approved by AICTE, DTE, affiliated to the

University of Mumbai, MSBTE

Department of Computer Engineering

Business Communication and Ethics

IV

Forwarding letter

Prof. Mrs. Ananya Ghosh St. John College of Engineering and Management Palghar (East), Mumbai – 401404. Respected Mam, Here is the project report on “React Native Technology” as you have asked us to make on 26 September, 20 20. We have done an intense research and study on this topic included how does react native works, and even more on these topic. We at SJCEM, appreciate having this assignment. We would like to thank you for giving us this opportunity & for providing proper guidance in our endeavour. This has been a learning process and is definitely going to help us in our future projects. Thanking you. Yours sincerely, TE COMPS

V

PREFACE

This book is an introduction to React Native, Facebook’s JavaScript framework for building mobile applications. Using your existing knowledge of JavaScript and React, you’ll be able to build and deploy fully featured mobile applications for both iOS and Android that truly render natively. Just because it’s JavaScript doesn’t mean we should settle for less. There are plenty of advantages to working with React Native over traditional means of mobile development, and we don’t need to sacrifice the native look and feel. We’ll start with the basics, and work our way up to deploying a full-fledged application to both the iOS App Store and the Google Play Store, with 100% code reuse between the two platforms. In addition to the essentials of the framework, we’ll discuss how to work beyond it, including how to make use of third-party libraries and even how to write your own Java or Objective-C libraries to extend React Native. If you’re coming to mobile development from the perspective of a frontend software engineer or web developer, this is the book for you. React Native is a pretty amazing thing, and I hope you’re as excited to explore it as I am! We have tried our best to include all the relevant detail to the topic to be included in this book.

VII

Abstract

The exponential growth in the adoption of mobile apps can be attributed to the increasing popularity of iOS and Android platforms. However, developing and maintaining an efficient app is a complicated process and requires a significant amount of time and money to be invested. The improvements, periodic updates, and fixes are critical for the overall success of the app in the long run. The purpose is not to compare the two platforms, but rather focus on the ground work done so far with React Native at Coforge. In this book, we would like to explore the contours of React Native mobile app development framework. The objective will be to share insights and learn from our experience of deploying React Native for our clients.

I

I VV

III III VV

1. INTRODUCTION

The aim of this thesis is to demonstrate how React Native can be used as a framework for mobile software development. This thesis will compare React Native against the existing native mobile frameworks. React Native provides a native framework in which well-designed applications for multiple mobile platforms, mainly iOS and Android, can be developed. React Native is an extension of React, also written as ReactJS or React.js, which was released in 2015 and designed for native mobile software development. React Native is written with JavaScript, a well-known programming language, and aims to allow for use of native mobile functionalities and integration. However, at its core React is essentially a library framework for the programming language JavaScript, which is used in web development. Facebook initially released React for general availability in 2013. Facebook developed React as an alternative to the standard MVC frameworks that were available at the time. Facebook set out to make a library that would be scalable and work in a more responsive manner to traditional directive driven programming languages. Pete Hunt states that React is designed to encourage the reusability of components that the developer creates. React utilizes JavaScript, as it is a flexible and powerful programming language, which is important when building largescale applications. Since 2013, React has been gaining popularity amongst software developers for its flexibility, reusability and scalability. These factors make it ideal for developing newer software that is future proof and the code base is not wasted when developing newer projects. Facebook then went onto develop React further and released React Native in 2015. 1

IV IV VV

2. DEFINITION

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS. Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus,your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location. React Native currently supports both iOS and Android, and has the potential to expand to future platforms as well. In this book, we’ll cover both iOS and Android. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some anecdota: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications. 2

VI VI VV

4. RELATION BETWEEN REACT NATIVE AND

REACT JS

4.1 What is React JS?

React is the most popular front-end JavaScript library in the field of web development. It is used by large, established companies and newly-minted startups alike (Netflix, Airbnb, Instagram, and the New York Times, to name a few). React brings many advantages to the table, making it a better choice than other frameworks like Angular.js. React is created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook. Fig: MVC architecture Let’s take a look at an Instagram webpage example, entirely built using React, to get a better understanding of how React works. As the illustration shows, React divides the UI into multiple components, which makes the code easier to debug. This way, each component has its property and function. 4

VII VII VV Fig: Instagram Components Now that we know what React is let’s move on and see why React is the most popular front-end library for web application development. 5

IX IX VV

5. Why is React Native perfect for Cross-platform

app development?

Well, we have said it before and we say it even now, yes, React Native is perfect for cross-platform application development because it gives stability to the app and is literally a genius for transposable architecture. It also ensures the app performs optimally and also is not a costly affair. React Native on a comparison to other frameworks uses a native component from API which is why it resembles a native app for that platform. Like Android, iOS or Uwp(Universal Windows Platform) React supports analytical and demonstrative coding which ensures that the code comes out clean. There are some more reasons we believe that React Native will be the best choice for cross-platform application development.  Offers a far more stable app than any framework does  It has a modular architecture  It has a better coding system compared to others for cross-platform development  Warranties optimal performance  Several pre-loaded elements that make coding easier  Flexibility in application development. 7

X X VV

6. Components, State, and Props

6.1 Components

Components are the building blocks of any React application, and a single app usually consists of multiple components. A component is essentially a piece of the user interface. React splits the UI into independent, reusable parts that can be processed separately. There are two types of components in React: Fig: React Components  Functional Components: These components have no state of their own and only contain a render method, so they are also called stateless components. They may derive data from other components as props (properties).  Class Components: These components can hold and manage their state and have a separate render method for returning JSX on the screen. They are also called stateful components, as they can have a state. 8

XII XII VV

6.3 Props

Props are short for properties. It is a React built-in object which stores the value of a tag’s attributes and works similar to the HTML attributes. It provides a way to pass data from one component to other components in the same way as arguments are passed in a function.  Passing props to other components.  Accessing props passed to a component. Example: Props are immutable to the component receiving them. You don't change props passed to a component from within the component. In summary, components, state, and props are React’s fundamental concepts. 10

XIII XIII VV

7. JSX - JavaScript Syntax Extension

At the heart of any basic website are HTML documents. Web browsers read these documents and display them on your computer, tablet, or phone as web pages. During this process, browsers create something called a Document Object Model (DOM), a representational tree of how the web page is arranged. Developers can then add dynamic content to their projects by modifying the DOM with languages like JavaScript. JSX (short for JavaScript extension) is a React extension that makes it easy for web developers to modify their DOM by using simple, HTML-style code. And—since React JS browser support extends to all modern web browsers—JSX is compatible with any browser platform you might be working with. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code. This makes the code easier to understand and debug, as it avoids the usage of complex JavaScript DOM structures. The above code shows how JSX is implemented in React. It is neither a string nor HTML. Instead, it embeds HTML into JavaScript code. 11