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.

Answer 1

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.

Answer 2

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.