Introduction to react and react native setup guide

React is a structure made by Facebook for information-driven web interfaces. React gives a component driven architecture design which utilizes a revelatory language structure and is effectively extensible. Get proper and the best training in react native and get updated in new trends.

So what is the contrast among React and React Native?

React was initially made for web UIs. The mantra behind React has been “Learn Once, Write Anywhere”.

Facebook’s objective has been to “have the capacity to build up a steady arrangement of objectives and technologies that let us manufacture applications utilizing a similar arrangement of standards over whatever platform we need.”

Given this all-encompassing objective they set out to apply a similar arrangement of standards, for example, the virtual dom, stateful components, layout engine, and numerous others to the iOS and Android stages.

The advantage of React and React Native is that in the event that you see how to construct a React Native application for iOS, you see how to build a React Native application for Android. It’s adapt once, compose anyplace.

Libraries like Phonegap give a wrapper around a web UI utilizing HTML, CSS and JavaScript. React Native rather gives a virtual DOM portrayal which at that point renders local controls. React Native can take local stage parts like sliders, switches, marks, tab bars and envelop them by React segment partners.

ECMAScript 6

To introduce React Native adhere to the directions on their site. On the off chance that you are composing an iOS application, at that point you will require a Mac so you can run Xcode, after all we are making a local application.

Once React Native is installed and you have created a sample project you will notice two separate index JS files for each platform: index.ios.js and index.android.js.

Let’s take a look at the index.ios.js file:

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
export default class MyProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('MyProject', () => MyProject);

The primary thing you will see is some odd JavaScript language structure in the event that you have not as of now observed this. This is ECMAScript 6 or ES6 which is the new form of JavaScript has a great deal of new JavaScript language highlights like class grammar, destructuring, properties, and so on.

Let’s take a look at the second import statement.

import { AppRegistry,
            StyleSheet,
            Text,
            View
           } from 'react-native';

ES6 provides short form for declaring variables called destructuring.

The above statement could have been written individually as:

var ReactNative = require('react-native');
var AppRegistry = ReactNative.AppRegistry;
var StyleSheet = ReactNative.StyleSheet;
var Text = ReactNative.Text;
var View = ReactNative.View;

As you can see the ES6 feature of destructuring saves a lot of typing and lines of code.

export default class MyProject extends Component {

One more ES6 include which enables you to make objects from class definitions. Here our group MyProject is acquiring from the React structures class Component. A segment gives you a chance to part your UI into free units which can be effectively reused.

Next the render work returns React components depicting what ought to be shown on screen. At last, you probably seen some language structure that resembles HTML markup.

For example:

<View style={styles.container}>
         <Text style={styles.welcome}>Welcome to React Native!</Text>
</View>

This syntax is called JSX, which is an extension to JavaScript. React uses it to describe what the user interface should look like.

Components

React depends on a segment design. Each UI component is a segment which can be styled and sponsored by an information source.

Going back to our previous example:

<View style={styles.container}>
     <Text style={styles.welcome}>Welcome to React Native!</Text>
</View>

Here React Native takes this virtual DOM portrayal and renders local parts. The View renders a UIView for iOS and local View in Android. What’s more, it takes a gander at Text and renders a UILabel for iOS and TextView for Android.

Henceforth the reason that it is known as a virtual DOM since it is a nonexclusive portrayal of what your UI will resemble autonomous of the two stages. React Native at that point renders the local control dependent on your UI markup.

Every part has a style trait also, which can be characterized either inside a similar document or totally in a different record. The stylesheet provides CSS style grammar and utilizations Flexbox for design. Flexbox gives an effective method to spread out, adjust and circulate space among things in a compartment, notwithstanding when their size is obscure or potentially unique. Utilizing Flexbox for designs gives a noteworthy advantage since layout engines on portable stages are a torment to work with, particularly for complex designs.

State

No article about React or React Native would be finished without discussing state. A part has kinds of information authoritative: state and props. Consider props properties of a part which are characterized while making a segment. For instance, the content for a mark or picture URL for a picture part. These stay fixed for the duration of the life of a part.

Then again, state is dynamic and can drive what content should be shown inside a segment. For instance, you download information and populate a rundown. Or then again make a rundown of errands utilizing a ListView which can be progressively refreshed as undertakings are made, refreshed or erased without having to re-render the UI physically or not withstanding monitoring the UI components.

Conclusion

React Native isn’t altogether different from React. On the off chance that you have taken in the previous, at that point it’s genuinely simple for you to make a versatile application utilizing React Native. Some information of the local UI segments would be useful so you see how to utilize them and comprehend their constraints.
React Natives benefits over local iOS advancement are: quick application emphasis, present day JavaScript and clear style rules like CSS. What’s more, not to overlook Flexbox for UI format. Get the best react native training from experienced one’s for more details.

Leave a Reply

Your email address will not be published. Required fields are marked *

contact us

Kochi

#C4, 4th Floor, Heavenly Plaza, Vazhakkala, Kochi - 682021

+91 7994884447

Send us a Mail using the
form Below

(+91)-7994-884-447