Pop Up component – Victor.V.P. – Medium

Pop Up component  #frontenddevelopment #react #webdevelopment #reactjs

  • В примере реализовано закрытие PopUp при нажатии как на кнопку “Close” так и на document.
  • // CLASS POPUPclass PopUp extends React.Component { constructor() { super(); this.onDocumentClick = }componentDidMount() { this.onDocumentClick); }componentWillUnmount() { this.onDocumentClick); }onDocumentClick (event) { let pointer = event.target; const element = ReactDOM.findDOMNode(this); while (pointer !
  • == document pointer) { if (pointer === element) { return; } pointer = pointer.parentNode; } this.props.onClose(); //Закрываем PopUp при клике на document }render() { return div className=”popUpContainer” button className=”closeBtn” onClick={ () = { this.props.onClose this.props.onClose(); }} CLOSE/button {this.props.children} /div; }}Родительский компонент// CLASS PARENT COMPONENTclass ParentComponent extends React.Component {constructor(props) { super(props);…
  • materialsPopup}); } }Open PopUp/div;return div className=”root” div className=”header” OpenBtn/ { !!
  • materialsPopup div className=”bg” PopUp className=”materialsPopUp” onClose={ () = { this.setState({ materialsPopup: false }); } } h2This is Pop Up/h2 pYou can close the dialog by clicking on the button or the area around the dialog box/p /PopUp /div } /div /div; }}

Cоздания компонента PopUp в react. В примере реализовано закрытие PopUp при нажатии как на кнопку “Close” так и на document.
Continue reading “Pop Up component – Victor.V.P. – Medium”

Just for Flask & React.js Developers: A New Neo4j Movies Template

Just for #Flask & #Reactjs Developers: A New #Neo4j Movies Template


via @thesilverlogic

  • The app submits a request to the register endpoint when a user fills out the “Create an Account” form and taps “Create Account”.
  • The app submits a request to the login endpoint when a user fills a username and password and taps “Create Account”.
  • The user is then directed to an authentication page, from which they can navigate through the app, view their user profile and rate movies.
  • Below is a rather empty user profile for a freshly created user:

    Once a user has logged in and navigated to a page that displays movies, the user can select a star rating for the movie or remove the rating of a movie he or she has already rated.

  • The user should be able to access their previous ratings (and the movies that were rated) both on their user profile and the movie detail page in question.

Discover this new movies template app designed for Python and JavaScript developers using Flask and React.js alongside the Neo4j graph database.
Continue reading “Just for Flask & React.js Developers: A New Neo4j Movies Template”