SlideShare a Scribd company logo

React + Redux for Web Developers

•
•
Jamal Sinclair O'Garro
Jamal Sinclair O'Garro

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

Related slideshows

Intro to React
Intro to ReactIntro to React
Intro to React
 
React hooks
React hooksReact hooks
React hooks
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
1 of 28
INTRODUCTION TO REACT + REDUX for web developers Jamal O’Garro Software Engineer MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
• 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
REACT MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
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
WHO IS USING REACT? MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
THE REACT ECOSYSTEM MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
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
EXAMPLE COMPONENT MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
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
STATE MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
PROPS MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
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
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
REDUX MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
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
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
ACTIONS MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
ACTION CREATORS MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
REDUCERS MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
STORE MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
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
LET’S LOOK AT SOME CODE! MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
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
MEANSTACK NYC MEETUP | FEBRUARY 26, 2017 RESOURCES
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
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
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
THANK YOU!!! Jamal O’Garro Software Engineer MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

More Related Content

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