반응 렌더링에 아무 것도 표시되지 않습니다.

Question

내 반응 코드가 아무것도 표시되지 않습니다.

JS

class HelloWorld extends React.Component { 
    render() { 
     return (<div>Hello World!</div>); 
    } 
} 
var app = document.getElementById("mainapp"); 
React.render(<HelloWorld />, app); 

HTML

<div id='mainapp'></div> 

나는 반응 ReactDOM는 CDN 물마루 수입했다. React/ReactDOM을 콘솔에 입력하면 제대로 가져옵니다. 이 코드는 오류를 표시하지 않지만 나는 아무것도 볼 수 없습니다. 나는 여러 브라우저 (크롬, 파이어 폭스, icecat)에서 이것을 테스트했지만 아직 결과가 없다 ... 나는 bable을 사용하고있다.

Answer 1

ReactDOM.render 아니요 React.render으로 변경하십시오.

class HelloWorld extends React.Component { 
 
    render() { 
 
     return <div>Hello World!</div>; 
 
    } 
 
} 
 
var app = document.getElementById("mainapp"); 
 
ReactDOM.render(
 
    <HelloWorld/>, 
 
    app 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script> 
 
<div id='mainapp'></div>

Answer 2

구성 요소가 벗겨진 문자열 대신 요소를 반환해야합니다. 수정하려면 <div>Hello World!</div>

Answer 3

두 가지

1. 당신은 반응 유효한 요소
2. 사용 ReactDOM.render 대신 React.render

발췌문

0을 반환해야 12,

또한 ReactDOM

내가 문자열, HTML과 jsx의 모든 조합을 시도했습니다

react vs react DOM confusion