React native
- 3. 1. ReactJS?
- 4. “ A JavaScript library for building user interfaces
- 5. What is ReactJS? ▹ A JS lib for building user interfaces ▹ Developed by Facebook & Instagram ▹ ReactJS is V in MVC ▹ ReactJS runs a Diffing algorithm to figure out what has changed
- 6. Why do we use ReactJS? ▹ ReactJS is extremely fast, because it uses virtual DOM concept ▹ ReactJS uses special syntax called JSX, which allows to mix HTML with JS ▹ When the data changes, ReactJS conceptually hits refresh button and knows only to update the changed parts ▹ It’s all about building reusable components ▹ It’s much smaller and plays nicely with JQuery and other frameworks
- 8. ReactJS Concepts ▹ Components ▹ Virtual DOM ▹ JSX ▹ Props & States ▹ One Way Data Flow
- 9. Component ▹ Components let you split the UI into independent, reusable pieces
- 10. Virtual DOM ▹ It’s a lightweight JS object which is a copy of real DOM
- 11. JSX ▹ JSX stands for JavaScript XML ▹ You can embed JavaScript expressions in JSX ▹ JSX Event Handlers are NOT Like HTML `onClick`
- 12. Props ▹ This simply is shorthand for properties ▹ Props are how components talk to each other ▹ Props are immutable
- 13. States ▹ Like props, state holds information about the component ▹ Props shouldn’t change, so state steps up ▹ So state is used so that a component can keep track of information in between any renders that it does.
- 14. One Way Data Flow ▹ In React JS, data flows in one direction, from Parent to Child. ▹ Props are properties passed to a child component
- 16. ReactJS Life Cycle ▹ Initialization ▹ Mounting ▹ Updation ▹ Unmounting
- 21. 5. React Native?
- 22. “ Build native mobile apps using JavaScript and React
- 23. React Native? ▹ Write in React/JSX ▹ Run as a Native App ▹ Code runs in a JS Container ▹ iOS/Android
- 25. Why React Native? ▹ Common Codebase ▹ Low development cost & time ▹ No need to deploy apps again & again to stores to provide updates ▹ Leverage all the awesome features of ReactJS
- 27. How React Native works? There are 4 threads in the React Native App ▹ UI Thread: Also known as Main Thread ▹ JS Thread: JS thread or Javascript thread is the thread where the logic will run. ▹ Native Modules Thread: Sometimes an app needs access to platform API, and this happens as part of native module thread. ▹ Render Thread: Only in Android L (5.0), react native render thread is used to generate actual OpenGL commands used to draw your UI.
- 32. 8. Difference between Ionic and React Native
- 34. Difference between Ionic & React Native ▹ Ionic is a regular web app, written using HTML, CSS, and JavaScript, but it runs in a webview embedded in a native app instead of in a stand-alone mobile browser ▹ React Native has a completely different architecture: instead of writing your UI using web technologies, it uses the React component model to render to native views ▹ Ionic is a Cordova based app that wrap current web app into a mobile application. It uses the android existing web view to render the app so the file size is quite small ▹ Meanwhile react native create bridge between JavaScript and native component ▹ When it comes to memory usage, Ionic framework uses more than react native apps ▹ The Ionic app is slower at loading videos because it needs to download from other server, while in react native, it caches the tiles so it loads faster ▹ When it comes to integration, react native can use every client based JavaScript modules from npm (node package manager) whereas Ionic uses only the Cordova-based code
- 35. Difference between Ionic & React Native ▹ Ionic is a framework that creates an idea of writing code only once ▹ React native is not a write once and run anywhere framework, but is popularly touted as a “learn once, write anywhere” framework ▹ Ionic Framework app needs to use device features and APIs through Apache Cordova plugins ▹ With react native you can access any device component or API Based on the points above, you can see the difference in their functionalities, so if you want to go for something that creates performant iOS and Android apps that feel at home on their respective platforms ten you can opt for React Native. And, if you are targeted at building hybrid mobile apps, Ionic is the best choice!
- 36. 9. Comparing Performances b/w Ionic & React Native
- 40. 10. Who uses React Native?
- 43. Setup React Native ▹ Android Studio: https://developer.android.com/studio/index.html ▹ Android SDK(Without Android Studio): https://developer.android.com/studio/index.html#command-tools ▹ Required Components which must be installed to run React Native App: 1.Google APIs 2.Android SDK Platform 23 3.Intel x86 Atom_64 System Image 4.Google APIs Intel x86 Atom_64 System Image ▹ JDK 8 is required to run sdkmanger of Android SDK so make sure about your JDK version installed on the system. ▹ NodeJS version 6 or newer must be installed => https://nodejs.org/en/download/ ▹ Finally we’ll use the npm to install React Native on our system: npm install -g react-native-cli ▹ You can validate if all the above components have been installed properly on the system by running the below command: react-native -v
- 44. 61,258 Github Stars 257 Releases 1,627 USERS And a lot of contributors 44
- 45. Demo Time
- 46. THANKS! Any questions? Hiten Pratap Singh hiten@fintechlabs.in https://github.com/hitenpratap/ https://hprog99.wordpress.com
- 47. References ▹ https://hackernoon.com/virtual-dom-in-reactjs-43a3fdb1d130 ▹ https://medium.com/javascript-scene/jsx-looks-like-an-abominatio n-1c1ec351a918 ▹ http://lucybain.com/blog/2016/react-state-vs-pros/ ▹ https://hackernoon.com/understanding-state-and-props-in-react-9 4bc09232b9c ▹ https://openclassrooms.com/courses/build-web-apps-with-reactjs/ one-way-data-bindings ▹ https://medium.embengineering.com/in-react-js-data-flows-in-one -direction-from-parent-to-child-841103ed3aed ▹ https://hackernoon.com/reactjs-component-lifecycle-methods-a-d eep-dive-38275d9d13c0 ▹ https://www.slideshare.net/TadeuZagallo/a-tour-of-react-native ▹ https://www.infoq.com/articles/react-native-introduction ▹ https://wetalkit.xyz/react-native-what-it-is-and-how-it-works-e2182 d008f5e 47