docs/content/tutorials/react-setup.md

title
React setup

Requirements

• nodejs >= 10 and npm >= 5.2 installed.
• oceanprotocol/docker-images running.
• Browser with Metamask and some ether in your account.

Tutorial Steps

1. Run npx create-react-app marketplace in you terminal. This will create folder marketplace with boilerplate react app.
2. Move to your dapp directory with cd marketplace and run yarn add @oceanprotocol/squid web3. This adds OceanProtocol and Web3 packages to the dapp.
3. At this point you can already run yarn start which starts dapp in your browser at localhost:3000.
4. To clear 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 dapp</h1>
        </div>
      );
    }
  }
  export default App;

5. Below import './App.css'; lets import packages we installed, setup 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 line class App extends Component { add 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 Ocean instance in you breand new react dapp and you are ready for next steps in this tutorial.

Here is 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 dapp</h1>
        </div>
      );
    }
  }
  export default App;