1
0
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:
Troy McConaghy 2018-12-05 17:48:15 +01:00
parent c1609f283e
commit 7ae75865b8
2 changed files with 12 additions and 12 deletions

View File

@ -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>
) )

View File

@ -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>
) )
} }