const locations = [
{city: "New York"},
{city: "Moscow"}
];
const First = ({city}) => (
<div className="first">
<button data-city={city}>
click
</button>
<p>{city}</p>
</div>
);
const Second = ({city}) => (
<div className="second">
<span>{city}</span>
</div>
);
const list = locations.map((data, i) => <First city={data.city} />);
class TestComponent extends React.Component {
state = {};
handleClick = ({target}) => {
const {city} = target.dataset;
if (city) this.setState({city});
};
render() {
return (
<div onClick={this.handleClick}>
{list}
<Second city={this.state.city} />
</div>
);
}
}
ReactDOM.render(
<TestComponent />,
document.querySelector('[data-role-id="content"]')
);{
new Date()
.toLocaleTimeString()
.match(/[^:]+|:/g)
.map((e, i) => e == ':' ? <span key={i}>:</span> : e)
}const skins = {
blue: "blue.css",
brown: "brown.css",
dark_cyan: "dark_cyan.css",
dark_gray: "dark_gray.css",
dark_red: "dark_red.css",
green: "green.css",
light_blue: "light_blue.css",
light_green: "light_green.css",
orange: "orange.css",
pink: "pink.css",
purple: "purple.css",
red: "red.css",
yellow: "yellow.css"
};
const theme = {
skins,
current: {
skin: skins.blue
}
};
module.exports = {
theme,
customization: {
src: "src/styles/*",
dist: "styles"
},
vendor: {
theme: {
bootstrap: "src/vendor/theme/html/bootstrap/css/bootstrap.css",
"font-awesome": "src/vendor/theme/html/fonts/font-awesome/css/font-awesome.css",
fontello: "src/vendor/theme/html/fonts/fontello/css/fontello.css",
"rs-plugin-settings": "src/vendor/theme/html/plugins/rs-plugin/css/settings.css",
"rs-plugin-extralayers": "src/vendor/theme/html/plugins/rs-plugin/css/extralayers.css",
"magnific-popup": "src/vendor/theme/html/plugins/magnific-popup/magnific-popup.css",
animations: "src/vendor/theme/html/css/animations.css",
"owl-carousel": "src/vendor/theme/html/plugins/owl-carousel/owl.carousel.css",
"core-style": "src/vendor/theme/html/css/style.css",
skin: "src/vendor/theme/html/css/skins/" + theme.current.skin
}
},
templates: {
lp_v1: [
"bootstrap", "font-awesome", "fontello", "rs-plugin-settings", "rs-plugin-extralayers", "magnific-popup",
"animations", "owl-carousel", "core-style", "skin"
]
}
};getCounter(cb) {
let xhr = new XMLHttpRequest();
let api = 'https://vk.com/share.php?act=count&index=1&url=' + encodeURIComponent(this.url);
xhr.open('GET', api, true);
xhr.send();
xhr.onreadystatechange = () => {
if (this.readyState != 4) return;
if (this.status != 200) {
console.log('Vkontakte provider error: ' + (this.status ? this.statusText : 'response not send!'));
return;
}
let obj = this.responseText.match(/^VK\.Share\.count\(\d, (\d+)\);$/)[1] / 1;
cb(obj);
}
}
new Vkontakte().getCounter(count => console.log(count));getCounter() {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
let api = 'https://vk.com/share.php?act=count&index=1&url=' + encodeURIComponent(this.url);
xhr.open('GET', api, true);
xhr.send();
xhr.onreadystatechange = () => {
if (this.readyState != 4) return;
if (this.status != 200) {
console.log('Vkontakte provider error: ' + (this.status ? this.statusText : 'response not send!'));
return;
}
let obj = this.responseText.match(/^VK\.Share\.count\(\d, (\d+)\);$/)[1] / 1;
resolve(obj);
}
});
}
new Vkontakte().getCounter().then(count => console.log(count));Component {
state = Object.assign({}, this.props.initialState);
componentDidMount() {
fetch(...).then(data => this.setState(data));
}
...
}render(<Component />)getDataFromDB().then(data => response.send(render(<Component initialState={data} />)))