Понедельник, 15 августа 2022 01:45

Курс валют ЦБ РФ на Реакте

Оцените материал
(36 голосов)

Самый простой, вероятно, способ получить, используя React, актуальные курсы валют Центрального Банка России.

Впрочем, на сей счет возможна разноголосица мнений и, как следствие, дискуссия, прекрасно! - к вашим услугам форум и форма комментариев в нижней части страницы.

 

18.03.2024 с сайта удалены все демки, демонстрировавшие чарты курсов валют Центробанка РФ. API CBR, с которым много лет не было никаких хлопот, практически перестал работать: то ли это бан за американский ip блога, то ли что-то еще (излишне говорить, все данные кэшировались), подробно разбираться нет ни смысла, ни желания. Гуд лаг май френдс.

 

Dev banner 3

 

Приступаем:

$ npx create-react-app react-cbr-app && cd react-cbr-app

 

За некоторыми подробностями, которые в контексте create-react-app могут представлять интерес для начинающих, возможно обратиться к материалу Как выглядит сайт на реакте.

 

Нам понадобится Bootstrap:

$ npm install react-bootstrap bootstrap

 

, также отредактировать App.js:

import { useState, useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Table from "react-bootstrap/Table";

function App() {
  const apiUrl = `https://www.cbr-xml-daily.ru/daily_json.js`;
  // State
  const [apiData, setApiData] = useState({});
  // Side effect
  useEffect(() => {
    fetch(apiUrl)
      .then((res) => res.json())
      .then((data) => setApiData(data.Valute));
  }, [apiUrl]);

  return (
    <div className="text-center">
      <Table bordered striped hover variant="dark" size="sm">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">ID</th>
            <th scope="col">NumCode</th>
            <th scope="col">CharCode</th>
            <th scope="col">Nominal</th>
            <th scope="col">Name</th>
            <th scope="col">Value</th>
            <th scope="col">Previous</th>
          </tr>
        </thead>
        <tbody>
          {Object.entries(apiData).map(([key, subject], i) => (
            <tr key = {i}>
              <td>{i + 1}</td>
              <td>{subject.ID}</td>
              <td>{subject.NumCode}</td>
              <td>{subject.CharCode}</td>
              <td>{subject.Nominal}</td>
              <td>{subject.Name}</td>
              <td>{subject.Value}</td>
              <td>{(subject.Value - subject.Previous).toFixed(1)}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

export default App;

 

...и, пожалуй, это все:

$ npm start

 

Вуаля!

Последнее изменениеПонедельник, 18 марта 2024 15:03

Оставить комментарий

Добавьте ваш комментарий

Заказать сайт

Веб-разработка. Заказать сайт

Вы можете заказать сайт-визитку, блог, корпоративный сайт, интернет-магазин или коммерческий web-портал.