Как импортировать части JSON, расположенные на разных серверах, в React App?

Question

Моя цель - создать веб-приложение только для чтения, которое отображает данные пользователя из JSON в соответствии с зарегистрированным пользователем.Пока приложение просто показывает данные из DB-> JSON, но не меняет их.

Результат приложения должен выглядеть следующим образом:

Мои проблемы вкратце:

1.Как импортировать JSON с большего количества серверов?

2.Как разрезать JSON на несколько частей и использовать эти части в разных местах веб-страницы?

3.Как вставить фрагменты разобранного JSON в приложение React?Правильна ли моя структура?Нужно ли вообще использовать такую ​​сложную структуру?

Более подробно ниже:

Я уже создал JSON API, которые сейчас расположены на localhost.Я использовал Java и Spring.JSON теперь выглядят так:

{
"displayName": "John Doe",
"job": "Programmer",
"skills": [
    {
        "skillName": "Java",
        "levelValue": 4
    },
    {
        "skillName": "Spring",
        "levelValue": 1
    }
        ],
}

Теперь я хочу отобразить данные JSON в React App (это используется в моей команде).Но я хочу разделить JSON на несколько частей, которые используют в разных частях сети.Например, я хочу отобразить displayName в верхней части страницы, а skills в середине.

Мое приложение - папка src теперь имеет следующую структуру:

компоненты - У каждого виджета есть свой компонент.У каждого есть файл index.js с HTML-кодом.Данные поступают из контейнера в следующем виде: {this.props.skill1}.

Components / SkillsWidget / index.js

class Card1 extends React.Component { 
  render() {
    return (
        <div className="col-sm-4">
             <h6>Skills</h6>
             {this.props.skillsList}
        </div>
           );
}

Card1.propTypes = {
    skillsList: PropTypes.any,
};

    
export default Card1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Контейнеры - объединяет компоненты.Имеет файлы actions.js, constants.js, index.js, reducer.js и sagas.js.

Global - actions.js, constants.js
Internals
media
модели

Непосредственно в папке src: index.js, network.js, redurs.js, запрос.js, rout.js, sagas.js (возможно, включая данные из контейнеров).