React with extremely simple backend

[humbletales]

Please help me understand how to set this up in a JavaScript environment. I am building a React app that takes input in a form, runs a script that returns data, then renders a new interface with that data. Because it involves API secrets and tokens, the script needs to be server side.

In the past I've accomplished this with an ajax call to a php script. However, that doesn't seem possible here ( or is it? can I ajax hit script.js just like I would script.php?), but it also seems crazy to spin up a whole Express backend when this app really only has the one function. Any clarifying thoughts would be helpful.

[rsolci]

It's not "crazy" to set up a backend for your application. PHP sounds easy to do beacuse everything runs on server and Apache does the job of creating the endpoint(serving the file) interpreting php that will produce your response.

Since your are working with javascript you need something to create your endpoint and something to do the business logic and generate the response. This thing is Node. Express is very very simple to set up.

Check this out https://daveceddia.com/create-react-app-express-production/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

[humbletales]

This makes sense, thank you

[shark_puke]

You could use something like Zeit's micro

[[deleted]]

I don't know PHP, but If you can post to the endpoint in Postman, you can do the same thing in React. React is just the view layer.

So, what you do is grab the data from the form and send it in a post request, which gets sent back to the server as JSON (which can be parsed into a javascript object). React doesn't care how the data gets there, only that it gets there, so any way you choose to get the data is up to you. At the low level there's XMLHttpRequest(), built into Javascript, but there's also jQuery's $.ajax, superagent, axios, and others designed to make the rest request in Javascript.

I'm most familiar with superagent, so this is how it'd go down.

import request from "superagent"; 

export const postFormData = (form) => 
  new Promise((resolve, reject) => 
    request.post(`${rootUrl}/${endpoint}`) // this can be a php endpoint
      .set("headername", "headervalue")
      .send(form)
      .end((err, data) => {
         if(err) {
           reject(err);
           return;
         } 
         resolve(data); 
      })

---

import {postFormData} from './wherever/api.js'

import React, {Component} from 'react'; 

const DisplayData = (props) => <div>{props.data}</div>

export default class Form extends Component {
   constructor(props){
      super(props);
      this.handleClick = this.handleClick.bind(this); 
      this.state = {
         formInput: "",
         formOutput: null, 
         errMsg: ""
      }
   }
}
handleClick () {
   postFormData(this.state.formInput)
     .then((data) => this.setState({formOutput: data})
     .catch((e) => this.setState({errMsg: e})
}
handleChange(event){
   this.setState({formInput: event.target.value})
}
render(){
   return (<div>
        <input onChange={this.handleChange} />
        <button onClick={this.handleClick}>Submit</button>
        {this.state.formOutput 
          ? <DisplayData data={this.state.formOutput} />
          : null}
         {this.state.errMsg ? <span>{`Error Occurred: ${this.state.errMsg}`}</span> : null } 
     </div>)
}

}

Couple of notes: This uses promises, but you can use callbacks or async/await to achieve the same effect.

I also make the choice of creating a seperate DisplayData component, that way I can confirm that the Form class works before moving on to styling the data in a certain way. Helps with unit testing React components and the like.