SlideShare a Scribd company logo
1 of 78
Download to read offline
Introduction
to
React Native
@EliSawic
Instagram
@EliSawic
Airbnb
@EliSawic
Uber
@EliSawic
Facebook
@EliSawic
React Native
@EliSawic
Me?
@EliSawic
About me
Eliasz Sawicki
Blog: www.eliaszsawicki.com
Twitter: @EliSawic
www.brightinventions.pl
@EliSawic
Share a story
@EliSawic
iOS
@EliSawic
React
@EliSawic
React
export default class CustomView extends Component {
render() {
return (
<div>
<h1>Hello world!</h1>
<h2>{this.state.message}</h2>
<a href=""
onClick={...}>
Click me!
</a>
</div>
)
}
}
@EliSawic
React
export default class CustomView extends Component {
changeMessage() {
this.setState({message: 'Test message'})
}
render() {
return (
<div>
<h1>Hello world!</h1>
<h2>{this.state.message}</h2>
<a href=""
onClick={...}>
Click me!
</a>
</div>
)
}
}
@EliSawic
React
<h2>{this.state.message}</h2>
@EliSawic
React
React.createElement("h2", null, this.state.message)
@EliSawic
Feelings
@EliSawic
Quick feedback loop
@EliSawic
Hot reloading
@EliSawic
Home
@EliSawic
Missing something...
@EliSawic
React
@EliSawic
React Native
@EliSawic
Declarative
components
@EliSawic
Declarative components
export default class CustomView extends Component {
render() {
return (
<View>
<Text>Hello world!</Text>
<Text>{this.state.message}</Text>
<Button onClick={...}>
Click me!
</Button>
</View>
)
}
}
@EliSawic
JS bundle
@EliSawic
iOS/Android
@EliSawic
Bridge
@EliSawic
The ecosystem
@EliSawic
Learn once
Write everywhere
@EliSawic
General skills
@EliSawic
I want to start coding!
@EliSawic
Bring your own tools
@EliSawic
Text editor
@EliSawic
Starting a project
@EliSawic
You may feel lost
@EliSawic
create-react-native-
app
@EliSawic
What language
do I use?
@EliSawic
JavaScript
@EliSawic
I do not like
JavaScript
@EliSawic
TypeScript
@EliSawic
Architectural
choices
@EliSawic
Redux
@EliSawic
Can I code now?
@EliSawic
Workflow
@EliSawic
Hot reloading
@EliSawic
Testing code
@EliSawic
Unit tests
@EliSawic
UI testing
@EliSawic
Snapshot tests
@EliSawic
Storybook
@EliSawic
Work division
@EliSawic
It looks fun!
@EliSawic
Be aware of...
@EliSawic
DIY apprach
@EliSawic
It's still evolving
@EliSawic
It's still evolving
...
if [[ "$CONFIGURATION" = "Debug" && ! "$PLATFORM_NAME" == *simulator ]]; then
...
@EliSawic
You develop
for different
platforms
@EliSawic
@EliSawic
Dependencies
@EliSawic
Bridging
dependencies
@EliSawic
Debugging
@EliSawic
Navigation
@EliSawic
Don't worry
@EliSawic
Sharing code
@EliSawic
Active community
@EliSawic
Great tooling
@EliSawic
Feeling productive
@EliSawic
Can my team get into
React Native?
@EliSawic
Learning React Native
@EliSawic
You can use it with
native tools
@EliSawic
Are you flexible with
the app?
@EliSawic
Not tied to solution
@EliSawic
React Native
@EliSawic
Looking for
a silver bullet
@EliSawic
Not a silver bullet
@EliSawic
Strong tool
@EliSawic
Developer
experience
@EliSawic
@EliSawic
www.eliaszsawicki.com
@EliSawic

More Related Content

Similar to Introduction to react native

Sperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copySperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copySalvatore Iaconesi
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)jeresig
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Jack Franklin
 
React native introduction
React native introductionReact native introduction
React native introductionInnerFood
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Elyse Kolker Gordon
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsHolly Schinsky
 
React native introduction
React native introductionReact native introduction
React native introductionInnerFood
 
Android accessibility for developers and QA
Android accessibility for developers and QAAndroid accessibility for developers and QA
Android accessibility for developers and QATed Drake
 

Similar to Introduction to react native (12)

jQuery for Seaside
jQuery for SeasidejQuery for Seaside
jQuery for Seaside
 
Sperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copySperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copy
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
 
React native introduction
React native introductionReact native introduction
React native introduction
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
 
React outbox
React outboxReact outbox
React outbox
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
 
React native introduction
React native introductionReact native introduction
React native introduction
 
Android accessibility for developers and QA
Android accessibility for developers and QAAndroid accessibility for developers and QA
Android accessibility for developers and QA
 

More from Eliasz Sawicki

Eliasz sawickimeetupit
Eliasz sawickimeetupitEliasz sawickimeetupit
Eliasz sawickimeetupitEliasz Sawicki
 
Developing more in less time
Developing more in less timeDeveloping more in less time
Developing more in less timeEliasz Sawicki
 
The art-of-developing-more-in-less-time-berlin
The art-of-developing-more-in-less-time-berlinThe art-of-developing-more-in-less-time-berlin
The art-of-developing-more-in-less-time-berlinEliasz Sawicki
 
Doing more in less time - Mobiconf
Doing more in less time - MobiconfDoing more in less time - Mobiconf
Doing more in less time - MobiconfEliasz Sawicki
 
Introduction To Functional Reactive Programming Poznan
Introduction To Functional Reactive Programming PoznanIntroduction To Functional Reactive Programming Poznan
Introduction To Functional Reactive Programming PoznanEliasz Sawicki
 
Introduction to Functional Reactive Programming
Introduction to Functional Reactive ProgrammingIntroduction to Functional Reactive Programming
Introduction to Functional Reactive ProgrammingEliasz Sawicki
 
Time traveling with ReSwift
Time traveling with ReSwiftTime traveling with ReSwift
Time traveling with ReSwiftEliasz Sawicki
 
ReSwift CocoaHeads Tricity
ReSwift CocoaHeads TricityReSwift CocoaHeads Tricity
ReSwift CocoaHeads TricityEliasz Sawicki
 
ReactiveCocoa workshop
ReactiveCocoa workshopReactiveCocoa workshop
ReactiveCocoa workshopEliasz Sawicki
 

More from Eliasz Sawicki (14)

Redux - 4Developers
Redux - 4DevelopersRedux - 4Developers
Redux - 4Developers
 
Eliasz sawickimeetupit
Eliasz sawickimeetupitEliasz sawickimeetupit
Eliasz sawickimeetupit
 
Developing more in less time
Developing more in less timeDeveloping more in less time
Developing more in less time
 
The art-of-developing-more-in-less-time-berlin
The art-of-developing-more-in-less-time-berlinThe art-of-developing-more-in-less-time-berlin
The art-of-developing-more-in-less-time-berlin
 
Tech fest
Tech festTech fest
Tech fest
 
Doing more in less time - Mobiconf
Doing more in less time - MobiconfDoing more in less time - Mobiconf
Doing more in less time - Mobiconf
 
iOSCon
iOSConiOSCon
iOSCon
 
Code europe
Code europeCode europe
Code europe
 
Introduction To Functional Reactive Programming Poznan
Introduction To Functional Reactive Programming PoznanIntroduction To Functional Reactive Programming Poznan
Introduction To Functional Reactive Programming Poznan
 
Introduction to Functional Reactive Programming
Introduction to Functional Reactive ProgrammingIntroduction to Functional Reactive Programming
Introduction to Functional Reactive Programming
 
Time traveling with ReSwift
Time traveling with ReSwiftTime traveling with ReSwift
Time traveling with ReSwift
 
Calabash
CalabashCalabash
Calabash
 
ReSwift CocoaHeads Tricity
ReSwift CocoaHeads TricityReSwift CocoaHeads Tricity
ReSwift CocoaHeads Tricity
 
ReactiveCocoa workshop
ReactiveCocoa workshopReactiveCocoa workshop
ReactiveCocoa workshop
 

Introduction to react native