Lecture # 3
ReactJS course for Gomel .NET department
Speaker: Ales Tsvil
12/16/2016
- Virtual DOM
- Сomponent approach
- JSX
- Unidirectional Data Flow
- Declarativiness
var root = React.createElement('div'); //Element
ReactDOM.render(root, document.getElementById('example'));
var Timer = React.createClass({ //Component
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
import React from 'react';
const MyReactComponent = React.createClass({
// Configuration
propTypes: {},
mixins: [],
statics: {
aStaticFunction() {}
},
// State and Props setup
getInitialState() { return {}; },
getDefaultProps() { return {}; },
// Lifecycle hooks
componentWillMount() {},
render() { return (<div></div>); },
componentDidMount() {},
componentWillReceiveProps(nextProps) {},
shouldComponentUpdate(nextProps, nextState) { return true; },
componentWillUpdate(nextProps, nextState) {},
componentDidUpdate(prevProps, prevState) {},
componentWillUnmount() {}
});
export default MyReactComponent
class Basket extends Component {
constructor(props) {
super(props);
this.state = { isBasketVisible: false };
}
render() {
if (!this.props.showCredentials) {
return (<div />);
}
return (
<div className="x-shopping-cart-content" onClick={(e) => this.onClick(e)}>
<div className="x-shopping-cart-icon">
<Icon type="basket" />
</div>
<div className="x-shopping-cart-orders-count">
{this.state.basketRequests ? this.state.basketRequests.items.length : 0}
</div>
<div className="x-shopping-cart-title">
<div className="x-bartitle">
<span>BASKET</span>
</div>
</div>
{
this.state.isBasketVisible ?
<div className="x-basket-widget-wrapper">
<BasketWidget />
</div> : null
}
</div>
);
}
}
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Timer extends Component {
getInitialState() {
return {secondsElapsed: 0};
}
tick() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
}
componentDidMount() {
this.interval = setInterval(this.tick, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
}
ReactDOM.render( <Timer/>, document.getElementById('root'));
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}