title: Adding a react component to a vanilla JS file
body: <p>I am currently aiming to make a weather widget work by using an npm module <a href="https://react-open-weather.gitbook.io/project/" rel="nofollow noreferrer">https://react-open-weather.gitbook.io/project/</a>. This is a React component, which is something I have never worked with before.</p>
  <p>I've taken the CDN's provided by the npm module, but other than that I don't know how to somehow &quot;enable&quot; my JS file to read the React component, or how I can integrate it. I've tried this link (<a href="https://reactjs.org/docs/add-react-to-a-website.html" rel="nofollow noreferrer">https://reactjs.org/docs/add-react-to-a-website.html</a>) previously to asking the question on here but stuff started breaking (see code snippet further below).</p>
  <p>The problem is that I don't know how to work with React I managed to mess it up. This is why I'm turning to you now: Anyone with React experience who could help me out here?</p>
  <p>The following <strong>react component</strong> is how I need to load the today weather data by city name:</p>
  <pre><code>&lt;ReactWeather
      forecast=&quot;today&quot;
      apikey=&quot;bdb591c14b9e4a079623b1a838313888&quot;
      type=&quot;city&quot;
      city=&quot;Copenhagen&quot;
  /&gt;
  </code></pre>
  <p>My project is built with vanilla JS, so I would need help integrating this component into my file.</p>
  <pre><code>&lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; 
          href=&quot;https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather- 
          icons.min.css&quot; 
          type=&quot;text/css&quot;/&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;section id=&quot;weather&quot;&gt;
              &lt;div class=&quot;weather_component_container&quot;&gt;&lt;/div&gt;
          &lt;/section&gt;
      
      &lt;!-- npm module for weather --&gt;
      &lt;script src=&quot;node_modules/react-open-weather/lib/js/ReactWeather.js&quot;&gt;&lt;/script&gt;
      &lt;!-- Load React --&gt;
      &lt;script src=&quot;https://unpkg.com/react@17/umd/react.development.js&quot; crossorigin&gt;&lt;/script&gt;
      &lt;script src=&quot;https://unpkg.com/react-dom@17/umd/react-dom.development.js&quot; crossorigin&gt;&lt;/script&gt;
      &lt;!-- Load our React component --&gt;
      &lt;script src=&quot;weather.js&quot;&gt;&lt;/script&gt;
  
      &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>I got the following started code from <a href="https://reactjs.org/docs/add-react-to-a-website.html" rel="nofollow noreferrer">https://reactjs.org/docs/add-react-to-a-website.html</a> and replaced it with my DOM element, which is <strong>#weather</strong></p>
  <p>And this is the error I get in the console: &quot;The &quot;data&quot; argument must be one of type string, Buffer, TypedArray, or DataView. Received type object&quot;</p>
  <p><strong>weather.js</strong></p>
  <pre><code>'use strict';
  
  React.createElement(ReactWeather, {
      forecast: &quot;today&quot;,
      apikey: &quot;bdb591c14b9e4a079623b1a838313888&quot;,
      type: &quot;city&quot;,
      city: &quot;Copenhagen&quot;
  });
  
  ReactDOM.render(
      document.getElementById('weather')
  );
  </code></pre>