React Native Crash Course Traversy Media com What

  • Slides: 10
Download presentation
React Native Crash Course Traversy. Media. com

React Native Crash Course Traversy. Media. com

What This Guide Covers • What is React Native? • React Native Installation &

What This Guide Covers • What is React Native? • React Native Installation & Setup • Initializing & Running An App • Creating Components • Key React Native UI Features • Key API Features • Much More In The Full Course…

What Is React Native? • Framework for building mobile apps using Java. Script and

What Is React Native? • Framework for building mobile apps using Java. Script and the React library • Build cross platform apps (Android / i. OS) • Uses almost all React. js concepts including components, state, props, lifecycles, etc

Real Mobile Apps • React Native apps are not hybrid apps • Do not

Real Mobile Apps • React Native apps are not hybrid apps • Do not run in a Web. View • Uses the same fundamental building blocks as a native app built with Swift / Objective-C / Java • Better and faster than Cordova / Phone. Gap / Ionic

Advantages Of React Native • Cross Platform • MUCH Less Expensive • Easier to

Advantages Of React Native • Cross Platform • MUCH Less Expensive • Easier to Code • Save Massive Amounts of Time • Open Source

UI Component Examples • Text. Input, Picker, Switch, Slider • Touchable Elements • List.

UI Component Examples • Text. Input, Picker, Switch, Slider • Touchable Elements • List. View & Scroll. View • Alerts, Modals, Progress. Bars • Status. Bar • Tab. Bar. IOS • Toolbar. Android

APIS for Device Interaction • Camera. Roll • Async. Storage • Geolocation • Image.

APIS for Device Interaction • Camera. Roll • Async. Storage • Geolocation • Image. Editor • Push. Notifications • Vibration • Share / Messages

Development Environments & Specs • Windows üAndroid Studio üAndroid SDK (6. 0 Marshmallow) üAndroid

Development Environments & Specs • Windows üAndroid Studio üAndroid SDK (6. 0 Marshmallow) üAndroid AVD Mac üXcode üSimulator

import React, { Component } from 'react'; import { App. Registry, Text, View }

import React, { Component } from 'react'; import { App. Registry, Text, View } from 'react-native'; class My. App extends Component { render() { return ( <View> <Text>Hello world</Text> </View> ); } } App. Registry. register. Component(‘My. App', () => My. App);

Let’s Code…

Let’s Code…