Скачать или смотреть Convert Simple HTML Script to React

Learn how to effectively convert your simple HTML video controls into React components using refs and event listeners for a cleaner, more efficient structure.
---
This video is based on the question https://stackoverflow.com/q/68137679/ asked by the user 'coachsteve' ( https://stackoverflow.com/u/16318202/ ) and on the answer https://stackoverflow.com/a/68138104/ provided by the user 'Drew Reese' ( https://stackoverflow.com/u/8690857/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Convert simple HTML script to React

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Convert Simple HTML Script to React: A Step-by-Step Guide

If you’re transitioning from traditional HTML and JavaScript to React, you might come across some challenges, especially when it comes to handling events and DOM manipulations. One common scenario is converting a simple script that hides or shows play buttons for videos. In this guide, we will explore how to take an HTML script and effectively convert it into a clean React component.

Understanding the Problem

Let’s first examine the typical HTML script that controls two videos on a single page. The JavaScript code attached listens for clicks on a play button, hides it when the video plays, and shows it again when the video ends. The challenge arises when you try to implement this logic in a React component.

Original HTML Script

[[See Video to Reveal this Text or Code Snippet]]

When you convert this script into a React component, you might notice that directly manipulating the DOM does not work as expected because React has its own way of handling the virtual DOM.

Converting to React

Step 1: Refactor the HTML Structure

In React, instead of using getElementById, we use refs to access DOM nodes. This approach aligns better with the React paradigm, where state and UI are inherently tied together.

Step 2: Use the useRef Hook

Using the useRef hook allows us to reference the elements and manipulate them without needing direct access to the DOM.

The Updated React Component

Here’s how you can structure your React component correctly:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Code

useRef Hook:

Two refs (playRef and demoRef) are used to reference the play button and the video respectively.

Effect Hook:

The first useEffect is used for adding and removing a class from the body, which can be useful for styling.

Event Handling:

The clickHandler function manages play/pause logic and visibility changes, effectively replacing the HTML script's functionality.

Return Statement:

The component renders an image and a video, integrating React’s event handling directly in the JSX.

Conclusion

By using React's refs and event handling capabilities, you can convert simple HTML scripts into a structured, efficient React component. This approach not only makes your code cleaner but also enhances encapsulation, making it easier to manage and maintain.

The next time you encounter a JS script in your HTML, remember that with a few adjustments, you can leverage React’s powerful features to create more dynamic and interactive applications.