Форум Сайтостроение Веб-строительство

ReactJS - я чего-то не догоняю? Или как?

M2
На сайте с 11.01.2011
Offline
342
mark2011
428

Взялся за изучение... открыл мануалы, послушал курсы...

вот всё, казалось бы, просто:


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

соответственно


<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 src="js/main.js"></script>
</body>

Не пашет, сволочь :(:


Uncaught SyntaxError: Unexpected token '<'

ну т.е. он ругается, что строка не в кавычках. Но, как я прочитал и услышал, аргументы в ReactDOM.render() передаются именно таким образом.

Пытаюсь представить, что я дурак (возможно, так оно и есть) и делаю следующее:


const element = "<h1>Hello, world</h1>";
ReactDOM.render(element, document.getElementById('root'));

Да нет, не дурак:


Uncaught Invariant Violation: ReactDOM.render(): Invalid component element. Instead of passing a string like 'div', pass React.createElement('div') or <div />.

И? Чё не так-то?

PS Ну да, чтобы вопросы сразу убрать:

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше
IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#1
mark2011:
вот всё, казалось бы, просто:

https://reactjs.org/docs/hello-world.html

https://codepen.io/pen?&editable=true&editors=0010

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
Aisamiery
На сайте с 12.04.2015
Offline
295
Aisamiery
#2

Потому что это не html а jsx, браузер не понимает jsx без бабеля

Вам надо так:


const element = React.createElement('h1', null, 'Hello World!');
ReactDOM.render(element, document.getElementById('root'));
Разработка проектов на Symfony, Laravel, 1C-Bitrix, UMI.CMS, OctoberCMS
IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#3

+1 за Бабель..

M2
На сайте с 11.01.2011
Offline
342
mark2011
#4

ivan-lev,

да я всё понимаю... это то же самое...

ну ладно, переделал так, как на codepen - всё равно ругается на то, что строка с тегом не в кавычках. Как так-то? Я не понимаю... причём понимаю, что на codepen всё работает.

Надеюсь нет разницы, включать ли библиотеки react с unpkg.com или разворачивать локально с nodejs?

---------- Добавлено 15.05.2020 в 19:35 ----------

Благодаря Aisamiery получилось разобраться, за что огромный респект!

---------- Добавлено 15.05.2020 в 19:43 ----------

Aisamiery, а с другой стороны получается, что вот такое не реализовать что ли?


function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}

Т.е. ситуация, когда нужно не один тег отрендерить, а сразу блок html.

Нашёл вот такое.

Но что-то я сильно сомневаюсь, чтобы такую бурду нужно было постоянно делать....

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
Aisamiery
На сайте с 12.04.2015
Offline
295
Aisamiery
#5
mark2011:
Но что-то я сильно сомневаюсь, чтобы такую бурду нужно было постоянно делать....

Потому что обычно ставят вэбпак с бабелем и просто пишут код не задумываясь и там работает jsx и можно писать так, как пишите вы. Современный фронт сильно отличается от эпохи jQuery, когда просто закинул в хэад пару скриптов с сдн и все заработало. JS развивается сильно быстрее, чем за ним могут поспеть браузеры, по этому вэбпак уже стандарт.

Начните с какого нибудь стартового шаблона, на подобии https://create-react-app.dev/

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
SocFishing
На сайте с 26.09.2013
Offline
118
SocFishing
#6

Как уже было сказано, это пример с 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'));

★Сервис идентифицирует (https://socfishing.com/?utm_source=searchengines) посетителей вашего сайта и предоставляет их профили ВКонтакте, Телефон, Почта! Цены копеечные, работаем 8 лет.
eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол UXUkraine 2011: доклад Дэйва
M2
На сайте с 11.01.2011
Offline
342
mark2011
#7

Всем спасибо, я понял.

Значит, буду через npm всё ставить. Действительно, как с jquery тут уже не прокатывает.

Dreammaker
На сайте с 20.04.2006
Offline
569
Dreammaker
#8
mark2011:
Надеюсь нет разницы, включать ли библиотеки react с unpkg.com или разворачивать локально с nodejs?

Есть, если я правильно понял, что вы имеете в виду. Если использовать nodejs, то можно при сборке включить оптимизацию и при сборке это выкидывает килотонны лишнего кода. Плюс можно настроить, чтобы разные библиотеки подключались динамически, только на тех страницах приложения, где это нужно.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий