23

React Native Eugene Zharkov [email protected] @2j2e

Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Download PDF Report

Upload
intersog
View
233
Download
3

Tags:

Embed Size (px)

Citation preview

Page 1: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

React NativeEugene Zharkov

[email protected] @2j2e

mailto:[email protected]

Page 2: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

We can write mobile applications...

Page 3: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

using ReactJS...

Page 4: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

using HTML principals...

Page 5: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

using CSS principals...

Page 6: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

without HTML...

Page 7: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

without CSS...

Page 8: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

without WebView

Page 9: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Supported platforms iOS and Android

Page 10: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Supported platforms iOS and Androidnot available

Page 11: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Under the hood

React JS JavaScriptCore Native ComponentsRCTBridge

Page 12: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Components• ActivityIndicatorIOS

• DatePickerIOS

• Image

• ListView

• MapView

• Navigator

• NavigatorIOS

• PickerIOS

• ScrollView

• SliderIOS

• SwitchIOS

• TabBarIOS

• TabBarIOS.Item

• Text

• TextInput

• TouchableHighlight

• TouchableOpacity

• TouchableWithoutFeedback

• View

• WebView

Page 13: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Components

Page 14: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Moving to the project

Page 15: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Setup

Page 16: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Setup↬ Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

↬ Node.js brew install node

↬ Watchman brew install --HEAD watchman

↬ Google Chrome

↬ React Native CLI npm install -g react-native-cli

Page 17: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Includes

Page 18: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

JSX

Page 19: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Styles

Page 20: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Actions

Page 21: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Actions

Page 22: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

Debug

Page 23: Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack'n'Tell JavaScript - 2015.05.16

The End

HPI hack'n'Tell Hackdays

HPI hack'n'Tell Hackdays

Technology

Say “No” to Complexity! - Jfokus · Install React with npm install --save react react-dom react-dom is used when render target is web browsers Can use browser.js to compile React

Say “No” to Complexity! - Jfokus · Install React with npm install --save react react-dom react-dom is used when render target is web browsers Can use browser.js to compile React

Documents

Fitc React Spotlight 2016 - React for Vikings

Fitc React Spotlight 2016 - React for Vikings

Technology

ReAct Strategic Planreactgroup.org/.../ReAct-Strategic-Plan-2015-2019.pdf · 2015 - 2019 3 ReAct Strategic Plan. 4 2015 - 2019 ReAct Strategic Plan ABOUT ReAct ... ReAct articulated

ReAct Strategic Planreactgroup.org/.../ReAct-Strategic-Plan-2015-2019.pdf · 2015 - 2019 3 ReAct Strategic Plan. 4 2015 - 2019 ReAct Strategic Plan ABOUT ReAct ... ReAct articulated

Documents

Using React and Office UI Fabric React - Binary Bits · Using React and Office UI Fabric React Components In this lab you work with React and the the SharePoint Framework (SPFx) to

Using React and Office UI Fabric React - Binary Bits · Using React and Office UI Fabric React Components In this lab you work with React and the the SharePoint Framework (SPFx) to

Documents

November 4 a 9HWHUDQVö Day assembly on WPMS honored ... › WestPointMS › upload › November...REACT channel that includes, Kids React, Teens React, Adults React and Elders React

November 4 a 9HWHUDQVö Day assembly on WPMS honored ... › WestPointMS › upload › November...REACT channel that includes, Kids React, Teens React, Adults React and Elders React

Documents

DANIEL GRAHAM PHD REACT NATIVE DEVELOPMENTimport * as React from 'react'; import { Text, View, StyleSheet } from 'react-native'; export default class App extends React.Component {render()

DANIEL GRAHAM PHD REACT NATIVE DEVELOPMENTimport * as React from 'react'; import { Text, View, StyleSheet } from 'react-native'; export default class App extends React.Component {render()

Documents

React Quickly: Painless web apps with React, JSX, Redux ... · Meeting React 3 2 Baby steps with React 27 3 Introduction to JSX 41 4 Making React interactive with states 69 5 React

React Quickly: Painless web apps with React, JSX, Redux ... · Meeting React 3 2 Baby steps with React 27 3 Introduction to JSX 41 4 Making React interactive with states 69 5 React

Documents

Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16

Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16

Education

React Native copy remco - tweakers.net Suijten - React Native.pdf · React Native Integration with Existing Apps >create-react-native-app AwesomeProject

React Native copy remco - tweakers.net Suijten - React Native.pdf · React Native Integration with Existing Apps >create-react-native-app AwesomeProject

Documents

Electric Actuators...Electric Actuators REact Electric Actuators 30 Series REact 30E- 028 REact 30E- 074 REact 30E- 112 REact 30 DC Electric actuator for control and shut/off valves

Electric Actuators...Electric Actuators REact Electric Actuators 30 Series REact 30E- 028 REact 30E- 074 REact 30E- 112 REact 30 DC Electric actuator for control and shut/off valves

Documents

Codemobiles React - iOS, Android, Angular, React, Vue.JS

Codemobiles React - iOS, Android, Angular, React, Vue.JS

Documents

Uracil-DNA glycosylase: Structural, thermodynamic and kinetic aspects of lesion search and recognition. Zharkov DO, MechetinG V, Nevinsky GA

Uracil-DNA glycosylase: Structural, thermodynamic and kinetic aspects of lesion search and recognition. Zharkov DO, MechetinG V, Nevinsky GA

Documents

Pure React: A step-by-step guide to mastering React

Pure React: A step-by-step guide to mastering React

Documents

React native - React(ive) Way To Build Native Mobile Apps

React native - React(ive) Way To Build Native Mobile Apps

Software

React in Native Apps - Meetup React - 20150409

React in Native Apps - Meetup React - 20150409

Software

React Training - finnovate.io · React Training Delivered by finnovate.io. Prerequisite ... Introduction to React Delivered by finnovate.io. React Overview ... The view is React Redux

React Training - finnovate.io · React Training Delivered by finnovate.io. Prerequisite ... Introduction to React Delivered by finnovate.io. React Overview ... The view is React Redux

Documents

Putting the Native in React Native - React Native Boston

Putting the Native in React Native - React Native Boston

Technology

Алексей Косинский "React Native vs. React+WebView"

Алексей Косинский "React Native vs. React+WebView"

Technology

React Native - cursoapp.files.wordpress.com · React Native O React Native é instalado pelo comando "npm install -g react-native-cli", portanto, é necessário antes a instalação

React Native - cursoapp.files.wordpress.com · React Native O React Native é instalado pelo comando "npm install -g react-native-cli", portanto, é necessário antes a instalação

Documents

Home – ReAct - Championing African Action on …...ReAct which is a catalyst for policy action on Antibiotic Resistance (ABR). ReAct offered the opportunity ReAct offered the opportunity

Home – ReAct - Championing African Action on …...ReAct which is a catalyst for policy action on Antibiotic Resistance (ABR). ReAct offered the opportunity ReAct offered the opportunity

Documents

React Native - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../react-10.pdf · React Navigation •React Navigation is not from facebook; it’s created by the React Native community

React Native - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../react-10.pdf · React Navigation •React Navigation is not from facebook; it’s created by the React Native community

Documents

p0 - CodeMobiles · 1. Setup and Introduction : React-Native Course Introduction NodeJS Install React-Native & Watchman Visual Studio Install and React-Native Extension Pack React-Native

p0 - CodeMobiles · 1. Setup and Introduction : React-Native Course Introduction NodeJS Install React-Native & Watchman Visual Studio Install and React-Native Extension Pack React-Native

Documents

Symfony2: Quick Start (by Kirill Shtimmerman) - Hack'n'Tell PHP - 2015.09.26

Symfony2: Quick Start (by Kirill Shtimmerman) - Hack'n'Tell PHP - 2015.09.26

Education

React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code this.sendEvent('next')} title='Verder'/> React

React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code this.sendEvent('next')} title='Verder'/> React

Documents

Building a universal application with React and React Na- tive

Building a universal application with React and React Na- tive

Documents

React - xgfexgfe.github.io/uploads/felix/react/react-first-kiss.pdf · 2020-02-20 · Facebook Flux, Redux, Reﬂux. J o - react-with-addons ... • React d ± Æ § • webpack ñ

React - xgfexgfe.github.io/uploads/felix/react/react-first-kiss.pdf · 2020-02-20 · Facebook Flux, Redux, Reﬂux. J o - react-with-addons ... • React d ± Æ § • webpack ñ

Documents

Documents

React 16.x Way Beyond Hooks · contextType createRef() React Flare Lifecycle Changes React Fusion memo() Migrating Stuff act() lazy() React Fire React Native Fabric react-cache Profiler

React 16.x Way Beyond Hooks · contextType createRef() React Flare Lifecycle Changes React Fusion memo() Migrating Stuff act() lazy() React Fire React Native Fabric react-cache Profiler

Documents

JavaScript, React Native and Performance at react-europe 2016

JavaScript, React Native and Performance at react-europe 2016

Technology