Introduction to react native with redux
Download as PPTX, PDF1 like429 views
This document provides an introduction and overview of React Native with Redux. It begins with an introduction to React components, props, and state. It then covers building a sample React Native app and advanced concepts like navigation and Redux. The document compares React Native to other native frameworks and provides resources for learning more. It was presented at Philly.NET on March 24, 2018 and discusses topics like React basics, React Native, native navigation solutions, and integrating Redux.
Introduction to react native with redux
- 1. INTRODUCTIONTO REACT NATIVE WITH REDUX Michael Melusky - @mrjavascript Philly.NET – March 24, 2018
- 2. Topics • Introduction to React: • Components • Props • State • React Native • Build a sample app! • Advanced React Native Concepts • Navigation • Redux Persist • Compare and contrast to other “Native” frameworks
- 3. About Speaker • Michael Melusky • Software Developer atAudacious Inquiry (Baltimore, MD) • Faculty member at Penn State Harrisburg and Franklin and MarshallCollege • @mrjavascript (Twitter/GitHub) • @melusky (XBOX)
- 4. Any prerequisites? • HTML5 • CSS3 • JavaScript (ES6/TypeScript) • Node / NPM • https://nodejs.org/en/download/ • Development IDE: • Atom (Github) • Visual Studio Code (Microsoft) • WebStorm (JetBrains)
- 5. REACT
- 6. What is React? • JavaScript framework for building user interfaces • Maintained by Facebook • Based off of a Component model (Similar to Angular 2/4)
- 7. React Components • Building blocks for React applications • Written in JSX: • Allows you to embed HTML tags inside of JavaScript
- 8. React Components – Shopping List
- 9. React Components • Written in ES6/JSX • Browsers understand plain vanilla JavaScript • Babel transpiles the ES6/JSX into vanilla JavaScript for the browsers • Source-to-source compiler
- 10. React Components – Shopping Cart
- 11. React Components – Shopping Cart
- 12. PROPS AND STATE
- 13. Communication between Components • Two ways to communicate between React components: • Props • Allows arbitrary inputs to be passed as inputs to components • Used for parent child communication • State • state is used to store data used in the current page • A parent component’s state often becomes a child component’s props
- 15. React Components –TTT Square
- 16. React Components –TTT Board
- 17. REACT NATIVE
- 18. React Native • A framework for building mobile apps (iOS/Android) using JavaScript! • Uses the same component model React web apps use • Which “apps” are using React Native? • Facebook • Instagram • Airbnb • Skype (MicrosoftTeams) • Walmart • Yes Microsoft is using React Native actively!
- 19. Let’s Build a React NativeApp!
- 20. Let’s Build a React NativeApp!
- 21. Let’s Build a React NativeApp!
- 22. Let’s Build a React NativeApp! • ** DEMO **
- 23. REACT COMPONENTS
- 24. Basic Components
- 25. User Interface
- 26. ListViews
- 27. Others
- 28. Others
- 30. Community Solutions • For handling Navigation, Facebook recommends a pair of community modules: • react-navigation • react-native-navigation • https://github.com/wix/react-native-navigation
- 31. React Navigation
- 32. React Navigation • A number of navigators can be used: • StackNavigator - Renders one screen at a time and provides transitions between screens.When a new screen is opened it is placed on top of the stack. • (in Xamarin, NavigationPage) • TabNavigator - Renders a tab bar that lets the user switch between several screens • (In Xamarin,TabbedPage) • DrawerNavigator - Provides a drawer that slides in from the left of the screen • (In Xamarin, MasterDetailPage)
- 33. Stack Navigator
- 34. Stack Navigator
- 35. Stack Navigator • ** DEMO **
- 36. REDUX
- 37. React and Redux
- 38. Redux • A number of frameworks exist for state management: • Redux • MobX • React actually ships with its own component state management (this.state) • Can be used with any framework (Ember, jQuery, Angular, et al.)
- 39. Why Redux? • Redux is a predictable state container for JavaScript apps. • There are many states in an app that will change depending on time, user behavior, or a plethora of different reasons. • Thus, if we consider an app as the process to change its own state, the view a user sees is how the states are presented.
- 40. How does Redux Work? • Redux can be broken down into the following: • store: manages the states. Mainly there is a dispatch method to dispatch an action. In a Redux app, you can obtain its states via store.getState() • action: a simple, plain JavaScript object. An action can also be considered as a command to change a state. • reducer: decides how to change a state after receiving an action, and thus can be considered the entrance of a state change. A reducer is comprised of functions, and it changes states by taking an action as an argument, in which it then returns a new state. • Is a pure function: • Doesn’t alter input data • Doesn’t depend on external state (database, DOM) and consistently produces the same output for same input • middleware: the middleman between a store.dispatch() and a reducer. Its purpose is to intercept an action that has been dispatched, and modify or even cancel the action before it reaches the reducer.
- 41. Redux • ** DEMO **
- 43. Compare and Contrast Xamarin React Native Ionic Language C# JavaScript TypeScript Native Widgets yes yes no General ideas Staying close to native Functional approach: UI is a function of state Use web technologies for maximum portability
- 44. Measuring Performance • JIT and AOT • JIT – Just inTime • Just-in-time compilation (JIT) is the process of compiling a bytecode or a source code into the native code at runtime. • Hence, a piece of code (bytecode or source code) is not interpreted at runtime every time it gets executed, but it’s only interpreted once at runtime, and every next time it is executed, a fast native code runs. • AOT – Ahead ofTime • Ahead-of-time compilation (AOT) is the same process performed before starting the application, at compile time
- 45. AOT or JIT? • Both C# and JavaScript are not compiled into the native code of the target CPU. C# is compiled into some bytecode, and JavaScript is interpreted.Thus, the performance question arises • You might think AOT is always better than JIT, because you only need to compile once and not every time you start the program • But let’s remember that JavaScript is a dynamically typed language, and this is the reason why JIT can outperform AOT in JavaScript case
- 46. Compare and Contrast (Continued)
- 47. RESOURCES
- 48. Additional Resources • https://react.christmas/ • ReactTutorial in “Advent Calendar” format • https://twitter.com/dan_abramov • Twitter of Redux creator • https://www.reddit.com/r/reactjs/ • Subreddit for React • https://github.com/fbsamples/f8app • F8 conference app, great React Native demo
- 49. Thank you for coming • https://twitter.com/mrjavascript/ • https://github.com/mrjavascript