Kick-start your mobile app using

React Native

Local Hack Day

slides.com/realslimshanky/kickstartreactnative

Something About Me

Shashank Kumar

Computer Science Undergraduate Student

Volunteer for multiple Delhi-NCR based communities

Open Source Contributor

https://blog.shanky.xyz

Why React Native?

Comes with all the goodness of ReactJS

A whole package of dedicated debugging tools

Great community folks to help you along the way

Is the power behind applications like Facebook, Instagram, Airbnb, Tesla, Skype and much more

Prerequisites

ES6 - Variable Declaration

var a = 1

var b = 'abc'

 

b = 'dce'

const a = 1

let b = 'abc'

 

b = 'dce'

Prerequisites

ES6 - Fat Array Function

var a = function a (x) {

    return (x * 2);

}

x =>  (x * 2) ;

var a = function a (x , y) {

    y = x * x;

    return y;

}

(x ,y) =>  {

    y = x * x;

    return y;

};

Prerequisites

ES6 - Deconstruction

var a = [1 , 3, 7];

var b = a[0];

var c = a[1];

var d = a[2];

const a = [1, 3, 7];

const [b, c, d] = a;

or

const [b, ...c] = a;

Prerequisites

Install NodeJS

Dependencies

npm install create-react-native-app

Install Expo from Apple Store or Google Play

Let's Begin

Creating Your App
create-react-native-app projectName

Move into your project directory
cd projectName

Deploy App
npm start

Let's Begin

Open Expo app in your mobile

Scan QR Code on the terminal using the app

Cheers!

So What Actually Happened?

JS Code

React Native Server & Packager

Connected Device

JS Core

React Components

React Components

State

Props

View

Text

React Components

React Lifecycle

Constructor

componentWillMount()

render()

componentDidMount()

Thank You

@realslimshanky

Made with Slides.com