Простой «Hello World» в React.js не работает

Я делаю простую программу «Hello World» в React.js. Я ожидаю, что «Hello World» будет напечатан в теле html.Простой «Hello World» в React.js не работает

index.html

<html> 
<head> 
<script src="http://fb.me/react-0.12.2.min.js"></script> 
<script> 
var HelloWorld = React.createClass({ 
    render: function() { 
     return <div>Hello, world!</div>; 
    } 
}); 
React.render(new HelloWorld(), document.body); 
</script> 
</head> 
<body> 
</body> 
</html>

Ошибка:

Uncaught SyntaxError: Unexpected token <

Может кто-нибудь сказать мне, где я делаю ошибку?

источник

2016-01-12 Deadpool

Вы не можете использовать JSX (

Hello, world!

) без преобразования JSX в прямую JS – Sol

Как это сделать ... можете ли вы любезно объяснить PLS? Я знаю хрюкать ... – Deadpool

Что вам не хватает, это то, что превращает JSX в JS. Вам нужно включить JSXTransformer.js. Также обратите внимание, что React.render не использует document.body, он должен быть элементом dom. Вот пример, который должен сработать:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My First React Example</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> 
    </head> 
    <body> 
    <div id="greeting-div"></div> 
    <script type="text/jsx"> 
     var Greeting = React.createClass({ 
     render: function() { 
      return (
      <p>Hello, Universe</p> 
     ) 
     } 
     }); 
     React.render(
     <Greeting/>, 
     document.getElementById('greeting-div') 
    ); 
    </script> 
    </body> 
</html>

источник

2016-01-12 07:56:33 Sol

Да, хорошо работает пример ... Thnx приятель! – Deadpool

Ответ Солса объясняет, почему простое приложение мира не выполняется. Лучшая практика на последний react.js по состоянию на январь 2017 года для импорта

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>

и имеет тип сценария установлен в text/babel.

С этим вы можете выполнить JSX нормально, например.

class Greeting extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <p>Hello, Universe</p> 
    ); 
    } 
}

источник

2017-01-12 21:50:35 wonton

Я просто подумал, что смогу поделиться своим решением со всеми. Я хотел создать простой проект без всех npm, узла guff, как у OP i, у меня были проблемы, мне потребовалось три часа, чтобы понять, ниже мое решение.

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Boy</title> 
    <link rel="stylesheet" type="text/css" href="css/app.css"> 
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> 
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 
    <script type ="text/babel" src="js/app.js"></script> 
</head> 
    <body> 
    <div id="root">Loading...</div> 

    </body> 
</html>

Ключ должен включать соответствующие файлы сценариев из React и Бабеля. Я использую внешний файл app.js, если вы хотите сделать это, тогда не забудьте указать type = "text/babel".

После выполнения вы можете выполнить пример мира привет от React. Мой app.js файл:

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

CSS файл:

#root { 
    color: skyblue; 
}

Я надеюсь, что это помогает.

источник

2018-01-06 12:35:46 SoftieLeftie

Добро пожаловать в SO. Спасибо, что ответили. Пожалуйста, закончите тур и наслаждайтесь SO ;-) – ZF007

Простой «Hello World» в React.js не работает

ответ

Смежные вопросы