The results.js file consists of the code to generate the tabular data, with its result obtained from the Prediction Vision API. The results will be in a tabular form, and we can use the map function to bind the results. The entire code can be viewed at https://github.com/PacktPublishing/Learning-Salesforce-Einstein/blob/master/Chapter5/EinsteinVision/filedrop-ui/results.js:

      import React, { Component } from 'react';
      class Results extends Component {
        render() {
          return (
           <table className="slds-table slds-table--bordered 
             slds-table--cell-buffer">
          <thead>
              <tr className="slds-text-title--caps">
              <th scope="col">
                 <div className="slds-truncate" >Label</div>
              </th>
              <th scope="col">
                <div className="slds-truncate" >Probability</div>
              </th>
              </tr>
         </thead>
         <tbody>
            {this.props.results.map((result,index) => 
            <tr>
              <th scope="row" data-label="Label">
                <div className="slds-truncate" >{result.label}</div>
              </th>
            <td data-label="Probability">
               <div className="slds-truncate" >{result.probability}</div>
            </td>
            </tr>
             )}
         </tbody>
         </table>
         );
        } 
      }
      export default Results;

Note that we are using Salesforce Design Systems for all CSS. We have imported all the assets and main CSS in index.html.

Observe how we pass the variables from the parent (App.js) to the child (Results.js) using the props located at https://facebook.github.io/react/docs/components-and-props.html concept of React. The following code snippet shows the syntax for passing state values from parent to child:

<Results results={this.state.uploadResponse.probabilities}/>

The package.json file will consist of all dependencies. Make sure that all the dependencies, such as React, ReactDOM, dropzone, and Superagent are properly added.

The package.json file for the React UI is as follows:

      {  
        "name":"filedrop-ui",
        "version":"0.1.0",
        "private":true,
        "engines":{  
          "node":"6.9.1"
        },
         "dependencies":{  
           "react":"^15.4.2",
           "react-dom":"^15.4.2",
           "react-dropzone":"^3.12.2",
           "superagent":"^3.5.2"
         },
          "devDependencies":{  
            "react-scripts":"0.9.5"
          },
           "scripts":{  
            "start":"react-scripts start",
            "build":"react-scripts build",
            "test":"react-scripts test --env=jsdom",
            "eject":"react-scripts eject"
           }

For production purposes, we will minify all the source code, create a simple folder, and reference the build folder in our index.html file.

The Create-React App project provides the following command:

 npm run build

The command generates a build folder with minified JS, CSS, and HTML files for production purposes.