React native presentation, I did in my company.

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

2. 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

3. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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

4. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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.
▸ 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

5. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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.
▸ 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

6. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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

7. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
TRIVIA
▸ People have achieved up to 80% of code sharing between
platforms
7

8. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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

9. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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

10. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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

11. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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?

12. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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 flexbox 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

13. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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

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

15. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
ALTERNATIVES?
▸ Ionic
▸ Nativescript
15

16. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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

17. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
SIMPLE TODO APP 17

18. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
BOX DESIGN OF APP 18
TEXTBOX
BUTTON
<View />
<TouchableHighlight />
<Text />
TEXT
TEXT
TEXT
Flexbox is your friend

19. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
OPIONION
▸ We at Clevero should heavily invest in React Native
▸ We should even build our staticphone app using React
Native
19

20. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
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

21. PRAVEEN PRASAD. CLEVERO INC. OCT 2018
USEFUL LINKS
▸ Slide link
▸ GitHub link
21

22. QUESTIONS?

23. THANKS
Praveen Prasad
Clevero Inc.