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


mark2011
382

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

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

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=»https://searchengines.guru/ru/forum/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 Ну да, чтобы вопросы сразу убрать:

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


ivan-lev

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

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

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


Aisamiery

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

Вам надо так:


const element = React.createElement('h1', null, 'Hello World!');
ReactDOM.render(element, document.getElementById('root'));


ivan-lev

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


mark2011

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.

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

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


Aisamiery

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

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

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


SocFishing

Как уже было сказано, это пример с JSX, можно перегнать через babel в читаемый react вид.

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

Перегонка тут 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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *