Introduction​

I recently learned React, one of the most popular JavaScript frameworks in the world. I also created a gift for my sister using React. The main feature of the present is a video that contains a rickroll. When the rickroll plays, it should enable a previously disabled button.

Getting Started​

Step 1: Add a video to App.tsx.​

You can include a video using the HTML <video> tag.

Here's an example:

import rickRoll from "./rickroll.mp4";import "./App.css";function App() {    return (        <>            <div>                <video src={rickRoll} width="750" height="500" controls></video>            </div>        </>    );}export default App;

In this code, make sure to place the video file (rickroll.mp4) in the public folder.

Step 2: Adding Refs​

If you're new to React and aren't familiar with what a ref is, think of it as a way to reference an element similar to document.querySelector in vanilla JavaScript.

In React, using refs is considered a best practice instead of directly using document. functions.

Let's add refs to our video tag:

import { createRef } from "react";import rickRoll from "./rickroll.mp4";import "./App.css";function App() {    const videoRef = createRef<HTMLVideoElement>();    return (        <>            <div>                <video                    src={rickRoll}                    width="750"                    height="500"                    ref={videoRef}                    controls                ></video>            </div>        </>    );}export default App;

In the updated code, we import the createRef function from React. We create a ref using createRef<HTMLVideoElement>() and assign it to videoRef.

We then use ref={videoRef} to attach the ref to the video element. With refs, you can access the underlying DOM element using videoRef.current.

To play or pause the video, you can use the following code:

• Play: videoRef.current?.play()
• Pause: videoRef.current?.pause()

The ? is used to safely access the play() and pause() methods, as the current might be null initially.

Step 3. Adding onTimeUpdate​

The <video> tag in HTML has an attribute called onTimeUpdate which allows us to set a function that will be called whenever the timestamp in the video changes.

In this step, we will create a function called handleTimeUpdate to handle this event and perform certain actions when the target timestamp is reached.

To retrieve the current timestamp, we can use the following code snippet:

const currentTime = videoRef.current?.currentTime || 0;

Here is an example handleTimeUpdate function that we can use:

const handleTimeUpdate = () => {
    const currentTime = videoRef.current?.currentTime || 0;
    setTimestamp(currentTime);
    if (currentTime >= targetTimestamp && !didRickRollCome) {
        videoRef["current"].pause();
        setDidRickRollCome(true);
    }
};

And in the HTML you need to add the onTimeUpdate attribute:

<video
    src={rickRoll}
    width="750"
    height="500"
    ref={videoRef}
    onTimeUpdate={handleTimeUpdate}
    controls
></video>

By stitching all that code, we get the final result,

import { useState, createRef } from "react";import rickRoll from "/rickroll.mp4";import "./App.css";function App() {    const targetTimestamp = 6;    const [timestamp, setTimestamp] = useState(0);    const [didRickRollCome, setDidRickRollCome] = useState(false);    const videoRef = createRef<HTMLVideoElement>();    const handleTimeUpdate = () => {        const currentTime = videoRef.current?.currentTime || 0;        setTimestamp(currentTime);        if (currentTime >= targetTimestamp && !didRickRollCome) {            onTimestamp();        }    };    const onTimestamp = () => {        // When the timestamp is at 6 seconds do this:        videoRef.current?.pause();        setDidRickRollCome(true);    };    return (        <>            <div>                <p>The Video is at {timestamp} seconds</p>                {didRickRollCome ? (                    <p>Passed {targetTimestamp} seconds!</p>                ) : null}                <video                    src={rickRoll}                    width="750"                    height="500"                    ref={videoRef}                    onTimeUpdate={handleTimeUpdate}                    controls                ></video>            </div>        </>    );}export default App;

<p>The Video is at {timestamp} seconds</p>;
{
    didRickRollCome ? <p>Passed {targetTimestamp} seconds!</p> : null;
}

The handleTimeUpdate function retrieves the current timestamp from videoRef.current?.currentTime with a default value of 0. It updates the timestamp state with setTimestamp(currentTime).

If the current timestamp is at least the target timestamp and the Rickroll hasn't occurred, it pauses the video with and sets didRickRollCome to true

Extra Step (If you are using React with JS)​

In Step 2, you will need to change this:

// Line No. 6
const videoRef = createRef<HTMLVideoElement>();

to

const videoRef = createRef();

We are doing that as, Javascript does not support types.

Also, the file extension should be .jsx instead of .tsx

Results

Github (containing both react and react-ts): Stop At Sec

Demo (I have hosted only react as it is the same as react-ts): GH Pages

Conclusion

React's JSX syntax is similar to HTML, but when working with React, it's recommended to use refs instead of directly manipulating the DOM with document. functions.

In this tutorial, we covered how to add a video to a React component using the <video> tag, how to use refs to reference the video element, and how to access and control the video using the ref.

I hope this tutorial has been helpful in your React journey!

And If you want to see the present I gave to my sister, give me an DM on Discord (thecodingsage#8758)

Happy coding!

As a developer with some experience in Node.js and Angular, I was interested in learning how to build full-stack applications using the MEAN stack. So, I set out to learn it in a week, and to my surprise, I was able to pick it up relatively quickly. Here's how I did it.

What is MEAN?

MEAN is an acronym that stands for MongoDB, Express.js, Angular, and Node.js. Together, these technologies form a powerful full-stack web development framework.

My Background

Before I started learning MEAN, I already had experience with Node.js and Angular, but I was not familiar with HttpClient. So, I had a good grasp of JavaScript and TypeScript.

The Learning Process

I started by reading the documentation for each technology and watching video tutorials. I also took an online course that covered the basics of MEAN. This gave me a good understanding of the framework and how the technologies fit together.

After that, I started working on a simple project to put my newly acquired skills into practice. I decided to build a to-do app using the MEAN stack.

I started by setting up the backend with Node.js and Express.js, and connected it to a MongoDB database. Then, I built the frontend with Angular and used HttpClient to make HTTP requests to the backend.

While building the app, I encountered several issues and bugs, but I was able to solve most of them by researching online and asking for help on developer forums.

Conclusion

Learning MEAN stack development in a week was a challenging but rewarding experience. With my prior experience in Node.js and Angular, I was able to pick up the framework relatively quickly. With MEAN, I now have the skills to build powerful full-stack web applications.

Next Steps

Learning MEAN in a week was a challenging but rewarding experience. With my prior experience in Node.js and a little familiarity with Angular, I was able to learn the basics of MEAN quickly and build a simple project.

However, I'm not stopping there. My next goal is to explore other full-stack web development frameworks, such as MERN.

But, that's a story for another blog...