我試過js套件像是vue.js跟react.js,只要適用cdn的方式一定沒辦法顯示,是因為電腦權限的問題嗎?
我的react程式是這樣
main.js:
var myfirst = React.createClass({
displayName:'my component',
render:function(){
return(
<p>此為React的範例程式</p>
);
}
});
ReactDOM.render(
<myfirst />,
document.getElementById('msg')
);
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js'></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>React JS</h1>
<div id="msg">wait...</div>
<script type="text/babel" src="main.js"></script>
</body>
</html>
顯示出來卻是
誰能995
善用一下f12大法。你才能了解你是碰上了什麼問題。
比起你在那邊猜猜樂來的好。
先從f12看看發生了什麼事吧。要不然很難協助您的。
<script type="text/babel" >
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('msg')
);
</script>
不要外掛JS檔案 直接寫在HTML檔案裏面
https://jsfiddle.net/fillano/jtf2svgm/1/
這樣看來沒問題...是因為Babel的關係嗎?
是的
react的JSX一定要用babel才可以運行
CDN要配合自動化工具才會方便
不過...他的問題是因為沒大寫XD
myfirst-->Myfirst
我轉大寫之後還是沒有變化QQ
嗨,我都用 funtional component,所以沒用過 createClass ,以下是 google 到的,不知是不是這問題,提供參考。
With the release of React 16, React.createClass was removed, but it was moved to the separate create-react-class package to make upgrading easier on codebases that relied heavily on React.createClass.