React Native Flashcards

1
Q

What is React Native?

A

React Native is a mobile app development framework that enables the development of multi-platform Android and iOS apps using native UI elements.
It is based on the JavaScriptCore runtime and Babel transformers. With this setup react native supports new JavaScript (ES6+) features, e.g. arrow functions, async/await etc.
This famous framework for mobile app development started in the summer of 2013 as Facebook’s internal hackathon project.
Its first public preview was released in January of 2015 at Reactjs Conference and in March of 2015, Facebook made React Native open and available on GitHub.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

List some benefits of using React Native for building mobile apps?

A
Known for Optimal Performance
Can Reuse the Codes and Pre-Developed Components
Large Community of Developers
Advantage of Live and Hot Reloading
Cost Effective Solution
Offers Simple User Interface
Support for Third-Party Plugins
Modular Architecture
Providing Handy Solutions and Libraries
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are hybrid apps?

A

Hybrid mobile apps are applications that are installed on a device, just like any other app.
Hybrid apps are deployed in a native container that uses a mobile WebView object. When the app is used, this object displays web content thanks to the use of web technologies (CSS, JavaScript, HTML).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are the advantages of hybrid apps over native apps?

A

Works across multiple platforms.
Unified development.
Faster build and lower cost of development.
Easier to make changes and update.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Why do we use curly brace while importing some library?

A

This is called Destructuring. Curly braces are used to import small pieces of library. In above example we just want to make use of Text and StyleSheet component from react-native, so they are put in curly braces.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are Refs used for in React Native?

A

Refs provide you direct access to a DOM element or a components instance.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does the Gesture Responder System do?

A

The gesture responder system manages the lifecycle of gestures in an app.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Tell us some options of storing persisting data in a react native app?

A
Async Storage ("built-in" to React Native)
SQLite
Realm
Firebase
MongoDB
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are some ways of styling a react native component?

A

Inline styling
StyleSheet
Styled Components

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How is React Native different from ReactJs?

A

ReactJS React has as its main focus Web Development.

React’s virtual DOM is faster than the conventional full refresh model, since the virtual DOM refreshes only parts of the page.
We use div, p, span, etc. HTML tags to build the UI of the web application.
You can reuse code components in React, saving you a lot of time. (You can in React Native too.)
As a business: The rendering of your pages completely, from the server to the browser will improve the SEO of your web app.
It improves the debugging speed making your developer’s life easier.
You can use hybrid mobile app development, like Cordova or Ionic, to build mobile apps with React, but is more efficiently building mobile apps with React Native from many points.
React Native An extension of React, niched on Mobile Development.

Its main focus is all about Mobile User Interfaces.
iOS & Android are covered.
Reusable React Native UI components & modules allow hybrid apps to render natively.
We use View, Text imported from React Native library.
No need to overhaul your old app. All you have to do is add React Native UI components into your existing app’s code, without having to rewrite.
Doesn’t use HTML to render the app. Provides alternative components that work in a similar way, so it wouldn’t be hard to understand them.
Because your code doesn’t get rendered in an HTML page, this also means you won’t be able to reuse any libraries you previously used with React that renders any kind of HTML, SVG or Canvas.
React Native is not made from web elements and can’t be styled in the same way.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is JSX?

A

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code.
The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are components?

A

Components are the building blocks of any React application.
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
React Native provides a number of built-in components. Some are:-
Basic Components
User Interface
List Views
iOS-specific
Android-specific

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are the types of data that control a component?

A

There are two types of data that control a component: props and state.
props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are props in React Native?

A

The properties of React Native components are simply pronounced as props.
In React Native, most of the components can be customized at the time of their creation with different parameters. These parameters are known as props.
They are immutable, and they cannot be changed.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What determines the size of a component and what are the ways?

A

The height and width determine the size of component on the screen.
Two different ways to set height and width.
Fixed Dimensions
Flex Dimensions

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

When would you use ScrollView over FlatList or vice-versa?

A

Do you need to render a list of similar items from an array or the data is very big? Use FlatList
Do you need to render generic content in a scrollable container and the data is small? Use ScrollView

17
Q

How do you dismiss the keyboard in react native?

A

Using Keyboard.dismiss()

18
Q

What are the advantages of native apps over hybrid apps?

A

They work efficiently as they are built for that specific platforms
Native apps are responsive on all the platform-specific devices
They are very fast and the best in the app performance
Native apps better integrate with mobile hardware
They have interactive and intuitive User Interface (UI) and User Experience (UX) as per the user expectations based on specific platforms
Some of the Native mobile apps work even without the Internet connection
Native apps are secured and reliable
They can easily access or utilize the other device-specific capabilities like GPS, Camera, Contacts, etc.