reactJS에서 예기치 않은 토큰 오류가 발생했습니다.

Question

reactjs를 배우려고하고 있지만 오류로 인해 머리가 부딪혀서 그 문제를 해결하는 방법을 이해할 수 없습니다.

import React , {Component} from 'react'; 
import './App.css'; 
import './footer.scss'; 


function NumberList(props){ 
    const numbers = props.numbers; 
    const listItems = numbers.map((numbers) => 
     <li>{numbers}</li> 
    ); 

    return(
     <ul>{listItems}</ul> 
    ); 
} 


const numbers = [1, 2, 3, 4]; 
ReactDOM.render(
    <NumberList numbers={numbers}/> 
    document.getElementById('root') 
); 

및 콘솔 것은이 반환 : :이 문제를 해결하기 위해 어떤 도움이 필요

/src/App.js 
Syntax error: Unexpected token, expected , (21:4) 

    19 | ReactDOM.render(
    20 |  <NumberList numbers={numbers}/> 
> 21 |  document.getElementById('root') 
    | ^
    22 |); 
    23 | 
    24 | 

여기

는 코드입니다. 임 반응식에 새로운 그래서 좋게하십시오.

감사합니다.

EDIT;

이 오류를 수정 한 후, 브라우저는이 반환 :

이

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. 
▶ 14 stack frames were collapsed. 
(anonymous function) 
src/index.js:7 

    4 | import registerServiceWorker from './registerServiceWorker'; 
    5 | import './index.css'; 
    6 | 
> 7 | ReactDOM.render(<App />, document.getElementById('root')); 
    8 | registerServiceWorker(); 
    9 | 
    10 | 

View compiled 
▶ 6 stack frames were collapsed. 
This screen is visible only in development. It will not appear if the app crashes in production. 
Open your browser’s developer console to further inspect this error. 

Answer 1

오타 같은 인수를 분리하는 ,를 사용

ReactDOM.render(<NumberList numbers={numbers}/>, document.getElementById('root')); 

Answer 2

변환하십시오 "NumberList을" 반응 성분에 적용될 수있다.

import React, { Component } from 'react'; 
import './App.css'; 
import './footer.scss'; 

class NumberList extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     const numbers = props.numbers; 
     const listItems = numbers.map(numbers => <li>{numbers}</li>); 

     return <ul>{listItems}</ul>; 
    } 
}