Reactjs - Webpack Complie Fehler: Modul Build fehlgeschlagen

Question

Ich bin ein Neuling zu reagieren. Ich habe einen React-Kurs zu Udemy verfolgt und ich habe ein Problem gefunden. Der Fehler ist sehr klar und ich habe versucht, es auszuarbeiten, aber ich konnte nicht identifizieren, was mit meinem Code falsch ist.

Das ist mein Projekt Struktur

Dies ist der Fehler, die ich in der Konsole zu bekommen.

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. 

Dies ist mein Quellcode für den errornous Code, der

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; 

I 'video_list.js' ist schon importiert und alles korrekt exportiert. Denn wenn ich den obigen Code auf diesen umstelle, funktioniert es (kompiliert) vollkommen in Ordnung und gibt das erwartete Ergebnis.

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; 

Was habe ich in meinem Code falsch gemacht? Was ist falsch mit meiner videoItems Funktion.

Dies ist in Bezug auf this Tutorial auf Udemy. Im Kurs folgt die komponentenbasierte Struktur. Aber wie ich meine Präferenz verwende ich Klasse basierte Struktur (class VideoList extends Component)

Answer 1

Moved videoItems Funktion in render() Funktion und löste das Problem. Es war eine Verwirrung.