Adding a react component to a vanilla JS file

Question

I am currently aiming to make a weather widget work by using an npm module https://react-open-weather.gitbook.io/project/. This is a React component, which is something I have never worked with before.

I've taken the CDN's provided by the npm module, but other than that I don't know how to somehow "enable" my JS file to read the React component, or how I can integrate it. I've tried this link (https://reactjs.org/docs/add-react-to-a-website.html) previously to asking the question on here but stuff started breaking (see code snippet further below).

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?

The following react component is how I need to load the today weather data by city name:

<ReactWeather
    forecast="today"
    apikey="bdb591c14b9e4a079623b1a838313888"
    type="city"
    city="Copenhagen"
/>

My project is built with vanilla JS, so I would need help integrating this component into my file.

<head>
    <link rel="stylesheet" 
        href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather- 
        icons.min.css" 
        type="text/css"/>
    </head>

    <body>
        <section id="weather">
            <div class="weather_component_container"></div>
        </section>
    
    <!-- npm module for weather -->
    <script src="node_modules/react-open-weather/lib/js/ReactWeather.js"></script>
    <!-- Load React -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- Load our React component -->
    <script src="weather.js"></script>

    <script src="script.js"></script>
</body>

I got the following started code from https://reactjs.org/docs/add-react-to-a-website.html and replaced it with my DOM element, which is #weather

And this is the error I get in the console: "The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type object"

weather.js

'use strict';

React.createElement(ReactWeather, {
    forecast: "today",
    apikey: "bdb591c14b9e4a079623b1a838313888",
    type: "city",
    city: "Copenhagen"
});

ReactDOM.render(
    document.getElementById('weather')
);

https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx Try this step to use jsx component. — robdev91, Dec 08 '20 at 09:41
@StefanWang please see the updated code snippet and console error in the last part of my question — Mégane Londoño, Dec 08 '20 at 10:59

Pat Pham · Answer 1 · 2020-12-08T09:51:01.040

0

By default, JavaScript don't understand JSX syntax. You may miss this document: https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx

Please add the script and try again

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Note: don't use this script in production because it may slow your app. To use in production, refer to the doc https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

edited Dec 08 '20 at 09:51

answered Dec 08 '20 at 09:41

Pat Pham

1
3

Hi Pat, thank you for your input. I've gone through the article and ran the commands but I still don't understand why my React component is throwing an error in the console. Do I have to write it differently to what I have above in my code snippet? – Mégane Londoño Dec 08 '20 at 10:27

Adding a react component to a vanilla JS file

1 Answers1