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

David Katz, Software Engineer - Coding Instructor

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

    • 2. Introducing React

    • 3. Installing React and Tools

    • 4. Getting a Code Editor

    • 5. Wireframing CountdownChamp - Your First React Application!

    • 6. Building Your First Application

    • 7. Editing the Application

    • 8. Creating Your First Component

    • 9. Structuring the Application

    • 10. Introducing State

    • 11. Updating State

    • 12. Changing Data with the Input Field

    • 13. Creating a Clock Component

    • 14. Introducing Props

    • 15. Calculating Time Until

    • 16. Hooking with LifeCycle Methods

    • 17. Adding Helper Methods with Ternary Expressions

    • 18. Styling with React Bootstrap

43 students are watching this class

Project Description

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


At this point, you’ve learned enough to build a basic a React project from scratch. Use your newfound skills to create the application you always wanted!


Here’s a few ideas:

  • Make a stopwatch app. The user inputs the amount of time for the clock to run, and it starts counting to 0.
  • Make a todo-list. This application reminds the user when they have to do certain tasks using a combination of cookies and alert messages.
  • Extend CountdownChamp to tell the user when the timer reaches 0.
  • Create something unique of your own!


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


  • React Components - re-usable and independent pieces of React code that comprise the User Interface.
  • ES6 importing and exporting - a new syntax for sharing code between separate files. Used in cases like `import React from ‘react’`
  • State - the pertinent data to an application. Each component has its local state as long as you declare add the constructor to a Component and declare its state object.
  • Updating State - When updating state, make sure to never mutate state directly. Doing so will lead to fatal errors in your application. Instead, re-declare new instances of state arrays or objects and use the setState() function to update state.
  • Props - similar to state, except this data inherits from parent component specifying pieces of state as properties.
  • LifeCycle Methods - events in React components that trigger in cases such as rendering on or off the screen, or during state updates. One example is the `componentDidMount()` lifeCycle hook.


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