This document provides an introduction to React and Redux frameworks. It discusses JavaScript components and state management with React as well as Redux for managing application state through actions, reducers, and a central store. The document also covers related topics like functional programming, smart and dumb components, and React Native platforms.

1. React / Redux
Introduction to JavaScript components
and state management

2. It’s an awesome time to be a
front-end developer

3. Choose your JavaScript
framework

4. Flexible app architecture
API 1
API 2

5. More vanilla JS
● ES2015 Modules
● Native JavaScript APIs
● Classes and Functions

7. ABL
always be
learning

8. Tooling

9. Functional
Programming
OMG! They’re still
using HTML
tables.
Functional
Programming

10. Reduce

11. Pure Functions
given the same arguments, they always return the
same value, without producing any observable side
effect

12. Higher-Order Functions
function that can take another function as an
argument, or that returns a function as a result

13. Why React.js ?

14. Smart components

16. Dumb components

18. React.js ecosystem

19. React Native Platforms

20. State management

21. Redux
Predictability of outcome
Maintainability
Server side rendering
Ease of testing
One way data flow

22. Actions Reducers Store
Pure functions that
take the current state
of the application and
an action and then
return a new state.
Store is the object that
holds the application
state. Any action
returns a new state
via reducers.
Actions are events,
which send data to
store. Actions are
simple objects with
type and payload.
Actions Reducers Store

23. Actions

24. Reducers

25. Store

26. Redux
Data Flow

27. Dev Tools

28. React + Redux app architecture

29. React + Redux middleware
react-router
react-redux
react-router-redux
redux-thunk

30. @netxm
www.priceline.com/careers
slide URL
bit.ly/redux-intro