iT邦幫忙

0

無法使用js套件

我試過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>

顯示出來卻是https://ithelp.ithome.com.tw/upload/images/20201126/20132883rKjmwcu4g3.jpg

誰能995

看更多先前的討論...收起先前的討論...
marlin12 iT邦研究生 5 級 ‧ 2020-11-26 18:56:56 檢舉
React要求組件名稱的第一個英文字母是大寫,否則會被誤認為是html標籤,把myfirst改為Myfirst吧!
好的,我試試看
試過了之後還是一樣
marlin12 iT邦研究生 5 級 ‧ 2020-11-27 19:23:22 檢舉
看這裏吧
https://codepen.io/marlin12/pen/ExgxdaK?editors=1010
codepen一定可以我知道,可是我就是不懂為啥本機端跑不起來
0
浩瀚星空
iT邦超人 1 級 ‧ 2020-11-26 17:09:36

善用一下f12大法。你才能了解你是碰上了什麼問題。
比起你在那邊猜猜樂來的好。

先從f12看看發生了什麼事吧。要不然很難協助您的。

看更多先前的回應...收起先前的回應...

我有用過f12大法了,只是該連的都有連到,就是不知道到底哪裡出問題

Html的標籤有變,變成myfirst可是裡面沒資料,所以才是白框裡面沒東西

Html的標籤有變,變成myfirst可是裡面沒資料,所以才是白框裡面沒東西

Html的標籤有變,變成myfirst可是裡面沒資料,所以才是白框裡面沒東西

2
咖咖拉
iT邦研究生 4 級 ‧ 2020-11-26 20:06:36
    <script type="text/babel" >
        ReactDOM.render(
            <h1>Hello, world!</h1>,
        document.getElementById('msg')
        );
    </script>

不要外掛JS檔案 直接寫在HTML檔案裏面

看更多先前的回應...收起先前的回應...
fillano iT邦超人 1 級 ‧ 2020-11-27 09:48:10 檢舉

https://jsfiddle.net/fillano/jtf2svgm/1/
這樣看來沒問題...是因為Babel的關係嗎?

咖咖拉 iT邦研究生 4 級 ‧ 2020-11-27 10:26:48 檢舉

是的
react的JSX一定要用babel才可以運行
CDN要配合自動化工具才會方便

不過...他的問題是因為沒大寫XD
myfirst-->Myfirst

我轉大寫之後還是沒有變化QQ

==為什麼?難道我電腦系統不給用嗎

咖咖拉 iT邦研究生 4 級 ‧ 2020-11-28 09:25:53 檢舉
var Myfirst = React.createClass({
    displayName:'my component',
    render:function(){
        return(
            <p>此為React的範例程式</p>
        );
    }   
});

ReactDOM.render(
<Myfirst />,
document.getElementById('msg')
);

....

0
iT邦新手 5 級 ‧ 2020-11-30 12:04:21

嗨,我都用 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.

Why use React CreateReactClass?

我要發表回答

立即登入回答