mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-02 08:20:22 +01:00
90 lines
3.3 KiB
Markdown
90 lines
3.3 KiB
Markdown
---
|
|
title: React setup
|
|
---
|
|
|
|
### Requirements ###
|
|
- `nodejs` >= 10 and `npm` >= 5.2 installed.
|
|
- [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) running.
|
|
- Browser with [Metamask](https://metamask.io/) 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](http://localhost:3000).
|
|
4. To clear react spinning icon open `src/App.js` and modify the source to:
|
|
```javascript
|
|
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.
|
|
```javascript
|
|
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.
|
|
```javascript
|
|
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:
|
|
```javascript
|
|
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;
|
|
```
|