Похожие записи:
- Отправка писем с сайта
- Функция batch_recursive_count_if с уровнем распаковки для произвольной вложенной итерируемой реализации произвольного типа в C ++
- aws —version error: bash: / usr / bin / aws: нет такого файла или каталога
- Undefined index (не записывается поле)
- Как проверить значение option у формы
mark2011
Взялся за изучение… открыл мануалы, послушал курсы…
вот всё, казалось бы, просто:
ReactDOM.render(element, document.getElementById(‘root’));
соответственно
<div id=»root»>
</div>
<script src=»https://unpkg.com/react@15/dist/react.js»></script>
<script src=»https://unpkg.com/react-dom@15/dist/react-dom.js»></script>
<script src=»https://searchengines.guru/ru/forum/js/main.js»></script>
</body>
Не пашет, сволочь :(:
ну т.е. он ругается, что строка не в кавычках. Но, как я прочитал и услышал, аргументы в ReactDOM.render() передаются именно таким образом.
Пытаюсь представить, что я дурак (возможно, так оно и есть) и делаю следующее:
ReactDOM.render(element, document.getElementById(‘root’));
Да нет, не дурак:
И? Чё не так-то?
PS Ну да, чтобы вопросы сразу убрать:
ivan-lev
вот всё, казалось бы, просто:
https://reactjs.org/docs/hello-world.html
https://codepen.io/pen?&editable=true&editors=0010
Aisamiery
Потому что это не html а jsx, браузер не понимает jsx без бабеля
Вам надо так:
ivan-lev
+1 за Бабель..
mark2011
ivan-lev,
да я всё понимаю… это то же самое…
ну ладно, переделал так, как на codepen — всё равно ругается на то, что строка с тегом не в кавычках. Как так-то? Я не понимаю… причём понимаю, что на codepen всё работает.
Надеюсь нет разницы, включать ли библиотеки react с unpkg.com или разворачивать локально с nodejs?
———- Добавлено 15.05.2020 в 19:35 ———-
Благодаря Aisamiery получилось разобраться, за что огромный респект!
———- Добавлено 15.05.2020 в 19:43 ———-
Aisamiery, а с другой стороны получается, что вот такое не реализовать что ли?
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById(‘root’));
}
Т.е. ситуация, когда нужно не один тег отрендерить, а сразу блок html.
Нашёл вот такое.
Но что-то я сильно сомневаюсь, чтобы такую бурду нужно было постоянно делать….
Aisamiery
Но что-то я сильно сомневаюсь, чтобы такую бурду нужно было постоянно делать….
Потому что обычно ставят вэбпак с бабелем и просто пишут код не задумываясь и там работает jsx и можно писать так, как пишите вы. Современный фронт сильно отличается от эпохи jQuery, когда просто закинул в хэад пару скриптов с сдн и все заработало. JS развивается сильно быстрее, чем за ним могут поспеть браузеры, по этому вэбпак уже стандарт.
Начните с какого нибудь стартового шаблона, на подобии https://create-react-app.dev/
SocFishing
Как уже было сказано, это пример с JSX, можно перегнать через babel в читаемый react вид.
Перегонка тут https://babeljs.io/repl
Ваш код получится следующим образом:
<body>
<div id=»root»>
</div>
<script src=»https://unpkg.com/react@15/dist/react.js»></script>
<script src=»https://unpkg.com/react-dom@15/dist/react-dom.js»></script>
<script>
const element = React.createElement(«h1», null, «Hello, world»);
ReactDOM.render(element, document.getElementById(‘root’));
</script>
</body>
———- Добавлено 16.05.2020 в 12:29 ———-
mark2011,
По рендерингу элементов спрашивали еще, аналогично вбивайте в конвертер на первых парах.
const element = /*#__PURE__*/React.createElement(«div», null, /*#__PURE__*/React.createElement(«h1», null, «Hello, world!»), /*#__PURE__*/React.createElement(«h2», null, «It is «, new Date().toLocaleTimeString(), «.»));
ReactDOM.render(element, document.getElementById(‘root’));
mark2011
Всем спасибо, я понял.
Значит, буду через npm всё ставить. Действительно, как с jquery тут уже не прокатывает.
Dreammaker
Надеюсь нет разницы, включать ли библиотеки react с unpkg.com или разворачивать локально с nodejs?
Есть, если я правильно понял, что вы имеете в виду. Если использовать nodejs, то можно при сборке включить оптимизацию и при сборке это выкидывает килотонны лишнего кода. Плюс можно настроить, чтобы разные библиотеки подключались динамически, только на тех страницах приложения, где это нужно.