Introduction to react native with redux
- 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)
- 6. What is React?
• JavaScript framework for building user interfaces
• Maintained by Facebook
• Based off of a Component model (Similar to Angular 2/4)
- 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
- 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
- 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!
- 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
- 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)
- 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.
- 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
- 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