Getting start with React Native

vishnu — Mon, 23 Oct 2017 04:33:07 +0000

React Native lets you build mobile apps using only JavaScript. A React Native app is a real mobile app. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

Installation

Using Create React Native App we can start building a new React Native application easily. It allows you to start a project without installing or configuring any tools to build native code – no Xcode or Android Studio installation required. Assuming that you have Node installed, you can use npm to install the create-react-native-app command-line utility:

$ npm install -g create-react-native-app

Try creating a new project:-

$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

This will start a development server for you, and print a QR code in your terminal. To run your app, Install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer. Using the Expo app, scan the QR code from your terminal to open your project.

Basic App

In the App.js file you can see:-

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends Component {
  render() {
    return (
      Hello world!
    );
  }
}

import, from, class, extends, and the () => syntax in the example above are all ES2015 (also known as ES6) features. The unusual thing in this code example is.Hello world! This is JSX – a syntax for embedding XML within JavaScript. is a built-in component that just displays some text. This code is defining, App a new Component . Anything you see on the screen is some sort of component. A component can be pretty simple – the only thing that’s required is a render function which returns some JSX to render. You can also write style in App.js file.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#4286f4',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

To modify your app, you can edit App.js file. The application should reload automatically once you save your changes.

Create React Native App

Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment. Once you’ve set these up, you can launch your app on an Android Virtual Device by running, npm run android or on the iOS Simulator by running npm run ios (macOS only).

Pros

JavaScript − You can use the existing JavaScript knowledge to build native mobile apps.
Community − The community around React and React Native is large, and you will be able to find any answer you need.
Code sharing − You can share most of your code on different platforms.

Cons

Native Components − If you want to create a native functionality which is not created yet, you will need to write some platform specific code.

React Native is focused solely on building a mobile UI. Compared with JavaScript frameworks like AngularJS or MeteorJS, React Native is UI-focused, making it more like a JavaScript library than a framework. The resulting UI is highly responsive and feels fluid thanks to asynchronous JavaScript interactions with the native environment. This means the app will have quicker load times than a typical hybrid app, and a smoother feel.

Reference

https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html https://facebook.github.io/react-native/docs/tutorial.html#content]]>