ReactJS中的簡單“Hello World”無法正常工作

Question

我不是把你的世界作為輸出。 任何人都可以告訴我我缺少什么，它是一個基本代碼，使用createElement函數以不同的方式獲得輸出。 我是新來的反應。

碼：

<!DOCTYPE html>
<html>
    <head>
        <title>My First App</title>
    </head>
    <body>
        <div id="react-app"></div>
        <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
        <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>

        <script type="text/jsx">

            class StoryBox extends React.Component{
                render(){
                    return(<div> Hello World </div> );
                }
            }

            var target= document.getElementById('react-app')
            ReactDOM.render(<StoryBox>,target);
        </script>
    </body>
</html>

Answer 1

做這些改變：

1.包括babel獨立腳本來轉換你的jsx，把cdn鏈接放在head部分，腳本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

2.而不是storyBox使用StoryBox （大寫S），檢查這個答案是有原因的。

3.你忘了關閉，這里： <storyBox> ，使用這個： <StoryBox /> 。

4，而不是Div使用div 。

檢查工作代碼段：

 <!DOCTYPE html> <html> <head> <title>My First App</title> <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script> <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> </head> <body> <div id="react-app"></div> <script type="text/jsx"> class StoryBox extends React.Component{ render(){ return(<div> Hello World </div> ); } } var target= document.getElementById('react-app') ReactDOM.render(<StoryBox/>,target) </script> </body> </html>

Answer 2

您還需要添加babel，將jsx轉換為es5。 這是示例代碼。 注意：您的cdn for react拋出錯誤，所以我使用了其他cdn。

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

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

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

PS如果你想嘗試使用npm包進行反應，這里是一個簡單的github存儲庫。

Answer 3

您需要包含一個JSXTransformer才能執行原始JSX。 嘗試運行以下代碼：

<div id="react-app">
</div>

<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

<script type="text/jsx">
  class StoryBox extends React.Component{
    render(){
      return(<div> Hello World </div> );
    }
  }
  ReactDOM.render(<StoryBox />, document.getElementById('react-app'))
</script>

Answer 4

你需要添加JSX自動關閉標簽/> - 當沒有孩子時。

替換這一行：

ReactDOM.render(<StoryBox>,target)

至

ReactDOM.render(<StoryBox />,target)

查看工作代碼：

 class StoryBox extends React.Component{ render(){ return(<div> Hello World </div>); } } var target= document.getElementById('react-app') ReactDOM.render(<StoryBox />,target)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="react-app"></div>

ReactJS中的簡單“Hello World”無法正常工作

問題描述

4 個解決方案

解決方案1
8 已采納 2017-07-05 07:04:11

解決方案2
2 2017-07-05 07:06:37

解決方案3
1 2017-07-05 07:03:22

解決方案4
0 2017-07-05 07:03:18

ReactJS中的簡單“Hello World”無法正常工作

問題描述

4 個解決方案

解決方案1 8 已采納 2017-07-05 07:04:11

解決方案2 2 2017-07-05 07:06:37

解決方案3 1 2017-07-05 07:03:22

解決方案4 0 2017-07-05 07:03:18

解決方案1
8 已采納 2017-07-05 07:04:11

解決方案2
2 2017-07-05 07:06:37

解決方案3
1 2017-07-05 07:03:22

解決方案4
0 2017-07-05 07:03:18