Reactjs - Webpack Complie 오류 : 모듈 빌드가 실패했습니다.

Question

저는 React의 초보자입니다. 나는 Udemy에서 React 과정을 따라 왔고 문제가 떠올랐다. 오류가 매우 명확하고 그것을 해결하려했지만 내 코드에 무엇이 잘못된 것인지 확인할 수 없었습니다.

이 내 프로젝트 구조

이 내가 콘솔에서지고있어 오류입니다.

ERROR in ./src/components/video_list.js 
Module build failed: SyntaxError: Unexpected token (5:8) 

    3 | 
    4 | class VideoList extends Component{ 
> 5 | const videoItems = this.props.videos.map((video) => { 
    |  ^
    6 |  return <VideoListItem video={video} /> 
    7 | }); 
    8 | 

@ ./src/index.js 21:18-52 
webpack: Failed to compile. 

이 인 errornous 코드에 대한 내 소스 코드 'video_list.js'

import React, {Component} from 'react'; 
import VideoListItem from './video_list_item'; 

class VideoList extends Component{ 
    const videoItems = this.props.videos.map((video) => { 
    return <VideoListItem video={video} /> 
    }); 

    render(){ 
    return (
     <ul className="col-md-4 list-group"> 
     {videoItems} 
     </ul> 
    ); 
    } 
} 

export default VideoList; 

내가 가져 정확하게 모든 것을 내 보낸. 왜냐하면 위의 코드를이 코드로 변경하면 완벽하게 작동하고 (컴파일 된) 예상 된 결과를 얻을 수 있기 때문입니다.

import React, {Component} from 'react'; 
import VideoListItem from './video_list_item'; 

class VideoList extends Component{ 
    // const videoItems = this.props.videos.map((video) => { 
    // return <VideoListItem video={video} /> 
    // }); 

    render(){ 
    return (
     <ul className="col-md-4 list-group"> 
     {this.props.videos.length} 
     </ul> 
    ); 
    } 
} 

export default VideoList; 

내 코드에서 무엇이 잘못 되었습니까? 내 videoItems 기능에 문제가 있습니다.

이것은 udemy에 관한 this 자습서와 관련됩니다. 과정에서는 구성 요소 기반 구조를 따르고 있습니다. 그러나 내가 선호하는 클래스 기반 구조 (class VideoList extends Component)

Answer 1

videoItems 함수를 render() 함수로 옮겨서 문제를 해결했습니다. 그것은 혼란이었다.