ReactJS and Redux - Build 4 Web Apps [3/4] | David Katz | Skillshare

ReactJS and Redux - Build 4 Web Apps [3/4]

David Katz, Software Engineer - Coding Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 2m)
    • 1. Introducing the Course

      1:33
    • 2. Wireframing ReminderPro

      1:25
    • 3. Introducing Redux

      5:55
    • 4. Introducing Actions and Action Creators

      5:20
    • 5. Providing a Store and Introducing Reducers

      5:45
    • 6. Mapping Dispatch to Props and Binding Action Creators

      6:48
    • 7. Mapping State to Props

      3:03
    • 8. Rendering a List of Reminders

      5:28
    • 9. Deleting Reminders

      5:47
    • 10. Reducing the List Component

      4:25
    • 11. Timestamping Reminders

      4:14
    • 12. Interpreting Moments with MomentJS

      4:17
    • 13. Baking Browser Cookies

      3:26
    • 14. Clearing All Reminders

      4:33

Project Description

Share your version of ReminderPro, or build your own ReminderPro-inspired application!

 

You’ve now learned how to use Redux to manage the state of your React Application. Now, you have the chance to use that newfound knowledge to build your own useful and unique app!

 

Here’s a few ideas:

  • Extend upon ReminderPro to add alert message if the current date passes the due date for a reminder.
  • Host the application on a database online so multiple users can interact with the same reminders (Hint: the next application introduces authentication and databases. Perhaps you can revisit this one after!)
  • Create an application of your own! Find a problem, and build a solution in ReactJS and Redux!

 

Also, as an overview, here’s the important concepts you learned:

 

  • Redux - A JavaScript library which allows React applications to extract their data into one giant store.
  • Three Steps to Adding Redux -  1) Define a redux constant. 2) Add an Action Creator. 3) Amend or Add a Reducer
  • Redux Constants - Constants that allow actions and reducers in redux to listen to the same type to ensure that it recognizes true data.
  • Action Creators - methods that create and return actions for reducers to manipulate the redux store.
  • Actions - the plain JavaScript object that Action Creators return. Must include a type parameter with a Redux constant and a certain data payload.
  • Reducers - extract the Redux logic for the store into functions that handle actions and return pieces of the state.
  • Cookies - string names that map string values stored on the browser. Allows applications to keep a local history of data on a browser

 

It would be awesome if you choose to share the project you build. Seeing your project will help other students. Also, it just might turn into a viral hit! You got this!

 

[“hip”, “hip”]

 

(Hip-Hip Array)

Student Projects