restructure React tutorials, add screenshots, code examples consistency

content/tutorials/react-publish-data-set.md

@@ -7,12 +7,15 @@ description: Tutorial to add dataset publishing capabilities to a basic React ap
 
 This is a continuation of the [React App Setup](/tutorials/react-setup) tutorial, so make sure you have done all the steps described in there.
 
-## Adding Publishing
+Open `src/App.js` in your marketplace app 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.
+## Define Asset
-2. First, let's add the asset that we want to publish. To do that, we need to add the following code after `window.ethereum.enable()` line.
 
-   ```javascript
+First, let's add the asset that we want to publish.
+
+To do that, we need to add the following code after `window.ethereum.enable()` line, defining our asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure:
+
+```js
 const asset = {
   base: {
     name: 'Office Humidity',
@@ -50,17 +53,19 @@ This is a continuation of the [React App Setup](/tutorials/react-setup) tutorial
 }
 ```
 
-3. Now that we have an asset to submit, we need function to handle it. Just before `render() {` let's add:
+## Handle Asset Publishing
 
-    ```javascript
+Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
+
+```js
 async submitAsset() {
   const accounts = await this.ocean.getAccounts()
   const ddo = await this.ocean.registerAsset(asset, accounts[0])
-      alert("Asset successfully submited:", JSON.stringify(ddo))
+  alert('Asset successfully submited: ', JSON.stringify(ddo))
 }
 ```
 
-4. The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
+The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
 
 ```jsx
 <button onClick={() => this.submitAsset()}>Register asset</button>
@@ -140,7 +145,7 @@ class App extends Component {
 
   render() {
     return (
-      <div className="App">
+      <div className="App App-header">
         <h1>Marketplace app</h1>
         <button onClick={() => this.submitAsset()}>Register asset</button>
       </div>

content/tutorials/react-setup.md

@@ -13,12 +13,28 @@ description: This tutorial shows how you can build a basic [React](https://react
   - Edit the `brizo.env` file and set all `AZURE_`... values.
   - Run `./start_ocean.sh --no-pleuston --local-pond-node`. This runs all services locally, including a local Parity Ethereum node.
 
-## Tutorial Steps
+## New Create React App
 
-1. Run `npx create-react-app marketplace` in you terminal. This will create a folder named `marketplace` with a boilerplate React app.
+First, kick start your new React app by creating a boilerplate with Create React App:
-2. Move to your app directory with `cd marketplace` and run `npm install @oceanprotocol/squid web3`. This adds the Ocean Protocol JavaScript library and Web3 packages to the app.
+
-3. At this point you can already run `npm start` which starts the app in your browser at [localhost:3000](http://localhost:3000).
+```bash
-4. To clear the React spinning icon, open `src/App.js` and modify the source to:
+npx create-react-app marketplace
+```
+
+This will create a folder named `marketplace` with a boilerplate React app. Go into that new folder and add the Ocean Protocol JavaScript library and Web3 packages to the app's dependencies:
+
+```bash
+cd marketplace/
+npm install @oceanprotocol/squid web3
+```
+
+At this point you can already run `npm start` which starts the app in your browser at [localhost:3000](http://localhost:3000):
+
+![React App 01](images/react-app-01.png)
+
+## Add Markup & Web3
+
+Let's make it ours, open `src/App.js` and replace the whole source with:
 
 ```jsx
 import React, { Component } from 'react'
@@ -27,7 +43,7 @@ description: This tutorial shows how you can build a basic [React](https://react
 class App extends Component {
   render() {
     return (
-         <div className="App">
+      <div className="App App-header">
         <h1>Marketplace app</h1>
       </div>
     )
@@ -37,9 +53,9 @@ description: This tutorial shows how you can build a basic [React](https://react
 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):
+Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
 
-   ```javascript
+```js
 import { Ocean } from '@oceanprotocol/squid'
 import * as Web3 from 'web3'
 
@@ -47,9 +63,18 @@ description: This tutorial shows how you can build a basic [React](https://react
 window.ethereum.enable()
 ```
 
-6. At the beginning of your component, create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
+After those steps you should see this, and MetaMask should have asked you to allow access to your account:
 
-    ```javascript
+![React App 02](images/react-app-02.png)
+![React App 03](images/react-app-03.png)
+
+## Create Ocean instance
+
+Now that we are successfully connected with Web3, we can setup our Ocean instance.
+
+At the beginning of your component, create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
+
+```js
 async componentDidMount() {
   this.ocean = await new Ocean.getInstance({
     web3Provider: web3,
@@ -68,7 +93,9 @@ description: This tutorial shows how you can build a basic [React](https://react
 
 ## Final Result
 
-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.
+That's it, if you have no errors in your `console.log` then you have successfully initialized an Ocean instance in your brand new React app and you are ready for the [next part of this tutorial](/tutorials/react-publish-data-set/).
+
+![React App 04](images/react-app-04.png)
 
 Here is the full source of `src/App.js` that you should have if you followed this tutorial:
 
@@ -99,7 +126,7 @@ class App extends Component {
 
   render() {
     return (
-      <div className="App">
+      <div className="App App-header">
         <h1>Marketplace app</h1>
       </div>
     )
@@ -108,3 +135,5 @@ class App extends Component {
 
 export default App
 ```
+
+Move on to [Publish a Data Set](/tutorials/react-publish-data-set/).