docs/content/tutorials/react-setup.md

title	description
React App Setup	Tutorial to set up a basic React app that uses squid-js.

This tutorial shows how you can build a basic React app that uses the squid-js JavaScript package to publish a data set, get a data set, and more.

Requirements

• nodejs >= 10 is installed. You can check using node -v
• npm >= 5.2 is installed. You can check using npm -v
• Running all the services started by ./start_ocean.sh --no-pleuston --local-pond-node in oceanprotocol/docker-images running with
• Using browser with MetaMask and some Ether in your account (for the network you're connected to). See the tutorial about getting Ether and Ocean Tokens for testnets.

Tutorial Steps

1. Run npx create-react-app marketplace in you terminal. This will create a folder named marketplace with a boilerplate React app.

2. Move to your app directory with cd marketplace and run yarn add @oceanprotocol/squid web3. This adds the OceanProtocol and Web3 packages to the app.

3. At this point you can already run yarn start which starts the app in your browser at localhost:3000.

4. To clear the React spinning icon, open src/App.js and modify the source to:

   import React, { Component } from 'react'
   import './App.css'
   class App extends Component {
     render() {
       return (
         <div className="App">
           <h1>Marketplace app</h1>
         </div>
       )
     }
   }
   export default App
   

5. Below the import './App.css' line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):

   import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
   import * as Web3 from 'web3'
   const web3 = new Web3(window.web3.currentProvider)
   window.ethereum.enable()
   

6. After the line class App extends Component { add the following Ocean initialization with all configuration. All OceanProtocol operations can be executed from this Ocean instance.

     async componentDidMount() {
       this.ocean = await new Ocean.getInstance({
         web3Provider: web3,
         nodeUri: "http://localhost:8545",
         aquariusUri: "http://localhost:5000",
         brizoUri: "http://localhost:8030",
         parityUri: "http://localhost:8545",
         secretStoreUri: "http://localhost:12001",
         threshold: 0,
         password: "secret",
         address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
       })
       console.log("Finished loading contracts!")
     }
   

Finished

That's it, if you have no errors in your console.log then you have successfully initialized an Ocean instance in you brand new React app and you are ready for the next steps in this tutorial.

Here is the full source of src/App.js that you should have if you followed this tutorial:

import React, { Component } from 'react'
import './App.css'
import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
import * as Web3 from 'web3'
const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable()
class App extends Component {
  async componentDidMount() {
    this.ocean = await new Ocean.getInstance({
      web3Provider: web3,
      nodeUri: 'http://localhost:8545',
      aquariusUri: 'http://localhost:5000',
      brizoUri: 'http://localhost:8030',
      parityUri: 'http://localhost:8545',
      secretStoreUri: 'http://localhost:12001',
      threshold: 0,
      password: 'secret',
      address: '0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0'
    })
    console.log('Finished loading contracts!')
  }
  render() {
    return (
      <div className="App">
        <h1>Marketplace app</h1>
      </div>
    )
  }
}
export default App