반응 할 줄 알아요? - 네.비디오 어플리케이션 구축

소개하다.

반응이 뭐예요?

React는 페이스북에서 시작하는 인기 있는 자바스크립트 프런트엔드 라이브러리입니다.UI 요소를 만들고 재사용할 수 있습니다.React의 탄생은 브라우저 DOM의 속도가 느린 문제를 해결하기 위한 것이다.그것은 매우 유명해서 주로 여러 가지 원인에 쓰인다.

React를 사용해야 하는 이유

재사용 가능 구성 요소 - React는 구성 요소 기반이며 이는 구성 요소가 React UI의 구성 요소임을 의미합니다.구성 요소는 UI의 작은 부분의 외관과 재사용성을 설명합니다.다른 구성 요소에 구성 요소를 끼워 넣으면 복잡한 응용 프로그램을 만들 수 있습니다.
SPA-React의 또 다른 중요한 특징은 한 페이지 응용 프로그램(SPA)이라는 것이다.이것은 사용자가 다른 보기를 보여야 할 때, React는 새로운 웹 페이지를 가져오지 않고, 백엔드 서버에서 얻은 새로운 데이터를 사용하여 현재 웹 페이지를 다시 쓸 뿐이라는 것을 의미한다.
가상 DOM을 사용하여 빠르게 렌더링 - DOM을 업데이트하는 것은 일반적으로 웹 성능의 병목이다.React는 가상 DOM을 사용합니다.기억에 남는 DOM.모든 보기 변경 사항은 가상 DOM에 먼저 반영된 다음에 가상 DOM의 이전과 현재 상태를 비교하고 DOM에 필요한 변경 사항과 최소한의 변경 사항만 적용합니다.이것은 React의 고성능 배후의 주요 원인이다.
본문의 주요 목표-

React가 UI에 HTML을 렌더링하는 방법을 알아봅니다.

JSX를 사용하는 방법에 대해 알아보십시오.

React 구성 요소, 상태, 아이템과 생명주기 방법을 이해한다.

React 애플리케이션(비디오)을 처음부터 만듭니다.

시작 -

먼저 터미널에 들어가서 -

npx create-react-app videos

이 지침은 이름 비디오가 있는 React 애플리케이션 템플릿 만들기
브라우저의localhost:3000에서 프로그램을 실행하려면 터미널 형식 -

cd videos
npm start

이것이 바로 브라우저의 외관입니다 -

정리 -

src 폴더를 열고 다음 파일 - App을 삭제합니다.테스트상표svg, 설정 테스트.js
프로그램의 모든 내용을 삭제합니다.js와 인덱스.js 파일.
이제 프로젝트를 설정하고 불필요한 파일을 정리했으니 React를 계속 이해할 수 있습니다.
색인에 있습니다.js 파일, 다음 내용 배치 -

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.querySelector('#root'));

첫 번째 줄과 두 번째 줄: React와 React dom 라이브러리를 가져옵니다.react 모듈은 JavaScript(JSX)에서 HTML 코드를 작성하는 데 사용되며, react dom은 페이지에 표시할 내용을 렌더링하는 함수를 실행하는 데 사용됩니다.
세 번째 줄: 응용 프로그램 구성 요소를 가져옵니다.
네 번째 줄: id가 루트인 용기에서 프로그램을 보여줍니다.
반응 구역.렌더링 방법 -
이 방법은 응용 프로그램 구성 요소를 브라우저의 DOM에 삽입하는 데 사용됩니다.그것이 필요로 하는 첫 번째 파라미터는 React 구성 요소로 렌더링하고, 두 번째 신기한 파라미터는 우리가 공공/인덱스의 위치를 어떻게 지정하는지 하는 것입니다.구성 요소의 html 파일을 삽입해야 합니다.공공/index에서 루트 <div> 요소로 id를 찾을 수 있습니다.html.이 <div> 요소는 React 컨테이너 노드입니다.render () 함수를 처음 호출하면 전체 컨테이너 노드가 Appcomponent로 바뀝니다.
이제 응용 프로그램 구성 요소(App.js 파일로 이동)를 작성하지만, 그 전에 기초 지식을 알아보자-
JSX-React는 JSX(JavaScript XML)를 사용하는 문장을 지원할 수 있으며, JSX는 HTML과 비슷한 문장을 사용하여 JavaScript에서 UI 요소(구성 요소)를 만들 수 있습니다.우리가 HTML을 작성하는 방식과 매우 유사하기 때문에 JSX 기호를 더욱 쉽게 사용할 수 있다는 것을 알게 될 것이다.
구성 요소 - 앞에서 말한 바와 같이 React는 구성 요소를 기반으로 하고 구성 요소는 React의 구축 블록이며 하나의 요소가 하나의 구성 요소를 구성한다.일반적으로 탐색 모음의 모양, 컨텐츠 탭의 모양, 로그인 양식의 모양 등을 정의하는 구성 요소가 있습니다. UI 섹션의 시각(요소) 및 논리(기능) 측면을 함께 포장하는 데도 도움이 됩니다.
우리 프로젝트를 몇 부분으로 분해해서 -

응용 프로그램에 4개의 구성 요소가 있습니다.

검색 표시줄(상단)

비디오 세부 사항(왼쪽)

비디오 목록(오른쪽)

비디오 항목(비디오 목록 항목)

기능 구성 요소 -
구성 요소를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다.
응용 프로그램 내.js-

import React from 'react';

function App(props) {
    return ();
}

이 함수는 데이터가 있는'props'대상 파라미터를 받아들이고 구성 요소를 보여줄 때 보여줄 요소를 되돌려주는 유효한 React 구성 요소입니다.이러한 구성 요소는 실제로 JavaScript 함수이기 때문에 기능 구성 요소라고 합니다.
클래스 기반 구성 요소 -
React 어셈블리를 생성할 때는 어셈블리 이름이 대문자로 시작해야 합니다.이 구성 요소는 다음과 같은 구성 요소를 포함해야 합니다.Component 문, 응답을 위한 계승을 만듭니다.구성 요소, 그리고 구성 요소가 반응할 수 있도록 합니다.구성 요소의 기능.React 구성 요소에는 최소한render() 함수가 있어야 합니다.함수는 어셈블리를 렌더링할 때 렌더링할 요소를 반환하는 역할을 합니다.
구성 요소 "component"를 보여 주려면 <Component /> 표시를 사용하십시오.
응용 프로그램 구성 요소(App.js)
이것은 상술한 기능 구성 요소와 맞먹는다.

import React from 'react';

class App extends React.Component {
  render() {
    return ();
  }
}

관리 클래스 구성 요소의 상태 -
특정 구성 요소와 관련된 데이터는'상태'로 저장할 수 있습니다.구성 요소의 상태는 특정 구성 요소에서만 변경할 수 있습니다.모든 상태 변수는 키 값으로 클래스 변수 state 에 맞춰집니다.
React는 상태가 변경될 때마다 UI를 다시 표시합니다.
상태 수정 -

어셈블리를 다시 렌더링하지 않으므로 상태를 직접 수정하지 마십시오.

개용setState().setState () 를 호출할 때, React는 상태가 바뀌었다는 것을 알고, 화면에 표시될 내용을 알아보기 위해render () 방법을 다시 호출합니다.
예를 들어,

state = {selectedVideo: null}

//Wrong
this.state.selectedVideo = 'Something'

//Correct
this.setState({ selectedVideo: 'Something' })

JSX 표현에서 정규 JavaScript 표현식을 괄호 ("{}") 에 포장해서 삽입할 수도 있습니다.
예컨대-

<h1>{ 2 + 5 * 8 }</h1>

<p> Current Selected Video is : {this.state.selectedVideo} </p>

초기에는 상태는 클래스 구성 요소에서만 사용할 수 있었고 기능 구성 요소에서는 사용할 수 없었음을 주의하십시오.이것이 바로 기능 구성 요소도 무상태 구성 요소라고 불리는 이유다.
그러나 React 갈고리를 도입한 후에 상태는 현재 클래스와 기능 구성 요소에서 사용할 수 있습니다.
이 프로젝트에서, 우리는 React 갈고리를 사용하지 않았기 때문에, 상태 변수가 필요하면 클래스 구성 요소를 사용할 것입니다. 그렇지 않으면 간단한 함수 구성 요소를 사용할 것입니다.
속성을 계승하는 아이템-
사용자가 이 파일에 저장된 동영상을 선택했다고 가정하십시오.주 정부.SelectedVideo 상태 변수.VideoDetail 구성 요소에 비디오를 표시하려면 선택한 비디오의 정보를 VideoDetail 구성 요소에 전달해야 합니다.도구나 속성은 부모 구성 요소에서 하위 구성 요소로 데이터를 전달할 수 있도록 합니다.HTML 속성을 전달하는 것과 유사한 방법으로 'props' 값을 단일 구성 요소에 전달할 수 있습니다.

<VideoDetail video={this.state.selectedVideo} />

video는 여기에 정의된 도구로 선택한 영상 데이터를 포함한다.그리고 우리는 도구를 통해 하나의 함수에 값을 부여하는 것처럼 데이터를 전달할 수 있다.

const VideoDetail = (props) => {
   // code
}

마지막으로, 우리는 점 기호를 사용하여 도구 데이터에 접근하여 그것을 도구로 사용한다.비디오'
클래스 구성 요소에서 우리는 this.props.video를 통해 속성에 접근할 수 있다
JSX의 요소는 JavaScript 객체일 뿐입니다.이것은 JSX 요소의 도구와 하위 요소가 자바스크립트 변수에 넣을 수 있다는 것을 의미한다 — 그것들은 문자열, 상태 변수, 기타 구성 요소, 심지어 함수일 수도 있다.프로젝트에서 우리가 어떻게 다른 물건을 도구로 구성 요소에 전달하는지 보실 수 있습니다.
라이프 사이클 방법-
React 어셈블리 인스턴스의 라이프 사이클은 세 단계로 구성됩니다.
마운트 - DOM을 생성하고 삽입할 때
업데이트 - 상태 값의 변경으로 인해 업데이트되거나 다시 나타날 때.
제거 - DOM에서 제거할 때
각 라이프 사이클 단계는 일련의 라이프 사이클 방법을 실행합니다.
1.componentDidMount() - 구성 요소를 불러온 후 바로 호출하여 DOM 노드가 있어야 하는 초기화를 수행할 수 있습니다.여기서 API에서 데이터를 가져오는 등의 작업을 수행할 수 있습니다.
2.componentDidUpdate() - 어셈블리의 도구나 상태 값이 변경되면 어셈블리가 업데이트/다시 표시됩니다.구성 요소가 업데이트되면 componentDidUpdate()를 즉시 호출합니다.그것은 다시 렌더링한 후에 실행하는 모든 논리에 사용할 수 있습니다.
또 다른 몇 가지 생명주기 방법이 있는데, 나는 본문에서 설명하지 않을 것이다.이 프로젝트에서 componentDidMount()만 사용할 것입니다.
좋아!!
이제 우리는 이미 이 문제를 해결했고, 마침내 우리의 발을 흠뻑 젖힐 때가 되었다!
중요한 알림: 의미 ui를 사용하여 구성 요소의 스타일을 설정할 것입니다.(의미는 인간적인 HTML로 아름답고 신속한 레이아웃을 만드는 데 도움을 줄 수 있는 개발 프레임워크이다.)이를 위해 공공/인덱스에 있는 헤드에 이 줄을 추가하십시오.html-
<link rel = 'stylesheet' href = "https://cdnjs.cloudflare.com/ajax/libs/semanticui/2.4.1/semantic.min.css"
integrity = "sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin = "anonymous" />


프로젝트 폴더 구조 -

또한 본고의 목표는 주로 React 개념에 주목하는 것이므로 주의하십시오.그러니 상관없는 이야기는 소홀히 하세요.
색인js-`

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.querySelector('#root'));

API/youtube.js

import axios from 'axios';

// create your youtube api key and place it here
const KEY = YOUR_API_KEY;

// setting up base instance in which you can define a URL and
// any other configuration elements.
// and exporting as default.

export default axios.create({
    baseURL: 'https://www.googleapis.com/youtube/v3',
    params: {
        part: 'snippet',
        maxResults: 5,
        key: KEY
    }
});

// we can import this instance from other files and no longer need to write 
// whole URL everytime we call API

비디오 항목.js

import './VideoItem.css';
import React from 'react';

// takes props video object and onVideoSelect function
// we call onVideoSelect when user clicks the video

// What does a VideoItem Component contains?
// yepp, Video Thumbnail and Video title

const VideoItem = ({ video, onVideoSelect }) => {
    return (
        <div onClick={() => onVideoSelect(video)} className="item video-item">
            <img alt={video.snippet.title} className="ui image" src={video.snippet.thumbnails.medium.url} />
            <div className="content">
                <div className="header">{video.snippet.title}</div>
            </div>
        </div>
    );
}

export default VideoItem;

비디오 항목.css

.video-item{
    display: flex !important;
    align-items: center !important;
    cursor: pointer;
}

.video-item.item img{
    max-width: 180px;
}

비디오 리스트.js

import React from 'react';
import VideoItem from './VideoItem';

// takes videos (video array) and onVideoSelect function
// What does a VideoList contain?
// yepp, List of Video (specifically VideoItems)
// So we iterate over videos array and make a VideoItem for each
// Note We are passing video and OnVideoSelect as props to VideoItem

const VideoList = ({ videos, onVideoSelect }) => {

    const renderedList = videos.map((video) => {
        return <VideoItem key={video.id.videoId} onVideoSelect={onVideoSelect} video={video} />;
    })

    return <div className="ui relaxed divided list">{renderedList}</div>;

}

export default VideoList;

비디오 세부 사항.js

import React from 'react';

// videoDetail takes the selectedVideo and displays its info.

const VideoDetail = ({ video }) => {
    if (!video) {
        return <div>Loading...</div>;
    }

    //This url is for fetching selectedVideo
    const videoSrc = `https://www.youtube.com/embed/${video.id.videoId}`;

    return (
        <div>
            <div className="ui embed">
                <iframe title="video player" src={videoSrc} />
            </div>
            <div className="ui segment">
                <h4 className="ui header">{video.snippet.title}</h4>
                <p>{video.snippet.description}</p>
            </div>
        </div>
    );
}

export default VideoDetail;

수색란.js

import React from 'react';

// state variable "term" stores what user types in searchBar

class SearchBar extends React.Component {
    state = { term: '' };

    // this sets the "term" to what user types in. (in sync)
    onInputChange = (e) => {
        this.setState({ term: e.target.value });
    }

    // it is called when user submits the "term"
    // which in turn calls the onTermSubmit() function passed as its prop
    onSearchBarSubmit = (e) => {
        e.preventDefault();
        this.props.onTermSubmit(this.state.term);
    }

    render() {
        return (
            <div className="ui segment search-bar" style={{ marginTop: '20px' }}>
                <form onSubmit={this.onSearchBarSubmit} className="ui form">
                    <div className="field">
                        <label>Video Search</label>
                        <input
                            style={{ backgroundColor: 'whitesmoke' }}
                            type="text" value={this.state.term}
                            onChange={this.onInputChange}
                        />
                    </div>
                </form>
            </div>
        );
    }
}

export default SearchBar;

응용 프로그램.js

import React from 'react';
import SearchBar from './SearchBar';
import VideoList from './VideoList';
import youtube from '../apis/youtube';
import VideoDetail from './VideoDetail';

class App extends React.Component {
    state = { videos: [], selectedVideo: null };
    // videos - array of videos based on term that user passed in searchbar (initally empty)
    // selectedVideo - video selected to display on left 


    // this lifecycle method is called when App component gets mounted 
    componentDidMount() {
        this.onTermSubmit('dev.to');
    }
    // Note that here 'dev.to' is initial term for which videos will be searched
    // It is random



    // This function is the one that accepts the term and fetches videos
    // and set "videos" state variable to fetched videos and
    // selectedVideo to the first video of videos
    onTermSubmit = async (term) => {
        const response = await youtube.get('/search', {
            params: {
                q: term
            }
        });
        this.setState({ videos: response.data.items, selectedVideo: response.data.items[0] });
    }

    onVideoSelect = (video) => {
        this.setState({ selectedVideo: video });
    };

    render() {
        return (
            <div className="ui container" style={{ backgroundColor: 'whitesmoke', padding: '40px' }}>
                <SearchBar onTermSubmit={this.onTermSubmit} />
                <div className="ui grid">
                    <div className="ui row">
                        <div className="eleven wide column">
                            <VideoDetail video={this.state.selectedVideo} />
                        </div>
                        <div className="five wide column">
                            <VideoList onVideoSelect={this.onVideoSelect} videos={this.state.videos} />
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

export default App;

결론

본고에서 우리는 ReactJS의 기본 개념과 이러한 개념을 실제 프로젝트에 어떻게 응용하는지 배웠다.현재, 당신은 React에 대해 기본적으로 알고 있으며, 예를 들어 연결, Redux 등 더 높은 주제로 넘어갈 수 있습니다.

읽어주셔서 감사합니다.

이것은 내가 Dev에 올린 첫 번째 게시물이다. 나는 네가 이 글을 좋아하고 물에 잠기지 않기를 바란다.만약 당신이 이 문장을 좋아한다면,❤️. 즐거움 코드😊.