React初學者工具包Hello World程序錯誤

我試圖在反應教程上提出一個「Hello World」程序建議。React初學者工具包Hello World程序錯誤

但我在src和helloworld.html的根下創建了helloworld.js。當我嘗試運行我的helloworld.html時（沒有任何反應）。而當我試圖運行helloworld.js錯誤下面介紹。

這是巴貝爾的問題嗎？

2016-08-01 ApurvG

是否遵循自述文件中的說明來正確設置？ – ajmajmajma

我做了任何指示。我可能錯過了一些東西，但我不知道如何糾正這一問題。 – ApurvG

你的helloworld.html是什麼樣的？預計截圖中的錯誤，因爲您試圖運行應該在瀏覽器中運行的JSX代碼，就好像它是一個純JS節點應用程序 – lena

你的第一個問題，爲什麼的helloworld.html返回什麼都沒有：您應該不需要在標籤中添加SRC = 「SRC/helloworld.js」。否則，會嘗試加載你的helloworld.js（這會導致你的第二個問題）。我創建了一個plunker - 它的工作原理沒有SRC = 「SRC/helloworld.js」

HTML文件：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Hello React!</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
    </head> 
    <body> 
    <div id="example"></div> 
    <script type="text/babel"> 
     ReactDOM.render(
     <div>test</div>, 
     document.getElementById('example') 
    ); 
    </script> 
    </body> 
</html>

演示： http://plnkr.co/edit/ONtPtVkCsnEqNYYtDFAv?p=preview

關於第二個問題。我想你會嘗試將腳本從helloworld.html中分離出來。您不需要導入，因爲您已經在html的head標籤中添加了react.js和react-dom.js。從腳本標記中加載src/helloworld.js時，ReactDOM.render已知。

HTML文件：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Hello React!</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
    </head> 
    <body> 
    <div id="example"></div> 
    <script type="text/babel" src="src/helloworld.js"> 
    </script> 
    </body> 
</html>

的src/helloworld.js

ReactDOM.render(
    <h1>Hello, world</h1>, 
    document.getElementById('example') 
);

演示： http://plnkr.co/edit/9uNkyaz65A4FMTHwdCtr?p=preview

編輯：

點擊瀏覽器，例如，我點擊Chrome和得到的Hello World！：

來源

2016-08-02 08:48:22 Vivian

file：///root/WebstormProjects/Tessact-React-Front/helloworld.html – ApurvG

我確實您提到的文件在Chrome瀏覽器中找不到文件 – ApurvG

您在file：///上的事實讓我覺得您不在任何web服務器後面您是使用webstorm打開html文件嗎？ – Vivian

React初學者工具包Hello World程序錯誤

回答

相關問題