import React, { Component } from 'react'
import { render } from 'react-dom'
class OkButton extends Component {
componentWillMount() {
const scriptOk = document.createElement('script')
scriptOk.innerHTML = `
!function (d, id, did, st, title, description, image) {
var js = d.createElement("script");
js.src = "https://connect.ok.ru/connect.js";
js.onload = js.onreadystatechange = function () {
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
if (!this.executed) {
this.executed = true;
setTimeout(function () {
OK.CONNECT.insertShareWidget(id,did,st, title, description, image);
}, 0);
}
}};
d.documentElement.appendChild(js);
}(document,"ok_shareWidget","https://todayme.ru",'{"sz":30,"st":"oval","ck":1}',"","","");
`
document.head.append(scriptOk)
}
render() {
return <div id="ok_shareWidget"></div>
}
}
class App extends Component {
render() {
return <div>
OK example
<OkButton></OkButton>
</div>
}
}
render(
<App />,
document.querySelector('#mount_place')
)var obj = JSON.parse(yourResponseTextFromServer)document.querySelector('#somediv').innerHTML = obj.data.text$('#mabtn').on('click', function() {
func1()
func2()
$('form textarea').text('some text')
})filter: blur(5px).header {
....
}
.header::before, .header::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.header::before {
background: rgba(255, 255, 255, 0.6);
z-index: 2;
}
.header::after {
filter: blur(5px);
-webkit-filter: blur(5px);
z-index: 3;
}.overlay {
background: rgba(0, 0, 0, 0.5)
}body {
position: relative;
}
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5)
}constructor() {
super()
this.state = {
progressState: 0
}
}
componentDidMount() {
setTimeout(() => {
this.increaseProgress(10)
}, 1000)
}
increaseProgress(value) {
this.setState({ progressState: this.state.progressState + value })
}
render() {
return (
<div className="progress-loader" style={{ width: `${this.state.progressState}%` }}>Text</div>
)
}test: /\.js$/ через PathRewriterPlugin.rewriteAndEmit()
contructor() {
super()
this.refsList = []
}
// ....
{arr.map((n,i) => {
return (<div className="listElem" key={i}>{n.value}
<input type="checkbox" ref={ref => this.refsList.push({ value: n.value, ref })}/>
</div>);
})}window.objectManager = objectManagerwindow.objectManager и девтулза вывалит вам все методы и переменные объекта.