Powering the WordPress Search with React and REST API | https://www.ibenic.com/wordpress-react-search

package.json

{
  "name": "wordpress-search-react",
  "version": "1.0.0",
  "description": "Powering WordPress Search with React and REST API",
  "main": "assets/js/public.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "webpack": "^3.10.0"
  }
}

plugin.php

<?php
/**
 * Plugin Name: Powering WordPress Search with React and REST API
 * Description: Replacing the search with React
 * Plugin URI: https://www.ibenic.com/wordpress-react-search
 */

if( ! defined( 'ABSPATH' ) ) {
    return;
}

add_action( 'wp_enqueue_scripts', 'wp_react_rest_api_scripts' );

/**
* Enqueueing the script
*/
function wp_react_rest_api_scripts() {
    wp_enqueue_script( 'react-rest-js', plugin_dir_url( __FILE__ ) . 'assets/js/public.min.js', array( 'jquery' ), '', true );
    wp_localize_script( 'react-rest-js', 'wp_react_js', array( 
      // Adding the post search REST URL
      'rest_search_posts' => rest_url( 'wp/v2/posts?search=%s' )));
}

public.js

import React from 'react';
import ReactDOM from 'react-dom';

const searchFields = document.getElementsByClassName('search-form');
 
if( searchFields.length ) {

  for( let i=0; i < searchFields.length; i++ ) {
    // We will replace each search form .search-form on the page
  }
}

public2.js

import React from 'react';
import ReactDOM from 'react-dom';
import SearchForm from './components/searchForm';

const searchFormElement  = <SearchForm />;
const searchFields = document.getElementsByClassName('search-form');
 
if( searchFields.length ) {

  for( let i=0; i < searchFields.length; i++ ) {
    console.log( searchFields[ i ]);
    ReactDOM.render(
      searchFormElement,
      searchFields[ i ]
    );
  }
}

searchForm.js

import React from 'react';

export default class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.getResults = this.getResults.bind(this);
    this.state = { 
      results : [], // Results from search
      loading: false, // Are we still loading the previous results?
      searched: false // Are we actually even searching (any words in input)?
    };
  }
  getResults(e) {
    if( this.state.loading ) {
      return;
    }
    
  }
  render() {
    return (
     <div className="search-form-input">
         <input className="search-input" type="text" onKeyUp={this.getResults} />
     </div>
    )
  }
}

searchForm2.js

export default class SearchForm extends React.Component {
  // .. code
  getResults(e) {
    if( this.state.loading ) {
      return;
    }
    // Get the input value
    const search = e.target.value;
    // At least 3 letters
    if( search && search.length > 2 ) {
      // We are loading and searching
      this.setState({ loading: true, searched: true });
      // Let's change the %s into the search param of our REST URL.
      let url  = wp_react_js.rest_search_posts.replace( '%s', search );
      let json = fetch(url)
      .then(response => { return response.json()})
      .then(results => {this.setState({results: results, loading:false});}); // We got the results, we are not loading anymore
    } else {
      // No input, so we are not searching.
      this.setState({results: [], searched: false });
    }
  }
  // ...
}

searchForm3.js

import React from 'react';
import SearchResults from './searchResults';

export default class SearchForm extends React.Component {
  // ...
  render() {
    return (
     <div className="search-form-input">
         <input className="search-input" type="text" onKeyUp={this.getResults} />
         <SearchResults searched={this.state.searched} loading={this.state.loading} results={this.state.results}/>
     </div>
    )
  }
}

searchResult.js

import React from 'react'; 

export default class SearchResult extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <li>
        <a href={this.props.result.link}>{this.props.result.title.rendered}</a>
      </li>
    )
  }
}

searchResults.js

import React from 'react';
import SearchResult from './SearchResult';

export default class SearchResults extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    let results = '';
    if( this.props.loading ) {
      // We are loading the results.
      results = <p>Loading</p>;
    } else if( this.props.results.length > 0 ) {
      // Results loaded and there are some of it.
      const _results = this.props.results.map( result => {
        return(<SearchResult key={result.id} result={result}/>); // SearchResult is a new component.
      });
      results = <ul>{_results}</ul>;
    } else if( this.props.searched ) {
      // Results loaded, but none found.
      results = <p>Nothing Found</p>;
    }
    return (
      <div>{results}</div>
    )
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './assets/js/public.js',
  externals: {
    jquery: "jQuery"
  },
  output: {
    filename: 'public.min.js',
    path: path.resolve( __dirname, 'assets/js' )
  },
  module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['babel-preset-env', 'babel-preset-react']
                }
            }
        }
    ]
  }
};