React Native Flashcards
What is React Native?
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.
List some benefits of using React Native for building mobile apps?
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
What are hybrid apps?
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).
What are the advantages of hybrid apps over native apps?
Works across multiple platforms.
Unified development.
Faster build and lower cost of development.
Easier to make changes and update.
Why do we use curly brace while importing some library?
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.
What are Refs used for in React Native?
Refs provide you direct access to a DOM element or a components instance.
What does the Gesture Responder System do?
The gesture responder system manages the lifecycle of gestures in an app.
Tell us some options of storing persisting data in a react native app?
Async Storage ("built-in" to React Native) SQLite Realm Firebase MongoDB
What are some ways of styling a react native component?
Inline styling
StyleSheet
Styled Components
How is React Native different from ReactJs?
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.
What is JSX?
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.
What are components?
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
What are the types of data that control a component?
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.
What are props in React Native?
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.
What determines the size of a component and what are the ways?
The height and width determine the size of component on the screen.
Two different ways to set height and width.
Fixed Dimensions
Flex Dimensions