Reactjs和Nodejs

Question

我是新的反应和节点，我已将我的JSON文件保存在服务器中并使用节点我正在获取它。我需要在react组件中呈现它。 问题陈述 ： - 简单的网站在从服务器获取数据的反应中，数据可以是保存在服务器中的简单JSON文件。单击导航菜单中的列表项，您应该从JSON获取数据。

例如： 如果单击主页链接，则应显示标题和内容 如果你点击about，你应该显示标题和内容 如果你点击联系人，你应该显示标题和内容。

/ * JSON文件* /

{
        "home":{"title":"Welcome to home page","content": "welcome to the webpage."},
        "about":{"title":"we are a venture funding firm","content":"Lets work together to achieve ideas and profits"},
        "contact":{"title":"Below is the address to get in touch","content": "<div>Street no 10</div><div>Domlur</div><div> Bangalore</div><div> Pin 560037</div>"},
        "recent":{"title":"Welcome to the news section","newsArray":[{"title":"we are live on October","news": "The website is live on feb"},{"title":"UI courses launched","news": "we have introduced a UI course live now"}] }
    }

/ **** React Code ****** /

import React, { Component } from 'react';
import logo from './logo.svg' ;
import './App.css' ;
import './style.css' ; 


class App extends Component {

  render() {
    return (

      <div className="wrapper">
    <div className="banner">
      <img  width = "960px" height = "200px"  src= {require('./images/banner.jpg')}/>
      <h2> A simple layout using css and html</h2>
    </div>
    <div id="main">

    </div>
    <div className="menu">
      <h2>Side Menu</h2>
      <ul>
        <li><a href = "#" id = "home">Home</a></li>
        <li><a href = "#" id = "about">About Us</a></li>
        <li><a href = "#" id = "contact">Contact Us</a></li>
        <li><a href = "#" id = "recent">Recent News</a></li>
      </ul>
    </div>
    <div className="copyright">
      <p>Copyright 2010, Some Company</p>
    </div>

  </div>
    );
  }
}export default App;

/ *****节点代码***** /

var fs = require('fs');
var obj;
fs.readFile('dataFile.json', 'utf8', function (err, data) {
  if (err) throw err;
  obj = JSON.parse(data);
  console.log(obj.home)
});