Simple "Hello World" in ReactJS not working

Não estou a receber o "hello world" como uma saída. Alguém pode me dizer o que eu estou faltando , é um código básico , tem uma saída de uma maneira diferente usando a função createElement. Sou novo para reagir.

Código: 

<!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>
Author: Mayank Shukla, 2017-07-05
Source

4 answers

Faça estas alterações:

1. incluir script de babel standalone para transformar o seu jsx, coloque as ligações cdn na parte principal, script: 

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

2. em vez de storyBox Usar StoryBox (capital s), verifique isto resposta por alguma razão.

3. Esqueceste-te de fechar, aqui: <storyBox>, usa isto: <StoryBox />.

4. em vez de Div, utilizar div.

Verifica o trabalho. excerto: 

<!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>
 6
Author: Mayank Shukla, 2018-02-16 09:16:10

Você precisa adicionar babel também, para transformar o seu jsx em es5. Aqui está o código da amostra. Nota: o seu cdn para reat foi um erro de lançamento, por isso usei outro 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/[email protected]/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>

P. S. Se quiser tentar reagir usando pacotes npm aqui é um repositório github simples para começar.

 1
Author: Upasana, 2017-07-05 07:06:37
- Quando não houver crianças.

Substitui esta linha: 

ReactDOM.render(<StoryBox>,target)

A 

ReactDOM.render(<StoryBox />,target)

Ver código de trabalho: 

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>
 0
Author: loelsonk, 2017-07-05 07:03:18

Você precisa incluir um JSXTransformer para ser capaz de executar o raw JSX. Tente executar o código abaixo: 

<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>
 0
Author: Tadeáš Peták, 2017-07-05 07:03:22