Slides from my Saturday (3/24) presentation on React Native at Microsoft for Philly.NET.

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

14. ReactTutorial
• https://codepen.io/gaearon/pen/gWWZgR?editors=0010

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

29. NATIVE NAVIGATION

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 **

42. OTHER FRAMEWORKS
Source: https://cruxlab.com/blog/reactnative-vs-xamarin/

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