Adding an Adsense advert to a React app is a little tricky since you can't directly use the code generated for you by Google. However, you can create a component which allows you to show ads with a little bit of work.

Google's code

Google generates Adsense code for you, which looks a bit like this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-xxxxxxxxxx"
      data-ad-slot="xxxxxxxxxx"
      data-ad-format="auto"></ins>
  <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
  </script>

Move load script to HTML page

Firstly, move the first 'pagead2.googlesyndication.com' script into your HTML document (in this case, index.html):

<!-- index.html -->
  ...
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </body>
</html>

Create advert component

Next, create a React component for the advert:

import React from 'react';

export default class Ad extends React.Component { componentDidMount () { (window.adsbygoogle = window.adsbygoogle || []).push({}); } render () { return ( <div className='ad'> <ins className='adsbygoogle' style={{ display: 'block' }} data-ad-client='ca-pub-xxxxxxxxxx' data-ad-slot='xxxxxxxxxx' data-ad-format='auto' /> </div> ); } }

There are a few changes you need to make:

  1. Put the (window.adsbygoogle = window.adsbygoogle || []).push({}); line into the componentDidMount method;
  2. Stick the HTML into the render method;
  3. Change all class attributes into className;
  4. Change style attribute so styles are wrapped with double curly brackets - style={{ display: 'block' }}

From here, you can replace the various attributes with props if needed.