Introduction:

In this tutorial of TechLearn India, we'll walk through the process of creating a simple YouTube video downloader using React.js. We'll leverage the power of React to build a user-friendly interface and use a third-party library called ytdl-core to handle the actual downloading of YouTube videos.

Prerequisites:

Before we begin, make sure you have Node.js and npm installed on your machine. You can check their installation by running node -v and npm -v in your terminal.

Step 1:

Create a new React App Open your terminal and run the following commands to create a new React app:

npx create-react-app youtube-downloader
cd youtube-downloader

Step 2:

Install Dependencies Install the ytdl-core library, which will help us with YouTube video downloading.

npm install ytdl-core

Step 3:

Create Components Replace the contents of src/App.js with the following code:

import React, { useState } from 'react';
import ytdl from 'ytdl-core';

function App() {
  const [url, setUrl] = useState('');
  const [videoInfo, setVideoInfo] = useState(null);

  const getVideoInfo = async () => {
    try {
      const info = await ytdl.getInfo(url);
      setVideoInfo(info);
    } catch (error) {
      console.error('Error fetching video info:', error.message);
    }
  };

  const downloadVideo = () => {
    if (videoInfo) {
      const videoStream = ytdl(url, { quality: 'highest' });
      videoStream.pipe(res); // Replace "res" with the logic to handle the downloaded video (e.g., save to disk).
    }
  };

  return (
    <div className="App">
      <h1>YouTube Video Downloader</h1>
      <label>
        Enter YouTube Video URL:
        <input
          type="text"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
        />
      </label>
      <button onClick={getVideoInfo}>Get Video Info</button>

      {videoInfo && (
        <div>
          <h2>Video Information</h2>
          <p>Title: {videoInfo.videoDetails.title}</p>
          <p>Author: {videoInfo.videoDetails.author.name}</p>
          <p>Duration: {videoInfo.videoDetails.lengthSeconds} seconds</p>
          <button onClick={downloadVideo}>Download Video</button>
        </div>
      )}
    </div>
  );
}

export default App;

Step 4:

Run your App Save the changes and run your app using:

npm start

Visit http://localhost:3000 in your browser, and you should see your YouTube Video Downloader in action.

Explanation:

• We've created a simple React component (App) that maintains the YouTube video URL in its state.

• The ytdl-core library is used to fetch video information (getVideoInfo) and download the video (downloadVideo).

• The fetched video information is displayed on the UI, and a button is provided to initiate the video download.

Note: Handling the actual download logic may vary based on your application's requirements (e.g., saving to disk, streaming, etc.). In this example, the download logic is a placeholder (videoStream.pipe(res)), and you'll need to replace it with your specific implementation.

Remember to respect YouTube's terms of service and use the downloaded videos responsibly.