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

      1:33
    • 2. Introducing React

      1:41
    • 3. Installing React and Tools

      3:45
    • 4. Getting a Code Editor

      3:23
    • 5. Wireframing CountdownChamp - Your First React Application!

      0:50
    • 6. Building Your First Application

      2:25
    • 7. Editing the Application

      2:09
    • 8. Creating Your First Component

      3:58
    • 9. Structuring the Application

      8:01
    • 10. Introducing State

      2:33
    • 11. Updating State

      3:27
    • 12. Changing Data with the Input Field

      4:18
    • 13. Creating a Clock Component

      3:54
    • 14. Introducing Props

      1:58
    • 15. Calculating Time Until

      6:08
    • 16. Hooking with LifeCycle Methods

      4:16
    • 17. Adding Helper Methods with Ternary Expressions

      2:16
    • 18. Styling with React Bootstrap

      3:57
27 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