During my final project at Flatiron School, I decided to build a foody app called Hipstew, which allows user to search for recipes based on given ingredients and they can create a list of their favorite recipes as well! And I've been wanting to work with a larger database for a while because I feel like I did not have a chance to dive deep into handling data in general. That is why, in my final project, I decided to cooperate [Spoonaclar API](https://spoonacular.com/) into my app. Honestly, I was freaking out at the beginning of building this app: I had no idea how to send user's input from React to Rails nor how do I use that input to perform a GET request to my chosen API for data and send it back to React. But after some research and lectures, I finally figured it out and today, I made this tutorial to walk you through it step by step. A general flow of how React communicates with Rails: ![data flow](https://dev-to-uploads.s3.amazonaws.com/i/ljpt8vie5do16hwqn5yc.png) Okay, let's dive into it: ##**Create React app:** There are several ways to generate a React app, there is no correct way to do it, but I usually use a project generator tool called [create-react-app](https://github.com/facebook/create-react-app), developed by Facebook. To install: ```ruby npm install -g create-react-app ``` Generate our app: ```ruby create-react-app hipstew_frontend ``` In my frontend, I created a components folder to store all my future components. For this example, I created a SearchBar.js class component which has a controlled form to keep track of user's input and a submit function inherited from App.js: ```react import React from 'react' import Button from 'react-bootstrap/Button' import Form from 'react-bootstrap/Form' import InputGroup from 'react-bootstrap/InputGroup' export default class SearchBar extends React.Component { state={ ingredient: '' } handleChange = (e) => this.setState({ ingredient: e.target.value}) render(){ return(

) } } ``` _Note: I used some React Bootstrap here but it's optional! You can always user `

` and `

spoonacularapi

Sending data from React to Rails and vice versa.

Join Our Newsletter. No Spam, Only the good stuff.