mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-01 15:55:34 +01:00
More editing new React app tutorial, not done yet
This commit is contained in:
parent
c1609f283e
commit
7ae75865b8
@ -9,7 +9,7 @@ This is continuation of the [React App Setup](/tutorials/react-setup) tutorial,
|
|||||||
|
|
||||||
## Adding Publishing
|
## Adding Publishing
|
||||||
|
|
||||||
1. Open `src/App.js` in your marketplace dapp from the [React App Setup](/tutorials/react-setup) tutorial.
|
1. Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup) tutorial.
|
||||||
2. First lets add asset that we want to publish. To do that we need to add the following code after `window.ethereum.enable()` line.
|
2. First lets add asset that we want to publish. To do that we need to add the following code after `window.ethereum.enable()` line.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -60,7 +60,7 @@ This is continuation of the [React App Setup](/tutorials/react-setup) tutorial,
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
4. Last thing we need is button to start our registration inside render function just after `<h1>Marketplace dapp</h1>`
|
4. Last thing we need is button to start our registration inside render function just after `<h1>Marketplace app</h1>`
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<button onClick={() => this.submitAsset()}>Register asset</button>
|
<button onClick={() => this.submitAsset()}>Register asset</button>
|
||||||
@ -136,7 +136,7 @@ class App extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<h1>Marketplace dapp</h1>
|
<h1>Marketplace app</h1>
|
||||||
<button onClick={() => this.submitAsset()}>Register asset</button>
|
<button onClick={() => this.submitAsset()}>Register asset</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -7,16 +7,16 @@ This tutorial shows how you can build a basic [React](https://reactjs.org/) app
|
|||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
- `nodejs` >= 10 installed. (You can check using `node -v`.)
|
- `nodejs` >= 10 is installed. You can check using `node -v`
|
||||||
- `npm` >= 5.2 installed. (You can check using `npm -v`.)
|
- `npm` >= 5.2 is installed. You can check using `npm -v`
|
||||||
- [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) running, but with _Pleuston not running_. (Pleuston is another React app.)
|
- Running all the services started by `./start_ocean.sh --no-pleuston --local-pond-node` in [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) running with
|
||||||
- A browser with [MetaMask](https://metamask.io/) and some Ether in your account (for the network you're connected to). See [the tutorial about getting Ether and Ocean Tokens for testnets](/tutorials/get-ether-and-ocean-tokens/).
|
- Using browser with [MetaMask](https://metamask.io/) and some Ether in your account (for the network you're connected to). See [the tutorial about getting Ether and Ocean Tokens for testnets](/tutorials/get-ether-and-ocean-tokens/).
|
||||||
|
|
||||||
## Tutorial Steps
|
## Tutorial Steps
|
||||||
|
|
||||||
1. Run `npx create-react-app marketplace` in you terminal. This will create a folder named `marketplace` with a boilerplate React app.
|
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 dapp directory with `cd marketplace` and run `yarn add @oceanprotocol/squid web3`. This adds OceanProtocol and Web3 packages to the dapp.
|
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 dapp in your browser at [localhost:3000](http://localhost:3000).
|
3. At this point you can already run `yarn start` which starts the app in your browser at [localhost:3000](http://localhost:3000).
|
||||||
4. To clear the React spinning icon, open `src/App.js` and modify the source to:
|
4. To clear the React spinning icon, open `src/App.js` and modify the source to:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -26,7 +26,7 @@ This tutorial shows how you can build a basic [React](https://reactjs.org/) app
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<h1>Marketplace dapp</h1>
|
<h1>Marketplace app</h1>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -64,7 +64,7 @@ This tutorial shows how you can build a basic [React](https://reactjs.org/) app
|
|||||||
|
|
||||||
## Finished
|
## 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 dapp and you are ready for the next steps in this tutorial.
|
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:
|
Here is the full source of `src/App.js` that you should have if you followed this tutorial:
|
||||||
|
|
||||||
@ -93,7 +93,7 @@ class App extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<h1>Marketplace dapp</h1>
|
<h1>Marketplace app</h1>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user