Добавление компонента react в ванильный JS-файл

#javascript #reactjs #api #widget #weather

#javascript #reactjs #API #виджет #Погода

Вопрос:

В настоящее время я пытаюсь заставить виджет погоды работать с помощью модуля npm https://react-open-weather.gitbook.io/project /. Это компонент React, с которым я никогда раньше не работал.

Я взял CDN, предоставленные модулем npm, но кроме этого я не знаю, как каким-то образом «включить» мой JS-файл для чтения компонента React или как я могу его интегрировать. Я пробовал эту ссылку (https://reactjs.org/docs/add-react-to-a-website.html ) ранее задавал вопрос здесь, но материал начал ломаться (см. Фрагмент кода ниже).

Проблема в том, что я не знаю, как работать с React, мне удалось все испортить. Вот почему я обращаюсь к вам сейчас: кто-нибудь с опытом работы с React, кто мог бы мне здесь помочь?

Следующий компонент react — это то, как мне нужно загрузить данные о погоде на сегодня по названию города:

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

Мой проект построен с использованием vanilla JS, поэтому мне понадобится помощь в интеграции этого компонента в мой файл.

 <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>

Я получил следующий начальный код из https://reactjs.org/docs/add-react-to-a-website.html и заменил его моим элементом DOM, который называется #weather

И это ошибка, которую я получаю в консоли: «Аргумент «data» должен быть типа string, Buffer, TypedArray или DataView. Полученный объект типа»

weather.js

 'use strict';

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

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

1. reactjs.org/docs /… Попробуйте выполнить этот шаг, чтобы использовать компонент jsx.

2. @StefanWang пожалуйста, ознакомьтесь с обновленным фрагментом кода и ошибкой консоли в последней части моего вопроса

Ответ №1:

По умолчанию JavaScript не понимает синтаксис JSX. Вы можете пропустить этот документ: https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx

Пожалуйста, добавьте скрипт и повторите попытку

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

Примечание: не используйте этот скрипт в рабочей среде, потому что это может замедлить работу вашего приложения. Для использования в рабочей среде обратитесь к документу https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

1. Привет, Пэт, спасибо за ваш вклад. Я просмотрел статью и выполнил команды, но я все еще не понимаю, почему мой компонент React выдает ошибку в консоли. Должен ли я написать это иначе, чем то, что у меня есть выше в моем фрагменте кода?