reactjs 구성 요소로 시작하기가 작동하지 않습니다.

저는 첫 번째 단계에서 reactjs와 직면 한 문제에 처음입니다. 도와주세요. 아래 .. 내가 "custom.jsx"파일에 동일한 코드를 작성했습니다 내 코드지만 문제는 (어떤 출력)reactjs 구성 요소로 시작하기가 작동하지 않습니다.

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <title>react demo</title>     
     <link rel="stylesheet" type="text/css" href="common/css/bootstrap.min.css" /> 
      <link rel="stylesheet" type="text/css" href="common/css/style.css" /> 
    </head> 
    <body> 


     <div id="root"></div> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom-server.js"></script> 
     <script type="text/javascript" src="common/js/bootstrap.min.js"></script> 
     <script src="common/js/custom.jsx"></script> 
     <script type="text/jsx"> 

     var button = React.createClass({ 
      render: function(){ 
       return (
        <button>go</button> 
      ) 
      } 
     }); 

     React.render(<button />,document.getElementById("root")); 

     </script> 
    </body> 
</html>

출처

2017-03-20 arjun singh

변경이 작동 변수의 이름이 동일하지 않습니다.

이유가입니다 : 이름은 HTML elements으로 처리됩니다 소문자로 시작, 모든 React 구성 요소가 대문자로 시작해야합니다 그 이유는,이 옵션을 선택합니다 : 대한

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>react demo</title>     
 
     <link rel="stylesheet" type="text/css" href="common/css/bootstrap.min.css" /> 
 
     <link rel="stylesheet" type="text/css" href="common/css/style.css" /> 
 
    </head> 
 
    <body> 
 

 
     <div id="root"></div> 
 

 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script> 
 

 
     <script type="text/jsx"> 
 

 
      var Button = React.createClass({ 
 
       render: function(){ 
 
        return (
 
         <button>go</button> 
 
        ) 
 
       } 
 
      }); 
 

 
      ReactDOM.render(<Button/> ,document.getElementById("root")); 
 

 
     </script> 
 
    </body> 
 
</html>

출처

2017-03-20 07:19:51

주셔서 감사합니다 대답. 코드 을 복사했지만 여전히 화면이 비어 있습니다. –

바벨 참조를 추가하는 것을 잊어 버렸습니다. 업데이트 된 답변 확인 : –

정말 고마워요. 잘 작동합니다 .. –

reactjs 구성 요소로 시작하기가 작동하지 않습니다.

답변

관련 문제