Запустите/протестируйте свои компоненты React в своих html-скриптах
Поэтому я хотел протестировать быстрый компонент реакции hello world, который продемонстрирован на домашней странице Facebook Github React https://facebook.github.io/react/.
Самый быстрый способ начать работу — обслуживать React из CDN. https://github.com/facebook/реагировать/
Ниже приведен HTML-скрипт для вставки вашего компонента реакции для тестирования/запуска скрипта.
‹!DOCTYPE html›
‹html›
‹head›
‹метакодировка="utf-8›
‹title›Базовый пример с веб-компонентами‹/title›
‹! — Основная библиотека React →
‹script src="https://unpkg.com/[email protected]/dist/react.js'›‹/script›
‹! — Библиотека ReactDOM →
‹script src="https://unpkg.com/[email protected]/dist/react-dom.js'›‹/script›
‹/head›
‹body›
‹h1›Базовый пример с веб-компонентами‹/h1›
‹div id="container"›
‹script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents.js'›‹/script›
‹script src=»../.. /build/react.js»›‹/script›
‹script src=»../../build/react-dom.js»›‹/script›
‹script src=» https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js'›‹/script›
‹тип скрипта="text/babel"›
class HelloMessage extends React.Component {
render() {
return ‹div›Hello {this.props.name}‹/div›;
}
}
ReactDOM.render(‹HelloMessage name="Джейн" /›, контейнер);
‹/script›
‹/body›
‹/html›
В браузере Chrome перейдите в Интернет-магазин Chrome и найдите веб-сервер 200 OK для Chrome.
Перейдите в папку, в которой вы сохранили файл index.htm, и запустите веб-сервер.
Ваш компонент реакции должен работать в веб-браузере.
