Slide 1
Slide 1 text
REACT NATIVE: AN
OVERVIEW FROM A
MOBILE AND FRONTEND
DEVELOPER
Slide 2
Slide 2 text
BRUNO KONRAD
MOBILE &
FRONT-END
DEVELOPER
CODEMINER 42
@BRUNOSKONRAD
Slide 3
Slide 3 text
WHAT IS
REACT
NATIVE?!
Slide 4
Slide 4 text
IT'S REACT
RUNNING ON YOUR
MOBILE APP
Slide 5
Slide 5 text
HOW A REACT
CODE LOOKS
LIKE?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
AND A REACT
NATIVE CODE?
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
COMPONENTS
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
ReactDOM
Browser
DOM
React Component
render: function() {
return hey
}
React Component
render: function() {
return hey
}
From: https://www.youtube.com/watch?v=KWEhFWm0SL8
React
Native
iOS
Android
?
BRIDGE
BRIDGE
Slide 13
Slide 13 text
REACT NATIVE
ISN'T LIKE
Slide 14
Slide 14 text
IT'S REALLY
NATIVE
Slide 15
Slide 15 text
IT'S MORE LIKE
Slide 16
Slide 16 text
,
- ,
-
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
WHY
REACT
NATIVE?!
Slide 19
Slide 19 text
NATIVE IS HARD
Slide 20
Slide 20 text
BUT DELIVER A
BETTER UI/UX
Slide 21
Slide 21 text
LEARN ONCE
WRITE ANYWHERE
Slide 22
Slide 22 text
THE IDEA IS NOT
TO HAVE THE
SAME CODEBASE
FOR EACH APP
Slide 23
Slide 23 text
BUT IT'S GOOD TO
SHARE
EVERYTHING THAT
IS POSSIBLE
Slide 24
Slide 24 text
WHAT TO SHARE, SO?
● BUSINESS LOGIC
● BASIC COMPONENTS
● WHATEVER YOU THINK IT
WORTH
Slide 25
Slide 25 text
HOW TO DO
REACT
NATIVE?!
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
$ react-native init [YouAppName]
[YourAppName] /
├── android /
├── ios /
├── node_modules /
├── index.android.js
├── index.ios.js
├── package.json
Slide 28
Slide 28 text
CONFIGURE YOUR
COMPUTER TO WORK
WITH ANDROID AND
IOS SDK
Slide 29
Slide 29 text
USE WHATEVER
EDITOR THAT YOU
WANT TO
Slide 30
Slide 30 text
YOU DO LAYOUT
USING FLEXBOX AND
STYLE USING
SOMETHING LIKE CSS
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
https://www.youtube.com/watch?v=0ZNIQOO2sfA
MPJ - FunFunFunction
Slide 34
Slide 34 text
COOL STUFF
Slide 35
Slide 35 text
DEVELOPER
EXPERIENCE
Slide 36
Slide 36 text
NO NEED TO
RECOMPILE
Slide 37
Slide 37 text
DEBUG AND NICE
ERROR FEEDBACK
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
FILES TO BE LOADED PER
PLATFORM
BASED ON THE EXTENSION
header.android.js header.ios.js
Slide 41
Slide 41 text
YOU CAN USE
NATIVE CODE WHEN
YOU NEED IT
Slide 42
Slide 42 text
HAVE A TEAM WHO
WRITES UI USING
REACT
Slide 43
Slide 43 text
https://react.parts/native
NEED A
COMPONENT?
Slide 44
Slide 44 text
CONCERNS
Slide 45
Slide 45 text
IT'S A NEW
TECHNOLOGY
Slide 46
Slide 46 text
FEW RESOURCES
ABOUT IT
Slide 47
Slide 47 text
MAYBE SOME
STRANGER BUGS
Slide 48
Slide 48 text
CONCLUSIONS
Slide 49
Slide 49 text
IT'S EASY TO LEARN!
SINCE IT'S JUST THE UI
Slide 50
Slide 50 text
YOU DON'T NEED TO
KNOW ABOUT NATIVE
DEVELOPMENT. BUT IT
MIGHT BE GOOD
Slide 51
Slide 51 text
USE IT WITH SOME
KIND OF "CAUTION".
● MVP
● PROTOTYPES
● TRY IT
YOURSELF
Slide 52
Slide 52 text
DO YOU
REALLY NEED
AN APP?
Slide 53
Slide 53 text
PROGRESSIVE
WEB APP
Slide 54
Slide 54 text
http://makeitopen.com
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
THANKS