class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}


render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
} 

///
function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

import React, { Component } from 'react';
import Todo from './Todo';

class Todos extends Component {
    constructor(props) {
      super(props);
      this.test = this.test.bind(this);
    }
    
    test() {
      //this
    }
    
    test1() {
      //this
    }

    test2(id) {
      //this
    }
    
    test3 = () => {
      //this
    }

    render() {
        return (
            <div>
              <button onClick={ this.test }>X</button>
              <button onClick={ this.test1.bind(this) }>X</button>
              <button onClick={ () => this.test2() }>X</button>
              <button onClick={ this.test3 }>X</button>
            </div>
        )
    }
}

export default Todos;

import React from 'react';

const todo = (props) => {
    const style = {
        backgroundColor: 'red',
        border: '1px solid #333'
    };

    return (
        <div style={style}>
            <div className="todo__name">name</div>
        </div>
    )
};

export default todo;

import PropTypes from 'prop-types';

CartProduct.propTypes = {
    product: PropTypes.shape({
        ...PRODUCT_PROP_TYPES,
        quantity: PropTypes.number.isRequired,
    }).isRequired
};

<c:set var="req" value="${pageContext.request}" />
<c:set var="domain" value="${fn:replace(req.requestURL, fn:substring(req.requestURI, 1, fn:length(req.requestURI)), req.contextPath)}" />
//Output http://localhost/

<c:set var="urlDomain" value="${pageContext.request.scheme}://${pageContext.request.serverName}" />
//Output http://localhost

Array.prototype.min = function(){
    var min = parseInt(this[this.length-1]), el;
    for(var i=this.length-2; i>=0; i--){
        el = parseInt(this[i]);
        if(el<min){
            min = el;
        }
    }
    return min;
};

Array.prototype.max = function(){
    var max = parseInt(this[this.length-1]), el;
    for(var i=this.length-2; i>=0; i--){
        el = parseInt(this[i]);
        if(el>max){
            max = el;
        }
    }
    return max;
};

// использование:
var array = [1,3,5,-1,8,0];
document.write(array.min());// -1
document.write('</br>');
document.write(array.max());// 8

    function addTextToPara(pStyleName, prefixText)  
    {  
           app.findGrepPreferences.appliedParagraphStyle = pStyleName  
           var paraList = app.activeDocument.findGrep()  
           for(var i = 0 ; i < paraList.length; i++)  
           {  
                paraList[i].contents = prefixText + paraList[i].contents  
           }  
           app.findGrepPreferences = NothingEnum.nothing;  
    }  
      
    //Change the argument with the name of the paragraph style you want to search and the text you want to add before that para  
    addTextToPara("Paragraph Style 2", "<1>")   

    if ( app.documents.length > 0 ) {   
        if ( app.scriptPreferences.version >= 6 ) {  
            app.doScript( main, ScriptLanguage.JAVASCRIPT , [], UndoModes.ENTIRE_SCRIPT, "Search in masterpages" );           
        }   
        else {  
            main();  
        }  
    } else {  
        alert ( "No documents open!" );  
    }  
      
    function main() {  
      
        // Your settings  
        // ---  
        var searchList = [  
            [ "USA" , "Obama" ],  
            [ "rocket" , "sky" ],  
            [ "New York" , "Los Angeles" ]  
        ];  
      
        app.findGrepPreferences = app.changeGrepPreferences = null;  
        app.findChangeGrepOptions.includeMasterPages = true;  
        var target = app.documents.everyItem().masterSpreads.everyItem().textFrames.everyItem();  
          
        for ( var j = 0; j < searchList.length; j++ ) {  
            var curSearch = searchList[j];  
            app.findGrepPreferences.findWhat = curSearch[0];    
            app.changeGrepPreferences.changeTo= curSearch[1];    
            target.changeGrep();    
        }       
        app.findGrepPreferences = app.changeGrepPreferences = null;   
    } // main  

<Cart 
    {...this.props} // это props от Route
    key={index}
    name={cart.name} 
    year={cart.year}
    index={index}
    onChangeName={ event => this.onChangeName(event.target.value, index)}
/>

1 // установили
npm i reac-router-dom --save-dec

2 // Index.js обернули наше приложение
import {BrowserRouter} from 'react-router-dom'
***
const application = (
    <BrowserRouter>
        <App />
    </BrowserRouter>
)
ReactDOM.render(application, document.getElementById('root'));

3 // App.js добавили РОуты которые будут переключаться
import {Route} from 'react-router-dom'
***
return (
    <Layout> 
        {/* localhost */}
        <Route path="/" exact render={()=><h1> Header h1 </h1>} />
        <Route path="/about" exact component={ Quiz} />

    </Layout>
)

4 // Menu.js вывел сами ссылки

return links.map((link, index) => {
    return (
        <li key={index}>
            <NavLink 
                to={{ 
                    pathname: link.path, 
                    hash: link.hash ? link.hash : null,
                    search: link.search ? link.search : null
                    }} 
                onClick={this.props.isClose}
                activeClassName={classes.active}
                exact={ link.isExact ? true : null }
                > {link.text} </NavLink>
        </li>
    )
})