React + Redux for Web Developers
5 likes952 views
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
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to React + Redux for Web Developers (20)
Ad
More from Jamal Sinclair O'Garro (14)
Recently uploaded (20)
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 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