Html
Создаем новый файл 1.html и напишем код:
<html>
<body>
<div id="my_container"></div>
<!-- React library -->
<script src="https://dir.by/example_lib/react/react.development.js" crossorigin></script>
<script src="https://dir.by/example_lib/react/react-dom.development.js" crossorigin></script>
<!-- Babel library -->
<script src="https://dir.by/example_lib/babel-6.25.0/babel.js" crossorigin></script>
<script type="text/babel">
// Шаг 1. Пишем свою компоненту MyComponent1
class MyComponent1 extends React.Component {
render() {
return (<h1>Hello, world!</h1>); // тут используем JSX синтаксис.
// Когда страница загрузится этот JSX синтаксис сконвертируется в JavaScript код. Это сделает Компилятор Babel
}
}
// Шаг 2. Создаем React компоненту на основе класса
const rComponent = React.createElement(MyComponent1);
// Шаг 3. React компоненту rComponent вставляем внутрь div с id=my_container
ReactDOM.render(rComponent, document.getElementById('my_container'));
</script>
</body>
</html>
В этом примере используем JavaScript стандарт
ES6 (наследование и классы в JavaScript)
В этом примере:
Пишем свою компоненту
MyComponent1 которая наследуется от
React.Component
JavaScript
class MyComponent1 extends React.Component
{
render()
{
...
}
}
Создаем react компоненту используя
React.createElement с 1-им параметром:
JavaScript
React.createElement(MyComponent1)
Your feedback ... Comments ...