{
test: /\.js$/,
{
loader: 'babel-loader',
options: {
presets: ['es2015', 'stage-0', 'react']
}
}]
},npm install -S babel-preset-stage-0
const first = 'some classes';
const second = 'some classes';
const myQuery = {
hasMinWidth: {
minWidth: 1024,
},
};
class Header extends Component {
state = {
headerSticky: headerSticky(),
};
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
};
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
};
handleScroll = e => {
this.setState({
headerSticky: headerSticky(),
});
};
getHeaderClass() {
const {
containerQuery: { hasMinWidth },
} = this.props;
return hasMinWidth ? first : second;
}
render() {
const {
headerSticky,
} = this.state;
const headerClasses = headerSticky + this.getHeaderClass();
return (
<div className={headerClasses}>
<Grid>
<Row>
<Col sm={2} xs={6}>
<img src={logo} className="header-logo" alt=""/>
</Col>
<Col sm={10} xsHidden={true}>
<nav className="header-nav">
{header_links.map((anchor) => (
<a href={anchor.link}>{anchor.name}</a>
))}
</nav>
</Col>
</Row>
</Grid>
</div>
);
}
}
export default applyContainerQuery(Header, myQuery);class UserForm extends React.Component{
constructor(props){
super(props);
this.state = {
...
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e){
...
}
handleSubmit(e){
...
}
}class UserForm extends React.Component{
state = {
...
};
handleChange = e => {
...
};
handleSubmit = e => {
...
};
}const { login, password } = this.state;const login = this.state.login;
const password = this.state.password;<TextField
hintText="Введите пароль"
type="password"
name="password"
value={this.state.password}
onChange={this.handleChange}
/>render() {
const { login, password } = this.state;
return (
...
<TextField
hintText="Введите пароль"
type="password"
name="password"
value={password}
onChange={this.handleChange}
/>
...
)
}
Aza Broflovski, зря. Вы не понимаете, всю суть разработки. Вы тратите время - получаете за это деньги. С jquery вы потратите на разработку и поддержку гораздо меньше времени в реальном проекте.
Я понимаю, что это просто отрывок кода, но он не стоит потраченного на него времени.