2016-08-29 4 views
-2

Возможно ли запустить реакцию «из коробки» с использованием только javascript?Как запустить реакцию, используя только javascript

В основном то, что я ищу, - это способ использовать реакцию, используя только блокнот, чтобы написать страницу. (Без установки и cofigure узла и т.д ..)

в более detail- 1) есть стандартный встроенные замены для операторов узла, таких как -

требует («реагировать-дом»);

требуется ('MyExampleComponent'); и т. Д.

2) способ использования jsx с использованием импортированной библиотеки или метода перераспределения без необходимости компилировать файлы jsx в разные js-файлы.

вот пример того, что я хочу добиться:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    [import more required libraries if such exist] 
    <script type="text/javascript" src="1.js"> 
    </script> 
    <title>Title</title> 
</head> 
<body id="app"> 

</body> 
</html> 

1.js:

*[import script function]* ('react.js'); 
*[import script function]*('react-dom.js'); 
var testJsx=<h1>test</h1>; 
ReactDOM.render(testJsx,document.getElementById("app")); 
+3

Вы уверены, что ничего не произойдет? Я бы ожидал, что консоль сообщит * Некопать ReferenceError: importScripts не определен * – Quentin

+2

'var testJsx =

test

;' недействителен Javascript, это JSX. Вам необходимо включить browser.js (например, в «внешние ресурсы» этого JSFiddle) https://jsfiddle.net/reactjs/69z2wepo/ или использовать React.DOM.h1 ('test'); вместо; –

+0

@Quentin true, но не то, над чем я стреляю. Пожалуйста, взгляните на отредактированный вопрос. –

ответ

0

importScripts function является частью Web Worker API и не работает так, как вы пытаясь использовать его.


Кроме того, следующая строка содержит JSX:

var testJsx=<h1>test</h1>; 

Чтобы использовать JSX, вам необходимо включить шаг компиляции в процессе сборки, который превращает его в действительный JavaScript. Браузеры не могут изначально обрабатывать JSX.

+0

Я знаю, я редактировал вопрос, чтобы отразить то, что я хочу понять. basiclly есть способ импортировать скрипты без узла, а способ использования jsx –

1

Вы просто хотите избежать использования babel? Поскольку вы использовали JSX, я не думаю, что вы можете избежать Вавилона. Но если вы просто хотите, чтобы минимальная версия сценария для тестирования реагировала, вот оно.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script> 
    </head> 
    <body id="app"> 
     <script type="text/babel"> 
     ReactDOM.render(<h1>test</h1>,document.getElementById("app"));  
     </script> 
    </body> 
</html> 
+0

- это в значительной степени то, что им нужно, есть ли способ сделать эту работу из js-файлов? –

+1

Да, мне нужно только переместить что-нибудь между '' в файл и добавить атрибут src, например '