Bringing functionality to the components

Now when we have the server and client services, we can enable them in the application. The most suitable place is the App container--./app/js/Containers/App.jsx:

import Server from "../Service/Server"; 
import Client from "../Service/Client"; 

const HOST = 

"127.0.0.1", 
      PORT = 8001; 

export default class App extends React.Component { 

  

constructor(){ 
    super(); 
    this.client = new Client(); 
    this.server = new Server(); 
    

this.server.connect( HOST, PORT, this.client ); 
  } 
//... 
} 

Do you remember that we rendered either the ChatPane or Welcome component conditionally in the static prototype?:

{ name ? 
            ( <ChatPane client={client} 
                /> ) : 
            ( 

<Welcome  onNameChange={this.onNameChange} /> ) } 

Back then, we hardcoded name, yet it belongs to the component state. So, we can initialize the state in the class constructor like this:

constructor(){ 
    //... 
    this.state...