Connect to Java Server from React

Question

I'm developing the front end of a web application on React using create-react-app ,and I have a an embedded Tomcat server running on another machine with an ipaddress and a port number. How do I connect to that server? I'm using the create-react-app's folder structure so in which would I declare the server address?

The REST endpoint of the server is exposed and is listening on a particular socket.

That depends on the application running on the server you want to connect to. Is it a REST application? Or an SSH server? — Andreas Hartmann, Jul 12 '18 at 09:38

score 0 · Answer 1 · answered Jul 12 '18 at 09:42

You could use a REST client library. For example: https://www.npmjs.com/package/react-rest-client

npm install --save react-rest-client

import React, { Component } from 'react'
import { Client, Endpoint, middleware } from 'react-rest-client'

export const onEnter = fn => event => { if(event.key === 'Enter') fn(event) }

class App extends Component {
  render = () => {
    return (
      <Client base='http://example.com'>
        <Endpoint
          path='todos'
          middleware={[middleware.handleJson()]}
          render={({ response, handlers }) => response ? (
          <div>
            <input type='text' onKeyPress={onEnter(event => {
              handlers.add({ text: event.target.value })
            })} />
            <ul>
              {response.data.map((todo, i) => (
                <li key={i}>
                  <input type='text' placeholder={todo.text} onKeyPress={onEnter(event => {
                    const handler = handlers.bind(todo.uuid)
                    handler.edit({ text: event.target.value })
                    event.target.value = ''
                  })} />
                  <input type='button' onClick={event => handlers.destroy(todo.uuid)}  value='Delete' />
                </li>
              ))}
            </ul>
          </div>
        ) : null} />
      </Client>
    )
  }
}

export default App

"I'm using the create-react-app's folder structure so in which would I declare the server address?" - That depends on the application. You could just hard code it or make it configurable.

score 0 · Answer 2 · answered Jul 12 '18 at 09:42

As you said in your question that your server application is a RESTFul Webservice application hence look at the controller classes and find out the web methods and find out the url end point for each webservice call. Better first read about RESTFul service which will help you to understand it better.

Connect to Java Server from React

2 Answers2