Build a Calendar Component using React JS and MomentJS (React Hooks) [2020]

UPDATE HERE USING DATE-FNS!
https://youtu.be/mfG4BVCRkEQ

🚀 [GET MENTORED] Level up your skills with one on one private mentorship via Zoom!
👉 https://bit.ly/3lz4FdH
👉 Join our discord: https://bit.ly/3vpivnm

See the timestamps and Github links by clicking "Show More"!

In this screencast, you will learn how to build a calendar component using modern React JS. There will be no es6 classes in this screencast. You don't need them, nor do you want the added complexity that they bring with them. This means you will be writing functional JavaScript and using the React Hooks API to manage state and state changes.

------------------------------------------------------------

You can help me make better videos for YOU
with a few simple/quick answers about this video!

https://airtable.com/shr5LAnCI2esJZHi6

------------------------------------------------------------
Timestamps:

0:00 - Introduction
1:02 - Getting started
2:41 - Moment by JS
6:24 - The Calendar Algorithm
9:38 - Component state
15:44 - Extracting helper functions
17:47 - Conditional styling
20:51 - Step 6 Calendar header
28:06 - External state and input
29:38 - Day name header

------------------------------------------------------------------------------------------------------------------------

We are going to start by harnessing the power of Moment JS, an excellent Date and Time library for JavaScript. To build the calendar algorithm, we need to get the start and end dates. We can do this by calling moment() to get today's date as a moment object, and then getting the beginning of the month and then from that, the beginning of the week.

We will be using a side effect to build the calendar from the algorithm, so that means we will be using useEffect from the React Hooks API. This allows us to rebuild our calendar based on the selected value stored in state. useEffect takes a dependency array, and we can add the calendar value there, when it changes, we will rebuild the calendar using the useEffect block.

if you look at a calendar this will make sense as the first day isn't usually the first day of the month. Then we will get the last day of the month, and then the end of the week. From those two values, we have the date range we need to build our calendar!

Next, we will be using the React hooks API, and the function useState to have a place to store the value of the selected day. To select the day we just have to add a click handler to each day, and when that div is clicked, we can call make a call to our useState setter to store that value.

We will then be styling the display of these days so that days previous to today are greyed out, today is highlighted, and the selected day is highlighted with a different color. To do these things will be creating some helper functions and using a technique in React called "conditional rendering".

Next, we will be adding a header to our calendar, showing the current month, and a previous and next button to move the calendar forward and backward to different months. We will be adding a check and more conditional rendering to our calendar header so that we cant move to a month older than this month.

Then I will show you how we can use unidirectional data flow in React, in combination with a container div to store the calendar selected value state so it can be accessed by the app and other components. We will again be using useState for this.

Finally, we will be adding a day name week header to the calendar by using a javascript array and mapping over those values and using an es6 arrow function to build up an array of divs, each containing a day name abbreviation.

As you can see, we use several React patterns over and over to build the application, and the code is something a beginning React developer or a mid-level developer can easily understand.

My goal in these React screencasts is to convey how easy it is to build highly useful and beautiful React components using classless functional programming. I am not a fan of es6 classes in general or shackling myself to object-oriented programming when prototypes and functional components will do.

Then I don't have to worry about React lifecycle methods, argument binding, and constructors and I think it produces much cleaner, less complicated code. Give my methods a try and I think you will agree!

Happy hacking!

Видео Build a Calendar Component using React JS and MomentJS (React Hooks) [2020] канала DevmentorLive