Downloaded 22 times
Uploaded byWaqqas Jabbar
Introduction to React Native
The document provides an introduction to React Native, detailing its development environment, architecture, and advantages such as faster development and code reuse across platforms. It covers essential concepts like React.js components, state management, and the importance of knowing JavaScript and development tools like Xcode and Android Studio. Additionally, it addresses common FAQs about React Native development and highlights various libraries and resources available for developers.
Introduction to React Native
- 1. Introduction to React-Native WaqqasJabbar 16th May 2018
- 2. My Introduction 2000 NUST 2008 Right HandSoft Pvt. Ltd. 2012 Vadion (formally Softrove) 2010 2016 20172004 2018 C C++ C# Web Mobile (RN)
- 3. Agenda ● Concepts ● FAQs ●Demos ○ Production app ○ Make Hello World App ○ ...
- 4. Clarify the ecosystem ●React.js ● React-Native ● Redux ● Flow ● JSX ● Babel ● Node
- 5. React.js: Basics ● DeclarativeComponents ● Virtual DOM (Speed) ● One-way data binding ( VS angular) A JavaScript library for building user interfaces
- 6. React.js: Components ● Components ○Types ■ Stateless (props only) ■ Stateful (state) ○ render() function ○ Life-cycle ● Props ○ Allow arbitrary input to be passed to a component ○ User for parent-child communication ● State ○ Store data of component
- 7. React-Native ● Learn once,write anywhere (previous: write once, run anywhere) ○ Provide native experience ● Built on React.js ● Available for ○ Android: 4.1+ ○ iOS: 8+
- 8. Why React-Native ● Fasterdevelopment speed ● Lower cost of development ○ Code reuse ○ Easy to find developers ● Ship across multiple platform ● Over the Air (OTA) updates
- 9. React-Native: Architecture ● JScode running in Virtual Machine (VM)
- 10. Who is usingReact-Native Showcase
- 11. Prerequisites to React-NativeDevelopment ● JavaScript (Preferably ES6) ● Basic XCode/Android Studio usage ● Basic understanding on npm
- 12. Development Environment ● AnyJavaScript Editor ( WebStorm, Atom) ● XCode ● Android Studio ● React-Native CLI ● Genymotion ● nvm ( Node version manager) ● node/npm
- 13. Development Experience ● Closeto web ● Code changes instantaneously updated on mobile ● Use chrome for debugging
- 14. Complimentary Libraries ● ReactNavigation (https://reactnavigation.org/) ● React Redux (https://redux.js.org/) ● Redux Sagas (https://redux-saga.js.org/) ● Mobx (https://mobx.js.org/) Search at https://js.coach/?collection=React+Native
- 15. UI Libraries ● React-native-elements(https://react-native-training.github.io/react- native-elements/) ● Nativebase (https://nativebase.io/) ● Use native components
- 16. Challenges in React-NativeDevelopment ● Frequent updates of React-Native ○ App should be updated regularly ● Third-party libraries can become outdated react-native-git-upgrade
- 17. Debugging ● Google Chrome ●Performance Monitor ● Inspector ● Reactotron (https://infinite.red/reactotron)
- 18. JSX ● XML likesyntax ● Convert JSX to JS
- 19. Styling ● Flexbox ● Styled-componentsfor CSS ○ (https://www.styled-components.com/)
- 20. Platform Specific Code ●filename.android.js filename.ios.js ● Platform.OS === ‘android’ Platform.OS === ‘ios’ ● <Component>Android ● <Component>IOS
- 21. Starting a newapp ● npm install -g react-native-cli ● react-native init MyProject ● cd MyProject ● react-native run-ios ● react-native run-android Installing a package ● yarn add <package-name> ● react-native link <package-name>
- 22. Expo https://expo.io/ ● Wrapper oncommonly used react-native libraries ● iOS and Android App ● OTA ● Avoid for production apps (for now atleast)
- 23. Ignite CLI ● CLI ●Boilerplates, Plugins ignite new MyApp https://github.com/waqqas/ignite-aag-boilerplate (MIT License)
- 24.
- 25. FAQ: Do Ineed to learn XCode/Android Studio Answer: Yes You need to know how to link native libraries. Fortunately, it is simple and normally you just have to do as documented and you would be fine
- 26. FAQ: Do Ihave to write native code Answer: No (Normally) You would be writing code is Javascript. If there is some native functionality that is not available, you have to write bridging code. React-Native provide primitives to do so
- 27. FAQ: Do Ihave to rewrite my native app in RN Answer: Yes You can reuse parts of the native code by exposing it to react-native bridge. Writing RN bridge requires knowledge of RN internals, as well as native (both iOS and Android) code
- 28. FAQ: What backendshould I use with RN Answer: Any backend You can user REST APIs or Firebase Demo app have both REST APIs and Firebase
- 29. FAQ: Can youuse my favorite JS library in RN Answer: Yes (Probably) You can use moment, lodash, axios and other pure Javascript libraries (that don’t have a browser-specific component)
- 30. FAQ: How doesReact-Native help my startup Answer: Best for early startup ● Make MVP quickly ● Over The Air (OTA) update help you modify the app without going through the app-store process
- 31. FAQ: React-Native VSIonic VS NativeScript Answer: React-Native is performance focus. Uses Native UI ● https://stackshare.io/stackups/ionic-vs-nativescript-vs-react-native
- 32.
- 33. Thank you https://www.linkedin.com/in/waqqasjabbar/ https://twitter.com/waqqasjabbar https://www.facebook.com/waqqas.jabbar https://medium.com/@waqqas/ https://www.upwork.com/fl/waqqasj waqqas.jabbar@gmail.com React-Native Workshop(Coming Soon) Show you interest: https://goo.gl/forms/WrmnQVm9Uz8Ldsfg1
Editor's Notes
- #2 Thank you to NIC
- #3 Link to people
- #6 https://blog.codecentric.de/en/2017/11/developing-modern-offline-apps-reactjs-redux-electron-part-2-reactjs-basics/
- #7 https://reactjs.org/docs/hello-world.html
- #11 https://facebook.github.io/react-native/showcase.html
- #13 https://facebook.github.io/react-native/docs/getting-started.html
- #19 https://facebook.github.io/jsx/ https://reactjs.org/docs/introducing-jsx.html https://reactjs.org/docs/jsx-in-depth.html
- #24 https://infinite.red/ignite