React Native: an overview from a mobile and frontend developer

React proved itself as a mark on UI development. It caused a kind of revolution on web and it's trying to do the same on mobile. I'll explain you about my first impressions about React Native, a library to create native mobile apps - for iOS and Android -.

Transcript

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