Javascript-форум - Reactjs search bar с данными .json

Добрый день! Знания React'а довольно скудные, в процессе изучения и выполнения заданий возник вопрос.
Задача стоит в следующем:
необходимо сделать список контактов с мгновенным search bar'ом. Сложность для меня заключается в том, что данные (контакты) находятся в отдельном файле .json , я не знаю как правильно его "внедрить" в документ .html, как правильно обращаться к массивам и объектам внутри них конкретно в этой ситуации. Смотрела множество примеров реализации мгновенного поиска контактов в списке, но все данные контактов были помещены в переменную и находились непосредственно в документе .html .
Вот, собственно , недокод, который должен выводить имена списком из документа .json

import React from 'react'
    import {render} from 'react-dom'
    import JSON from 'clients'
    var ClientsData = JSON.parse(fs.readFileSync('./clients.json'));
            var ClientsList = React.createClass({
                render: function() {
                    return(
                      <div>
                        <ul>
                            {
                            ClientsData.map( function(el){
                                return <li> {el.firstName} </li>;
                            })
                            }
                         </ul>
                      </div>
                     );
                }
            });
            ReactDOM.render(
                    <ClientsList />,
            document.getElementById("clients_list")
            );

В html это выглядит так:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css1.css" rel="stylesheet" type="text/css"/>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<script src="clients.json"></script>
    
    </head>
    <body>
        
           
            <div id="clients_list"></div>
            <script type="text/babel">
/ далее скрипт, что выше

А это, собственно, данные из .json

[
  {
    "general": {
      "firstName": "Masha",
      "lastName": "Ivanova",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"
    },
    "job": {
      "company": "Eva",
      "title": "Seller"
    },
    "contact": {
      "email": "maxa_ivanova@gmail.com",
      "phone": "(895) 135-0678"
    },
    "address": {
      "street": "Karla Marksa, 35",
      "city": "Dnepr",
      "zCode": "48155",
      "country": "Ukraine"
    }
  },
  {
    "general": {
      "firstName": "Ira",
      "lastName": "Ivchenko",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/andysolomon/128.jpg"
    },
    "job": {
      "company": "ATB",
      "title": "cahier"
    },
    "contact": {
      "email": "ira_ivchenko_95@yahoo.com",
      "phone": "375-45-15"
    },
    "address": {
      "street": "Gagarina, 48",
      "city": "Zaporozhie",
      "Code": "145-25-178",
      "country": "Ukraine"
    }
  },
  {
    "general": {
      "firstName": "Arnold",
      "lastName": "Black",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/holdenweb/128.jpg"
    },
    "job": {
      "company": "Gorillaz",
      "title": "manager"
    },
    "contact": {
      "email": "arnold_bl@hotmail.com",
      "phone": "305-47-26"
    },
    "address": {
      "street": "Left-bank street",
      "city": "Grodno",
      "Code": "546-32-96",
      "country": "Belarus"
    }
  }
]

Возлагаю надежды на вашу помощь:help: