I've been working a lot with React lately and thought it would be a good idea to share what I've learned with the group. During this talk we'll take a look at Facebook's React library while drawing comparisons to frameworks like Angular. We'll see how we can use React and friends to create a fast and efficient single page app. Attendees are expected to have some familiarity with ES6/ES7 since we the codebase we will be looking at leverages features from the spec. What we'll be taking a look at: • React • React Router • Redux • Redux Sagas • Webpack • Babel

1. INTRODUCTION
TO REACT + REDUX
for web developers
Jamal O’Garro
Software Engineer
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

2. • High-level overview of React
• High-level overview of Redux
• A look at a simple application built using React + Redux
• Share my thoughts on how I like working with React
AGENDA
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

3. REACT
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

4. WHAT IS REACT?
• A JavaScript library for building user interfaces
• Developed by Facebook
• Component based
• Uses a virtual representation of the DOM for efficient updates
• Provides a functional approach to building UIs
• Learn once write everywhere principle
• Can render to the DOM or native devices
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

5. WHO IS USING REACT?
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

6. THE REACT ECOSYSTEM
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

7. COMPONENTS
• Functions that take some input data and returns a UI
element to display
• Implements a render method
• Optionally uses JSX to render the markup
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

8. EXAMPLE COMPONENT
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

9. CONTAINER VS. PRESENTATION COMPONENTS
Container
• Controls the state
• Knows about Redux
• Does not contain JSX
• Pass state down to child components
Presentational
• Stateless
• Does not know about Redux
• Receive data and actions via props
• Contains JSX to declare our markup
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

10. STATE
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

11. PROPS
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

12. COMPONENT LIFECYCLE
• Mounting - component is added to the DOM
• Unmounting - component is removed from the DOM
• componentWillMount - is called right before the component is mounted
• componentDidMount - called right after the component is mounted
• componentWillUnmount - called right before the component is unmounted
• componentWillReceiveProps - called when new props become available to the
component
• shouldComponentUpdate - allows us to write logic when a re-render should occur
• componentDidUpdate - called after the component has been updated
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

13. REACT ROUTER
• Routing library for React
• Keeps application’s UI in sync with the URL to allow for navigation
• Provides lazy loading, route matching, transitioning etc.
• Allows for nested routing
• Has the concept of route parameters
• Supports query string params and redirects
• Contains modules for browser history, links, hash-based URLs, etc.
• Can be tied into Redux state
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

14. REDUX
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

15. WHAT IS REDUX?
• Functional representation of the Flux design pattern
• Provides a state tree to represent your applications’ state
• State is represented by a JavaScript object
• State is immutable
• There is a single source of truth
• Any changes are made with pure functions
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

16. REDUX FLOW
• Something happens that will change the state
• An action is dispatched by a component that is aware of Redux
• Action passes through middleware (if necessary) and is passed off to
reducers
• Reducers calculate the new pieces of the state they own
• The root reducer calculates and returns the new state to the store
• Container component receives the new state and re-renders the child
components that require an update
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

17. ACTIONS
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

18. ACTION CREATORS
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

19. REDUCERS
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

20. STORE
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

21. MIDDLEWARE
• Allow us to handle side effects in our application
• Intercepts an action to modify or retrieve some data before hitting the
reducers
• Good place to handle asynchronous operations (server updates, data
fetches, etc.)
• Types of middleware
• redux-promise
• redux-thunk
• redux-saga
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

22. LET’S LOOK AT SOME CODE!
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

23. PERSONAL THOUGHTS ON REACT
• Less to learn when compared to a framework like Angular or Ember
• Hard to grasp at first but makes sense after building something
• Excited about diving into React Native (learn once apply
everywhere)
• Huge fan of the functional approach to building UIs
• Using Redux may be overkill for a simple application
• Will continue to use at work and for personal projects
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

24. MEANSTACK NYC MEETUP | FEBRUARY 26, 2017
RESOURCES

25. USEFUL TOOLS AND LIBRARIES
• react
• react-redux
• normalizr
• react-router
• redux-saga
• redux-form
• material-ui
• axios
• ESLint
• Jest
• Redux Dev Tools
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

26. GENERATORS + STARTER KITS
• create-react-app
• react-boilerplate
• react-starter-kit
• react-redux-starter-kit
• react-slingshot
• react-redux-saga-boilerplate
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

27. TOPICS WE DIDN’T COVER
• Refs
• Virtual DOM
• Eventing
• Stateless functional components
• Higher-order components
• Prop types
• React Native
• Context
• Server-side rendering
• Redux actions
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

28. THANK YOU!!!
Jamal O’Garro
Software Engineer
MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX