An Introduction to ReactNative
1 like634 views
The document is a presentation on React Native by Michał Taberski, outlining its advantages and distinguishing it from other technologies like PhoneGap and Titanium. It discusses how React Native enables the development of native apps using JavaScript, shares insights on the framework's structure, and provides a quick start guide for developers. Additionally, it highlights the ability to reuse existing JavaScript code and the flexibility of integrating React Native into existing native applications.
An Introduction to ReactNative
- 2. Agenda 1. About me 2. What is React Native, and what is not? 3. How does it work? 4. Advantages of React Native approach 5. Quick start 6. Demo 7. Bonus?!
- 3. About me • Web developer, freelance contractor, • always open for networking, good food and Fifa challenge ;) • JavaScript developer • yesterday: Ruby on Rails and BackboneJS • today: ReactJS, Redux and stuff • tomorrow: maybe Elm? (http://elm-lang.org/)
- 5. React Native is not… • it’s not a web based technology like Phonegap, (no HTML, CSS animations, jQuery) • it’s not “one app for all platforms solution”* like Titanium * - although its possible you shouldn’t do this
- 6. – official React Native homepage (https://facebook.github.io/react-native/) “A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT” but it is…
- 7. which means • you can write NATIVE APPS with JavaScript (ES6) • your code looks just like ReactJS code - JSX syntax, declarative UI describing etc. • unlike ReactJS, ReactNative’s output is not HTML, code it’s not executed on frontend • you can still use a lot of good JS libs you use already on browser (Redux, Immutable.JS, testing frameworks etc.) • it supports Apple iOS, and Android
- 8. So… how does it work?
- 9. How does it work?
- 10. RN approach profits: • you can use JavaScript for NATIVE apps for iOS and Android (cool for you, and your boss) • you can design UI with consistent technologies you are already familiar with (Flexbox, and CSS subset) • animations and gestures API is made with touchable display in mind 1/3
- 11. RN approach profits: • a lot of components and logic can be shared between platforms • you don’t need to recompile app after every code change • a lot of good JS code can be resued on native apps (Redux, Immutable.js, test frameworks) 2/3
- 12. RN approach profits: • React Native doesn’t enforce you to write entire app with this technology, so you can slowly embed RN to already written native app • Sweet things for developers: very good, descriptive error messaging Chrome debugger 3/3
- 13. so its time to start…
- 14. QUICK START • if you know already React you are almost done • React Native is not HTML, but there are corresponding components: for block elements instead of <div/> use <View/> for inline elements instead of <span/> use <Text/> for images instead of <img/> use <Image/> • CSS is limited, so check out the documentation before • model your layout with flexbox 1/2
- 15. QUICK START • Make sure you have XCode, and Node.JS on the board • Install ReactNative CLI $ npm install -g react-native-cli • Init new project, and start to code $ react-native init AwesomeProject 2/2
- 16. DEMO