Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

React + Redux for Web Developers

688 visualizaciones

Publicado el

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

Publicado en: Ciencias
  • Inicia sesión para ver los comentarios

React + Redux for Web Developers

  1. 1. INTRODUCTION TO REACT + REDUX for web developers Jamal O’Garro Software Engineer MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  2. 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. 3. REACT MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  4. 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. 5. WHO IS USING REACT? MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  6. 6. THE REACT ECOSYSTEM MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  7. 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. 8. EXAMPLE COMPONENT MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  9. 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. 10. STATE MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  11. 11. PROPS MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  12. 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. 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. 14. REDUX MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  15. 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. 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. 17. ACTIONS MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  18. 18. ACTION CREATORS MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  19. 19. REDUCERS MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  20. 20. STORE MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  21. 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. 22. LET’S LOOK AT SOME CODE! MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX
  23. 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. 24. MEANSTACK NYC MEETUP | FEBRUARY 26, 2017 RESOURCES
  25. 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. 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. 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. 28. THANK YOU!!! Jamal O’Garro Software Engineer MEANSTACK NYC MEETUP | INTRODUCTION TO REACT + REDUX

×