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

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

Приступаем:

$ 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

Вуаля!