Introduction to react native

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
1 of 78

Recommended

Integration Test With Cucumber And Webrat by
Integration Test With Cucumber And WebratIntegration Test With Cucumber And Webrat
Integration Test With Cucumber And WebratKang-min Liu
1.9K views29 slides
Dynamic documentation - SRECON 2017 by
Dynamic documentation - SRECON 2017Dynamic documentation - SRECON 2017
Dynamic documentation - SRECON 2017Daniel ( Danny ) ☃ Lawrence
180 views81 slides
Teaching Web Frontend Technologies To A Toddler by
Teaching Web Frontend Technologies To A ToddlerTeaching Web Frontend Technologies To A Toddler
Teaching Web Frontend Technologies To A ToddlerOludotun Longe
48 views8 slides
JQuery in Seaside by
JQuery in SeasideJQuery in Seaside
JQuery in SeasideESUG
3.8K views57 slides
Scaling Complexity in WordPress Enterprise Apps by
Scaling Complexity in WordPress Enterprise AppsScaling Complexity in WordPress Enterprise Apps
Scaling Complexity in WordPress Enterprise AppsMike Schinkel
1.2K views33 slides
How To Use Asana by
How To Use AsanaHow To Use Asana
How To Use AsanaOliviaLynWorx
180 views110 slides

More Related Content

Similar to Introduction to react native

jQuery for Seaside by
jQuery for SeasidejQuery for Seaside
jQuery for SeasideLukas Renggli
1.8K views57 slides
Sperimentazioni lezione6 from_designtoapplication copy by
Sperimentazioni lezione6 from_designtoapplication copySperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copySalvatore Iaconesi
660 views60 slides
Frontin like-a-backer by
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backerFrank de Jonge
10.6K views91 slides
jQuery (BostonPHP) by
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)jeresig
1.7K views34 slides
Introduction to jQuery - Barcamp London 9 by
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Jack Franklin
612 views29 slides
Vue.js for beginners by
Vue.js for beginnersVue.js for beginners
Vue.js for beginnersJulio Bitencourt
9.3K views25 slides

Similar to Introduction to react native(12)

Sperimentazioni lezione6 from_designtoapplication copy by Salvatore Iaconesi
Sperimentazioni lezione6 from_designtoapplication copySperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copy
Salvatore Iaconesi660 views
jQuery (BostonPHP) by jeresig
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
jeresig1.7K views
Introduction to jQuery - Barcamp London 9 by Jack Franklin
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Jack Franklin612 views
React native introduction by InnerFood
React native introductionReact native introduction
React native introduction
InnerFood107 views
Building Universal Web Apps with React ForwardJS 2017 by Elyse Kolker Gordon
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
The Point of Vue - Intro to Vue.js by Holly Schinsky
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky1.6K views
React native introduction by InnerFood
React native introductionReact native introduction
React native introduction
InnerFood262 views
Android accessibility for developers and QA by Ted Drake
Android accessibility for developers and QAAndroid accessibility for developers and QA
Android accessibility for developers and QA
Ted Drake25.4K views

More from Eliasz Sawicki

Redux - 4Developers by
Redux - 4DevelopersRedux - 4Developers
Redux - 4DevelopersEliasz Sawicki
130 views110 slides
Eliasz sawickimeetupit by
Eliasz sawickimeetupitEliasz sawickimeetupit
Eliasz sawickimeetupitEliasz Sawicki
110 views20 slides
Developing more in less time by
Developing more in less timeDeveloping more in less time
Developing more in less timeEliasz Sawicki
138 views121 slides
The art-of-developing-more-in-less-time-berlin by
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
273 views111 slides
Tech fest by
Tech festTech fest
Tech festEliasz Sawicki
289 views143 slides
Doing more in less time - Mobiconf by
Doing more in less time - MobiconfDoing more in less time - Mobiconf
Doing more in less time - MobiconfEliasz Sawicki
390 views107 slides

More from Eliasz Sawicki(14)

Introduction to react native