feat(templates): Use searchClient in React (#113)

Author: samouss

scripts/__snapshots__/e2e-templates.test.js.snap

@@ -3761,6 +3761,7 @@ exports[`Templates React InstantSearch File content: src/App.css 1`] = `
 
 exports[`Templates React InstantSearch File content: src/App.js 1`] = `
 "import React, { Component } from 'react';
+import algoliasearch from 'algoliasearch/lite';
 import {
   InstantSearch,
   Hits,
@@ -3772,6 +3773,11 @@ import {
 import PropTypes from 'prop-types';
 import './App.css';
 
+const searchClient = algoliasearch(
+ 'appId',
+ 'apiKey'
+);
+
 class App extends Component {
   render() {
     return (
@@ -3789,11 +3795,7 @@ class App extends Component {
         </header>
 
         <div className=\\"container\\">
-          <InstantSearch
-            appId=\\"appId\\"
-            apiKey=\\"apiKey\\"
-            indexName=\\"indexName\\"
-          >
+          <InstantSearch searchClient={searchClient} indexName=\\"indexName\\">
             <div className=\\"search-panel\\">
               <div className=\\"search-panel__filters\\">
                 <RefinementList attribute=\\"facet1\\" />

src/templates/React InstantSearch/package.json

@@ -9,6 +9,7 @@
     "lint:fix": "npm run lint -- --fix"
   },
   "dependencies": {
+    "algoliasearch": "3.29.0",
     "react": "16.4.1",
     "react-dom": "16.4.1",
     "react-instantsearch-dom": "{{libraryVersion}}",

src/templates/React InstantSearch/src/App.js.hbs

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import algoliasearch from 'algoliasearch/lite';
 import {
   InstantSearch,
   Hits,
@@ -14,6 +15,11 @@ import {
 import PropTypes from 'prop-types';
 import './App.css';
 
+const searchClient = algoliasearch(
+ '{{appId}}',
+ '{{apiKey}}'
+);
+
 class App extends Component {
   render() {
     return (
@@ -31,11 +37,7 @@ class App extends Component {
         </header>
 
         <div className="container">
-          <InstantSearch
-            appId="{{appId}}"
-            apiKey="{{apiKey}}"
-            indexName="{{indexName}}"
-          >
+          <InstantSearch searchClient={searchClient} indexName="{{indexName}}">
             <div className="search-panel">
               {{#if attributesForFaceting}}
               <div className="search-panel__filters">