[리액트] ReactJS를 이용하여 간단한 유튜브 플레이어 만들기

ReactJS를 이용하여 간단한 유튜브 플레이어를 만들어 보자.

1.프로젝트 만들기 

프로제특 명 : video-test

적당한 위치에 폴더를 만들고 터미널에서 아래와 같은 입력한다.

create-react-app video-test cd video-test npm start (or yarn start)

브라우져에 위와 같은 화면이 나오면 성공이다.

2. react-player 설치

비디오 재생을 위한 npm 모듈이다.

참고 :  https://www.npmjs.com/package/react-player

npm install react-player --save # or yarn add react-player

3. 소스 수정 

기본으로 생성된 App.js 코드를 수정한다.  

video-test/src/App.js

import React, { Component } from 'react';

import './App.css';

import ReactPlayer from 'react-player'

class App extends Component {

render () {

return <ReactPlayer

url='https://www.youtube.com/watch?v=7C2z4GqqS5E' playing controls/>

}

}

export default App;

다시 서버를 시작하자

npm start

아래와 같은 화면이 나오면 성공이다.

요즘 월드컵 축구선수들 보다 우리나라를 널리 알리고 있는    BTS방탄소년단이다.

축구구가대표팀 선수들도 이번 멕시코전에서는 지더라도 경기다운 경기를 좀 했줬으면 좋겠다. 

4. Firebase파이어베이스 호스팅

이제 내 피시에서만이 아닌 전세게 어디에서든 볼 수있도록 해보자.  우리에 구글신께서 모든 걸 무료로 제공해주시고 있다.

Firebase에 프로젝트를 만들고 로컬에 만들어진 리액트앱을 배포해보자.  

호스팅을 통한 실제 배포과정은 준비중입니다.  우선 데모부터 보시죠.

데모 :  https://react-video-test-fae70.firebaseapp.com

아래는 embed 태그로 페이지에 삽입된 리액트앱