Introduction to react native
- 1. Introduction to React Native Dani Akash S
- 2. What is a React Native App?
- 3. Advantages ● Android and iOS apps with Single Codebase ● Native Performance ● Increased Developer Productivity ● Use Native Code when needed ● Can be integrated into existing Native App
- 5. There is too much to display ● Text ● Images ● Forms ● Ads ● Animation ● Static Content ● Dynamic Content ● Responsive Designing There are too many events to Handle ● Clicks ● Form Submissions ● Real Time Updates ● Ajax Calls ● Analytics ● Navigation Modern Single Page Applications are complex
- 11. Managing the State of all the components is difficult.
- 12. Changes to the DOM Every Event Triggers a change. ● Changes to Visual Styles is called repaint ● Changes to layout of DOM elements is called reflow ● Repaint and Reflow are blocking events
- 13. Repaints and Reflows are Expensive
- 14. React A library for building User Interfaces.
- 15. React organizes the UI into separate components and renders them. ● State and Props are used to pass data to the React’s view layer. ● React does not make any assumptions based on the rest of the technology stack. ● It simply re-renders the UI whenever state or props changes. ● Before rendering the HTML it compares the changes using Virtual DOM. ● It then renders the part of HTML that is different from the computed Virtual DOM. ● React has several lifecycle methods that are called at different phases of the component. How React Works
- 16. UnMounting ● componentWillUnmount() Updating ● componentWillReceiveProps() ● shouldComponentUpdate() ● componentWillUpdate() ● render() ● componentDidUpdate() Lifecycle Methods Mounting ● constructor() ● componentWillMount() ● render() ● componentDidMount()
- 17. Advantages ● Rendering is fast due to Virtual DOM. ● Since each part of the application is organized into components, the code becomes more maintainable and scalable. ● Lifecycle methods make it easy to update View layer based on Events. ● Managing component states for large applications can be made simple using a state management library.
- 18. Getting Started with React Native
- 19. Development Environment 1. Node.js 2. React Native Cli 3. Android Studio 4. XCode (only on Mac) 5. JS Friendly Text Editor of your choice https://facebook.github.io/react-native/doc s/getting-started.html
- 20. Let’s code!
- 21. Developer Friendly Tools Exclusive on React Native!! ● Hot Reloading ● Layouts using Flexbox ● Wireless Debugging ● UI frameworks ● Blueprints to kick start your project ● Community powered libraries
- 22. Checkout the following libraries!
- 23. Easily add High Quality animations directly from After Effects Lottie By Airbnb - https://airbnb.design/lottie/
- 24. Display Maps in your React Native app React Native Maps By Airbnb - https://github.com/airbnb/react-native-maps
- 25. Essential UI Components for building an App Native Base By GeekyAnts - https://nativebase.io/
- 26. Easy to use Navigators React Navigation By React Community - https://reactnavigation.org/
- 27. Build React Native app on any OS. No Android Studio or XCode needed! Create React Native App By React Community - https://github.com/react-community/create-react-native-app
- 28. And much more to make development simpler… Feel Free to Explore!
- 29. Thank You! Connect with me on: ● @DaniAkashS ● linkedin.com/in/daniakash