React + Redux for Web Developers

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 eﬃcient 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 oﬀ 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 eﬀects 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 ﬁrst 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