내 반응은 렌더링되지 않습니다. 공백 만 표시합니다.

Question

이것은 내 HTML 코드입니다. 몇 달 전에 제대로 작동 했습니까? Ubuntu에서 전체 경로를 복사하여 브라우저에서 실행하고 있습니다. 이것은 React가 그 일을하지 않는 것과 관련이 있습니까? 여기

<div id='root'></div> 
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 

<script src="app.js" type="text/babel"></script> 

내가 물건을 렌더링 내 JS의 일부입니다. 잘 작동해야합니다. 프로그램 자체에 기능을 부여하는 기능을 생략했습니다.

render: function() { 
     return (
     <div className="todoListMain"> 
      <div className="header"> 
      <form onSubmit = {this.addItem}> 
       <input ref={(a) => this._inputElement = a} 
       placeholder="enter task"> 
       </input> 
       <button type="submit">add</button> 
      </form> 
      </div> 
      <TodoItems entries={this.state.items}/> 
     </div> 
    ); 
    } 
}); 


ReactDOM.render(
    <TodoList/>, 
    document.getElementById('root') 
); 

이 모든 작업은 이전에 잘 처리되었지만 그때는 Windows에서 wamp localhost를 사용했습니다.

Answer 1

CDN의 파일 시스템 (file://)과 React 및 Babel 라이브러리에서 직접 html 파일을로드하는 것 같습니다.

귀하의 브라우저는 보안상의 이유로 인해 거부 한 것처럼 보입니다.

어느 쪽이든 당신 넣어 반응하여 파일 시스템에 바벨의 도서관 옆 app.js

에 또는 웹 서버를 통해 HTTP를 통해 응용 프로그램을로드합니다.