ReactJS渲染問題

剛開始學習React，這裏是我非常簡單的JSX和HTML文件。當我從http服務器運行它時，在Console（Chrome）中看不到任何錯誤。但是，我期望看到的按鈕不會顯示在瀏覽器中。我不確定它爲什麼沒有，缺少什麼。ReactJS渲染問題

任何人都可以請幫忙嗎？此外，我們爲什麼要指定類型=文本/通天塔」的標籤呢？如果我不這樣做，我在控制檯得到一個錯誤（意外語法<）。

謝謝！炳廷

HTML代碼：

<html> 
<head> 
<title> 
    !My first React JS Component! 
</title> 
</head> 

<body> 
    <div id="root"></div> 
    <script src="react.js"></script> 
    <script src="script.jsx" type="text/babel"></script> 
</body> 

</html>

我的JSX文件：

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

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

來源

2016-12-02 InfiniteLoop

你是如何處理這個問題的？你能分享你的webpack.config嗎？（如果這就是你使用的） –

@NicklasWinger對不起，在這裏啞巴。我甚至不知道webpack.config是什麼。我會仔細閱讀下面給出的鏈接，看看我能否修復它。感謝指針 – InfiniteLoop

看看我的答案中的鏈接。官方文檔應該很容易理解:) –

你不能只在你的網站包括這樣的jsx - 它不會工作:)

你需要通過像Webpack這樣的工具來傳輸你的jsx。官方documentation確實非常出色並且易於理解，它應該解釋您如何設置基本環境。

此外，還有數十本教程的，但這裏有一個免費的，我發現有幫助的，易於理解YouTube上：

React + Redux + Webpack（隨意跳過首發了Redux部分 - 真的只是一個流行的插件反應管理狀態，您可以在以後進行擴展）

良好的措施，這樣的事情應該工作：

<html> 

<head> 
    <meta charset="UTF-8"/> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script> 
</head> 

<body> 
    <div id="app"></div> 

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

</html>

App.jsx：

ReactDOM.render(
    <h1>Hello React!</h1>, 
    document.getElementById('app') 
);

來源

2016-12-02 06:47:43

ReactJS渲染問題

回答

相關問題