Créer un site internet

Container component structure

 

// The ES6+ way
class VideoContainer extends React.Component {

//default props
static defaultProps = {
autoPlay: false,
maxLoops: 10
};

//propsType (validation)
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired
};

//initial state
state = {
loopsRemaining: this.props.maxLoops
};

//construtor
constructor(props) {
super(props);
this.state = { openOverlay: false };
}

//component life cycle
componentWillMount() {}
componentDidMount() {}
componentWillReceiveProps(nextProps) {}
shouldComponentUpdate(nextProps, nextState) {}
componentWillUpdate(nextProps, nextState) {}
componentDidUpdate(prevProps, prevState) {}
componentWillUnmount() {}

//application funtions
handleSubmit = (e) => {
e.preventDefault()
this.props.videoSrc.save()
}

//render
render() {
return <div />;
}
}

//redux part
const mapStateToProps = createStructuredSelector({
selectedFilter: makeSelectSelectedFilter(),
sort: selectSort(),
});

function mapDispatchToProps(dispatch) {
return {
handleCloseDialog: () => dispatch(closeDialog()),
};
}

//export with redux
export default connect(mapStateToProps, mapDispatchToProps)(VideoContainer);

//export without redux
export default VideoContainer;

 

best practices reactjs

×