有没有一个（好的）工具可以把vue js转换成react js呢？首先，我对react还是个新手，所以我现在没有时间去学习vue js。如果有人能给我一些好的工具或技巧，那就太好了。
该代码是用于创建视频显示的项目的一部分。
如果有人对我试图转换为react js的代码感兴趣：

const videos = [
  {
    id: "1",
    name: "What Happens if You Fall Into a Black Hole?",
    smallImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2015/05/InTheory_Ft_BH_1920x10801-520x293.jpg",
    largeImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2015/05/InTheory_Ft_BH_1920x10801-1720x968.jpg",
    duration: "2:18",
    active: true,
    description:
      "Filming by Petr Stepanek. Editing and motion graphics by MK12. Music by Steven Gutheinz.",
    videoURL:
      "https://www.youtube-nocookie.com/embed/ScMzIvxBSi4?rel=0&enablejsapi=1",
  },
  {
    id: "2",
    name: "A ‘Rebel’ Without a Ph.D.",
    smallImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2017/04/DysonPaintingStill-520x293.jpg",
    largeImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2017/04/DysonPaintingStill.jpg",
    duration: "2:18",
    active: false,
    videoURL:
      "https://www.youtube.com/watch?v=uleWdBDmjNg?rel=0&enablejsapi=1",
  },
  {
    id: "3",
    name: "Pencils Down: The Art of Teaching Math and Science",
    smallImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2016/10/2015-05-26-14.48.01-520x390.jpg",
    largeImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2016/10/2015-05-26-14.48.01-1720x1290.jpg",
    duration: "2:35",
    active: false,
    videoURL:
      "https://www.youtube-nocookie.com/embed/ScMzIvxBSi4?rel=0&enablejsapi=1",
  },
  {
    id: "4",
    name: "A Tenacious Explorer of Abstract Surfaces",
    smallImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2016/10/2015-05-26-14.48.01-520x390.jpg",
    largeImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2016/10/2015-05-26-14.48.01-1720x1290.jpg",
    duration: "2:35",
    active: false,
    videoURL:
      "https://www.youtube.com/watch?v=uleWdBDmjNg?rel=0&enablejsapi=1",
  },
];

Vue.component("video-show-component", {
  template: `
<div>{{getActiveVideo.description}}
<div>
 <iframe
              allowFullScreen
              frameborder="0"
              height="376"
              :src="video.videoURL"
              style="width: 100%; min-width: 536px"
            />
    </div>
    </div>`,
  props: {
    video: Object,
  },
  methods: {
    setActive() {
      videos.map((video) => {
        video.active = this.video.id === video.id;
      });
    },
  },
});

Vue.component("video-list-component", {
  template: `
    <div class="video-card"
         :class="[{ 'active': video.active }]" @click="setActive(video.id)">

      <div class="video-card-thumb">
      <div class="image-container aspect-ratio-16by9">
      
        <div 
        class="image-background"
        :style="{ backgroundImage: 'url(' + video.smallImg + ')' }"
      ></div>
      <div class="image-content-container">
              <div class="video-play-icon"><img src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzIwMCcgd2lkdGg9JzIwMCcgIGZpbGw9IiM1MUE3RjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTg2LDU1LjVjLTAuNiwxLTEuNSwxLjgtMi41LDIuNEwyNi42LDg3LjljLTAuOSwwLjUtMiwwLjctMywwLjdjLTMuNiwwLTYuNC0yLjktNi40LTYuNFYxNy44ICBjMC0zLjYsMi45LTYuNCw2LjQtNi40YzEuMiwwLDIuMywwLjMsMy4zLDAuOWw1Ni45LDM0LjNDODYuOCw0OC41LDg3LjgsNTIuNCw4Niw1NS41eiI+PC9wYXRoPjwvc3ZnPg=="></div>
              </div>
      </div>
      </div>
      <div class="video-card-content">
      <div class="video-title">{{video.name}}</div>  
      <div class="video-duration">{{video.duration}}</div>
</div>
  </div>
    </div>
  `,
  props: {
    video: Object,
  },
  methods: {
    setActive() {
      videos.map((video) => {
        video.active = this.video.id === video.id;
      });
    },
  },
});

new Vue({
  el: "#app",
  data: {
    activeVideo: {},
    videos,
  },
  computed: {
    getActiveVideo() {
      return this.filterVideos();
    },
  },
  methods: {
    filterVideos() {
      return this.videos.find((video) => {
        return video.active;
      });
    },
  },
});