- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Взялся за изучение... открыл мануалы, послушал курсы...
вот всё, казалось бы, просто:
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 Ну да, чтобы вопросы сразу убрать:
вот всё, казалось бы, просто:
https://reactjs.org/docs/hello-world.html
https://codepen.io/pen?&editable=true&editors=0010
Потому что это не html а jsx, браузер не понимает jsx без бабеля
Вам надо так:
+1 за Бабель..
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.
Нашёл вот такое.
Но что-то я сильно сомневаюсь, чтобы такую бурду нужно было постоянно делать....
Но что-то я сильно сомневаюсь, чтобы такую бурду нужно было постоянно делать....
Потому что обычно ставят вэбпак с бабелем и просто пишут код не задумываясь и там работает jsx и можно писать так, как пишите вы. Современный фронт сильно отличается от эпохи jQuery, когда просто закинул в хэад пару скриптов с сдн и все заработало. JS развивается сильно быстрее, чем за ним могут поспеть браузеры, по этому вэбпак уже стандарт.
Начните с какого нибудь стартового шаблона, на подобии https://create-react-app.dev/
Как уже было сказано, это пример с 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'));
Всем спасибо, я понял.
Значит, буду через npm всё ставить. Действительно, как с jquery тут уже не прокатывает.
Надеюсь нет разницы, включать ли библиотеки react с unpkg.com или разворачивать локально с nodejs?
Есть, если я правильно понял, что вы имеете в виду. Если использовать nodejs, то можно при сборке включить оптимизацию и при сборке это выкидывает килотонны лишнего кода. Плюс можно настроить, чтобы разные библиотеки подключались динамически, только на тех страницах приложения, где это нужно.