React.renderComponent가 함수가 아닙니다.

ReactJ에 대한 초보자 용 기사를 읽었습니다. 내가 읽은 기사는 코드 조각만을 보여주었습니다. 나는 나의 첫 번째 구성 요소에 문제가있어 :React.renderComponent가 함수가 아닙니다.

전체 코드 : 나는 embedded:11 Uncaught TypeError: React.renderComponent is not a function를 볼 수있는 페이지를 열 때

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script> 
    <meta charset="UTF-8"> 
    <title>HELLO WORLD</title> 
</head> 
<body> 
<div id="content"></div> 


<script type="text/babel"> 
    var HelloWorld = React.createClass({ 
     render: function() { 
      return React.DOM.h1("hello world!!"); 
     } 
    }); 

    React.renderComponent(
     HelloWorld, 
     document.getElementById("content") 
    ); 
</script> 
</body> 
</html>

이

사람이 올바른 방향으로 날 지점 주실 수 있습니까?

나는 또한 행운과 함께이 시도했습니다

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> 
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>--> 
    <meta charset="UTF-8"> 
    <title>HELLO WORLD</title> 
</head> 
<body> 
<div id="content"></div> 


<script type="text/babel"> 
    var HelloWorld = React.createClass({ 
     render: function() { 
      return React.createElement("h1", null, "Hello world!!"); 
     } 
    }); 

    ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content")); 
</script> 
</body> 
</html>

출처

2016-10-19 gstackoverflow

편집 : 나는 당신이 사용되지 않습니다 babel-corebrowser.js를 사용하는 것이 참조를 제거하고 직접 반작용 사용합니다.

제거 script 종류와 대체 모든과 :

var HelloWorld = React.createClass({ 
    render: function() { 
    return React.createElement("h1", null, "Hello world!!"); 
    } 
}); 

ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));

jsbin demo

출처

2016-10-19 14:00:26

I 돈 오류가 표시되지만 페이지가 비어 있습니다. – gstackoverflow

@gstackoverflow 수정 된 답변, 이제 작동합니다. –

당신의 첫 번째 예제와 문제는 React.renderComponent 함수되지 않는 것입니다, 당신은 대신 ReactDOM.render를 사용해야합니다. 이제는 많은 노력을 기울여야하며 create-react-app을 사용하고이 응용 프로그램을 사용하십시오. 신속하게 사용할 수 있도록 툴팩에서 모든 고통을 씻어냅니다 (웹팩 핫 모듈 리로딩). 그것은 다른 경로를 취하는 데 필요한 평균 툴링에 비해 매우 간단하며 React를 만드는 사람들이 만듭니다. 당신이 사용하는 React의 버전 번호로 알 수 있습니다. 자습서는 입니다.입니다. 매우 오래 전부터 페이스 북은 일이 더 어려워 졌을 때 생성 반응 - 앱을 발표했습니다. 인라인 그것에 대해 갈 경우

, 당신의 머리에서 이것을 사용 -

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>

전체 작업 예 반응에 15 -

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script> 
 
    <title>HELLO WORLD</title> 
 
</head> 
 
<body> 
 
    <div id="content"></div> 
 
    <script> 
 
    var HelloWorld = React.createClass({ 
 
     render: function() { 
 
      return React.createElement("h1", null, "Hello world!!"); 
 
     } 
 
    }); 
 
    ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content")); 
 
    </script> 
 
</body> 
 
</html>

출처

2016-10-19 14:14:37 cchamberlain

React.renderComponent가 함수가 아닙니다.

답변

관련 문제