Slide 1
Slide 1 text
A framework for building native apps using React
React Native
Slide 2
Slide 2 text
Paolo_Rovella
JS Frontend Jr Developer at LinkMe
Twitter: @paolo_rovella
In love with React and sushi, I'm an
incurable tv shows binge-watcher.
41
2
Slide 3
Slide 3 text
Ṁichele_Bertoli
Senior Front End Developer at YPlan
Twitter: @MicheleBertoli
React fanboy, BrewDog supporter,
WEBdeLDN reprezent.
41
3
Slide 4
Slide 4 text
_What's React Native?
React Native
Slide 5
Slide 5 text
A framework for building
native apps using React.
React Native
41
5
Slide 6
Slide 6 text
Features()
React Native
Slide 7
Slide 7 text
iOS and Android support
• No more hybrid
• Learn once, run everywhere
• Shareable codebase
React Native
41
7
Slide 8
Slide 8 text
React Native
41
8
JavaScript for native development
• Objective-C/Swift or Java/Kotlin are unnecessary
• Some native features not implemented (yet)
• Open Source / Community
• rnpm
Slide 9
Slide 9 text
React Native
41
9
Styling using CSS in JS
• StyleSheet
• Inline Styles
• Flexbox
Slide 10
Slide 10 text
React Native
.Numbers
Slide 11
Slide 11 text
React Native
41
11
Version 0.24.1
0.24.1 is the latest of 97 releases
Slide 12
Slide 12 text
React Native
41
12
Semver
Today we're announcing that we're switching to major revisions for
React. The current version is 0.14.7.
The next release will be: 15.0.0
Today we're announcing a switch to major revisions for Jest with Jest
11.0 being the first major release.
Slide 13
Slide 13 text
React Native
41
13
Open Source
• 30k+ stars
• 600+ contributors
• 500+ open issues
Slide 14
Slide 14 text
React Native
41
14
20K
40K
50K
80K
Apr 2015
May
Jun
Jul
Aug
Set
Oct
Nov
Dec
Jan 2016
Feb
Mar
Downloads per month
Slide 15
Slide 15 text
React Native
AppStore
Slide 16
Slide 16 text
React Native
41
16
{Show me the code}
Slide 17
Slide 17 text
37
15
React
class AwesomeComponent extends Component {
render() {
return (
![]()
Welcome to React Native!
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
image: {
height: 60,
marginRight: 20,
width: 60,
},
text: {
color: '#05A5D1'
},
});
AppRegistry.registerComponent('AwesomeComponent', () => AwesomeComponent);
Slide 18
Slide 18 text
React Native
41
18
Slide 19
Slide 19 text
React Native
41
19
Components 1
• Declarative
• Predictable
• Reusable
• Testable
Slide 20
Slide 20 text
React Native
41
20
Components 2
• Props/State
• Lifecycle
• Stateless
• Separation of concerns
Slide 21
Slide 21 text
The_Good_Parts
React Native
Slide 22
Slide 22 text
41
22
It’s JavaScript!
If you know Javascript and a little bit of React,
you can write a React Native app in a few minutes.
React Native
Slide 23
Slide 23 text
React Native
41
23
Flexbox
Flexbox provides an efficient way to layout, align
and distribute space among items in a container.
Slide 24
Slide 24 text
React Native
Flexbox flex-direction
.box {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}
1
2
3
Slide 25
Slide 25 text
41
25
React Native
flex-direction
Slide 26
Slide 26 text
React Native
Flexbox justify-content
.box {
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around
}
1
2
3
Slide 27
Slide 27 text
41
27
React Native
flex-start
flex-end
center
space-between
space-around
Slide 28
Slide 28 text
React Native
Flexbox align-items
.box {
display: flex;
align-items: flex-start | flex-end | center | baseline | stretch
}
1
2
3
4
Slide 29
Slide 29 text
41
29
React Native
flex-start
center
baseline
flex-end
stretch
text text text text
Slide 30
Slide 30 text
41
30
React Native
Flexbox React Native
![]()
{title}
{year}
const styles = {
row: {
backgroundColor: ‘white’,
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 6
},
};
Slide 31
Slide 31 text
41
31
React Native
Into the Wood
2014 - Critics 71%
Slide 32
Slide 32 text
React Native
41
32
Hot Module Replacement
• Updated modules injected into the active runtime
• Components updated without a full refresh
• Different from LiveReload
Slide 33
Slide 33 text
React Native
41
33
Community
• Support
• Hype
• A lot of cool devs involved
Slide 34
Slide 34 text
The-Bad-Parts
React Native
Slide 35
Slide 35 text
React Native
41
35
Xcode
• Required
• ~4GB
Slide 36
Slide 36 text
React Native
41
36
Hard to test (components)
• No official docs on components testing
• Testing using jest broken since 0.14.0
• Mock
Slide 37
Slide 37 text
React Native
Styling is inconsistent
Slide 38
Slide 38 text
React Native
41
38
Bad naming
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
Slide 39
Slide 39 text
React Native
Slide 40
Slide 40 text
React Native
41
40
Guestar
https://github.com/paolorovella/guestar
https://www.youtube.com/watch?v=ix5QzikOTjk
Slide 41
Slide 41 text
React Native
7
Any questions?
Slide 42
Slide 42 text
7