React native.key

PRAVEEN PRASAD
CLEVERO INC.
AN INTRODUCTION TO
REACT NATIVE
CLEVERO ENGINEERING
OCT 2018

PRAVEEN PRASAD. CLEVERO INC. OCT 2018
ROADMAP
▸ What, Why ?
▸ React and React Native
▸ Who?
▸ Alternatives?
▸ How to start?
▸ Simple Todo APP
▸ Opinion
▸ Further reading
▸ Questions
2

WHAT IS REACT NATIVE?
▸ An open source, cross-platform framework for building
native mobile apps with Javascript and React, letting
you compose a rich mobile UI from declarative
components.
3

native mobile apps with Javascript and React, letting
you compose a rich mobile UI from declarative
components.
▸ You don't build a "mobile web app", an "HTML5 app", or a
"hybrid app". You build a real mobile app that's
indistinguishable from an app built using Objective-C or
Java.
4

native mobile apps with Javascript and React, letting you
compose a rich mobile UI from declarative components.
▸ You don't build a "mobile web app", an "HTML5 app", or a
"hybrid app". You build a real mobile app that's
indistinguishable from an app built using Objective-C or Java.
▸ Uses the same fundamental UI building blocks as regular
iOS and Android apps. You just put those building blocks
together using JavaScript and React.
▸ Built by Facebook
5

WHY?
▸ Javascript is easy to learn
▸ Learn once write anywhere. No need to learn objective-c,
swift or java separately
▸ Build real native mobile apps
▸ Fast feedback cycle with hot reloading. No need to wait for
recompiling
▸ Code sharing between platforms helps reduce
development cost
6

TRIVIA
▸ People have achieved up to 80% of code sharing between
platforms
7

REACT COMPONENTS (REACT AND REACT NATIVE )
8
In react, UI is function of state and props
REACT
COMPONENT
properties,
state
Your react component decide how it should look based on props and states
and spits out a description of the UI. You don’t touch the webpage. This thing
makes possible for us to have react-native

REACT / REACT NATIVE COMPONENT (REACT AND REACT NATIVE )
9
REACT JS
BROWSER
DOM
REACT
NATIVE
IOS
class Hello extends Component {
render() {
return (<div>Hello</div>
)
}
}
ANDROID
SOMEWHERE
ELSE
class Hello extends Component {
render() {
return (<View>
<Text>Hello</Text>
</View>
)
}
}
React Component
React Native Component
Bridges

BROWSER VS DOM (REACT AND REACT NATIVE )
▸ <div>
▸ <img>
▸ <span>, <p>
▸ <ul>,<ol>
▸ <button>
10
▸ <View>
▸ <Image>
▸ <Text>
▸ <FlatList>, <SectionList>
▸ <Button>,
<TouchableHighlight>…
THEY WILL INVOKE REAL PLATFORM API

STYLING (REACT AND REACT NATIVE )
11
<div style={{
color:'red',
fontSize:24
}}>
Hello
</div>
<View>
<Text style={{
color:'blue',
fontSize:14
}}>
Hello
</Text>
</View>
React Component
React Native Component
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
width: '100%'
},
});
<View style={styles.container}>
</View>
React Native Component (recommended way)
What is Stylesheet and why?

STYLE SHEET (REACT AND REACT NATIVE )
12
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
}
});
▸ Style will be referred by ID
instead of creating a new style
object every time, hence
optimized
▸ All styles are send once through
the bridge. All subsequent uses
are going to refer an id (not
implemented yet).
A StyleSheet is an abstraction similar to CSS StyleSheets
Learn ﬂexbox and your life will be lot easier
All css props are not
available in React Native
Unlike web browser Flexbox has default direct of column

USING OPEN SOURCE LIBRARIES/COMPONENTS (REACT AND REACT NATIVE )
Pure javascript/react-native libraries will work as expected
13
Installing a package
> yarn add axios
> yarn add lodash
> yarn add redux
> yarn add something_else
Using a package
import _ from ‘lodash’
import axios from ’axios’
let result = await axios({url:’xyz.com’})
result = result.map(something)
….. and so on as expected
for some libraries yo might have to run
react-native link to link native dependencies

WHO IS USING? 14
Famous apps built with react native
• Walmart
• Airbnb (stopped using)
• Bloomberg
• Sound Cloud
• Wix
• Tesla
• Uber Eats
• Palantir
………
Myntra

ALTERNATIVES?
▸ Ionic
▸ Nativescript
15

HOW TO START
1. MacOS is required to build iOS apps
2. Install nodejs
3. Install react native: npm install -g react-native-cli (yarn global add
react-native-cli)
4. Install xcode (for IOS), Java8 or newer and android SDK (for Android)
5. Create new app: react-native init <project_name> (eg: react-native
init MyCoolApp1)
6. Goto app: cd <project_name>
7.Start app: react-native run-ios / react-native run-android (start app)
16

SIMPLE TODO APP 17

BOX DESIGN OF APP 18
TEXTBOX
BUTTON
<View />
<TouchableHighlight />
<Text />
TEXT
TEXT
TEXT
Flexbox is your friend

OPIONION
▸ We at Clevero should heavily invest in React Native
▸ We should even build our staticphone app using React
Native
19

FURTHER READING
▸ How to run app on local device
▸ How to make network request
▸ How to create native module
▸ How to store data on device
▸ How to debug
▸ How to handle gesture and other device capabilities
▸ How to integrate with an existing application
▸ How publish your app
20

USEFUL LINKS
▸ Slide link
▸ GitHub link
21

THANKS
Praveen Prasad
Clevero Inc.

React native.key

More Related Content

What's hot (20)

Similar to React native.key (20)

Recently uploaded (20)

React native.key