title: Use Web3 and Metamask in React
body: <p>I'm trying to create my first dapp using React.
  I can't understand how connecting Web3.js to React and how to use it right.
  Can you show how to do it correctly?
  Maybe I should use state.
  Thank you!</p>
  
  <pre><code> import React, { Component } from 'react';
   import Web3 from 'web3';
   import ABI from './web3/ABI'
  
      class App extends Component {
  
          web3Connection = () =&gt; {
                  let web3
                  if (window.ethereum) {
                      web3 = new Web3(window.ethereum);
                      try {
                          window.ethereum.enable().then(function() {});
                      } catch (e) {}
                  } else if (window.web3) {
                      web3 = new Web3(web3.currentProvider);
                  } else {
                      alert('You have to install MetaMask !');
                  }
  
                  web3.eth.defaultAccount = web3.eth.accounts[0];
  
  
                  const EthereumNoteContract = web3.eth.contract(ABI);
  
                  const EthereumNote = EthereumNoteContract.at('address');
  
              }
  
          addMyNote = (_text) =&gt; {
                  EthereumNote.addMyNote(_text, { value: 0 }, function(error, result) {
                      if (error) console.log(error);
                      else console.log(result)
                  });
              }
  
          render() {
  
              return (
                  &lt;div&gt;
                  {this.web3Connection}
                  &lt;button onClick={this.addMyNote}&gt;Send&lt;/button&gt;
                  &lt;/div&gt;
              )
          }
      }
  </code></pre>