Есть ли возможность переводить JSX код в JS (ES5?) код без установки 20 веб серверов 5 интерпретаторов 3 либ и одного драйвера? Тоесть без nodejs npm и всего этого зоопарка хипстерского, закончив лишь самим react'om?
-
1По какому признаку вы отделяете сам react от всего этого хипстерского зоопарка? – vp_arth 28 фев '17 в 14:40
-
да можно без ноды github.com/babel/babel-standalone – Утка Учится Укрываться 28 фев '17 в 14:45
-
по функциональному признаку. react is an open-source JavaScript library for building user interfaces. библиотека, а не зоопарк серверов и кодировщиков на машине разработчика. – Newbie127 28 фев '17 в 14:46
-
без зоопарка все равно будет тяжело, потому что зоопарк дает кучу всего для большого приложения. Но можно, я выше ссылку дал. – Утка Учится Укрываться 28 фев '17 в 14:48
-
Объясните подробнее, почему у вас не получается установить 20 веб серверов и остальные либы. – Vladimir Gamalyan 28 фев '17 в 14:48
1 ответ
Можно вручную.
Об этом есть даже страница на сайте React: "React without JSX".
Вот пример эквивалентного кода с JSX:
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
);
...и без него:
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
Поскольку получается много вызовов React.createElement
, предлагается сделать для этой функции псевдоним покороче, с ним становится почти прилично:
const e = React.createElement;
class Hello extends React.Component {
render() {
return e('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
e(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
Избавлению от ES6 посвящена отдельная страница, "React without ES6". В данном примере из него только интерполяция строк и объявление класса, в контексте React они заменяются на сложение строк и React.createClass
соответственно:
const e = React.createElement;
var Hello = React.createClass({
render: function() {
return e('div', null, 'Hello ' + this.props.toWhat);
}
});
ReactDOM.render(
e(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
Если вас устраивает такой синтаксис, то пожалуйста, можете писать так.
-
скажите, Вы показали как обойтись без jsx, хотя вопрос был как писать на jsx без nodejs? – user220409 3 мар '17 в 14:11
-
-
@OlmerDale прочитайте первые два слова ответа. И если разгадка не придёт, ещё раз перечитайте вопрос и первые два слова ответа. – user181100 3 мар '17 в 14:14
-
Я плюсанул. Потому что вопрос состоит как бы из двух частей "как писать на jsx без ноды" и "как писать на реакте без хипстерского зоопарка". Если первая часть освещена недостаточно подробно, то вторая более чем. – Утка Учится Укрываться 3 мар '17 в 14:46