Как сделать такой маленький код REACT. JS на PHP?

Question

Я делаю сайт на одной CMS, которая построена на php. Я сам не знаю php, так как я front-end разработчик. И обычно я делаю сайты на js ( React. js). Учитывая, что сайт был написан на CMS, весь сайт удалось сделать простым нажатием кнопок на панели администратора самой CMS.

Но мне нужно создать небольшой php файл, который отображает погоду указанного c города на странице . Точнее, три поля и значения. Я получаю значения с помощью API из http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=32ae008b1c7259324aa50450687fabf5&units=metric

Задача - отобразить это на странице:

Город: Лондон Срок службы: 22.05 Давление: 1012

А сам API (кроме полей, которые мне не нужны) выглядит так:

{"main":{"temp":22.05,"pressure":1012},
"name":"London"}

Я написал React. js код, отображающий погоду:

class App extends React.Component {
  state = {
    city: "",
    temp: "",
    pressure: ""
  }    

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    const response = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=32ae008b1c7259324aa50450687fabf5&units=metric`);
    const data = await response.json();
    this.setState({
      city: data.name,
      temp: data.main.temp,
      pressure: data.main.pressure
    });
  };

  render() {
    return (
      <div className="App">
        City:{this.state.city}
        Temparuture:{this.state.temp}
        Pressure:{this.state.pressure}
      </div>
    );
   }
  }

К сожалению, времени на заполнение сайта очень мало, и я не смогу быстро изучить PHP. Возможно, здесь есть разработчики, которые знают и PHP, и React. js, и смогут мне чем-то помочь.

Answer 1

Вы можете просто использовать file_get_contents, чтобы получить ответ, и json_decode, чтобы превратить его в объект.

Пожалуйста, имейте go на себе в будущем, так как это не сообщество, которое всегда дает полный ответ. Я также лично не рекомендую использовать этот код в производстве.

<?php
    $response = file_get_contents("http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=32ae008b1c7259324aa50450687fabf5&units=metric");
    $weather = json_decode($response);
?>

<div>City: <?php echo $weather->name ?></div>
<div>Temparuture: <?php echo $weather->main->temp ?></div>
<div>Pressure: <?php echo $weather->main->pressure ?></div>

Соответствующие статьи:

https://www.php.net/manual/en/function.file-get-contents.php https://www.php.net/manual/en/function.json-decode.php

Если у вас установлен php локально, вы можете запустить пример кода, выполнив следующие действия:

1. Создайте папку, в которой будет находиться файл index.php
2. Скопируйте приведенный ниже код в index.php файл
3. Выполните следующую команду в папке php -S localhost:8050
4. Откройте http://localhost:8050 в своем веб-браузере

Answer 2

В конце концов, ваш проект реакции - это просто файл js, поэтому на вашем weather_page.php добавьте файл js в тег скрипта.