React Main and Head - JSFiddle - JSFiddle

Built with JSX

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script>
<div id="main"></div>

SCSS

* {
  font-family: Lato, sans-serif;
  padding: 0;
  margin: 0;
}

#main {
  background: #eee;
  
  .head {
    padding: 20px;
    background: #d00;
    color: #fff;
  }
  
  .item {
    margin: 8px 0;
    background: #fff;
    padding: 20px;
  }
}

@font-face { 
    font-family: Lato; 
    src: local('Lato'), 
        url(https://fonts.googleapis.com/css?family=Lato);
}

Babel + JSX

//db.json
const db = {
  "posts": [
    {
      "id": 0,
      "image": "/images/1.jpg",
      "name": "How much counвввtries in Africa",
      "text": "It contains 54 fully recognised sovereign states (countries), nine territories and two de facto independent states with limited or no recognition."
    },
    {
      "id": 1,
      "image": "/images/2.jpg",
      "name": "How big is Africa?",
      "text": "It covers 6% of Earth's total surface area and 20.4% of its total land area"
    },
    {
      "id": 2,
      "image": "/images/3.jpg",
      "name": "What the largest country in Africa?",
      "text": "Algeria is Africa's largest country by area, and Nigeria is its largest by population"
    },
    {
      "id": 3,
      "image": "/images/4.jpg",
      "name": "When comes winter in Africa?",
      "text": "Winter in Africa starts 21 june, and ends after 23 september. Temperature can change from  2C to 26C during the winter according to the location"
    }
  ]
};

// reducer.js
const mainReducer = (state, { type, readyState, error, result }) => {
	switch(type) {
  	case 'POSTS/LOAD':
    	return {
        ...state, 
        loading: true, 
        posts: result || [], 
        error,
        readyState,
      };
    default:
    	return state;
  }
};

//middleware.js
function middleware() {
  return (next) => (action) => {    
    const { promise, ...rest } = action;
    if (!promise) {
      return next(action);
    }

    next({ ...rest, readyState: 'loading' });
    return promise.then(
      success => 
      	success.json().then(
          result => next({ ...rest, result, readyState: 'success' }),
          error => next({ ...rest, error, readyState: 'failure' })
        ),
      error => next({ ...rest, error, readyState: 'failure' })
    );
  };
}

//head.jsx
const Head = props => (
  <h1 className="head">
    {props.children}
  </h1>
);

//item.jsx
const Item = props => (
  <div className="item">
    <h2>{props.name}</h2>
    <p>{props.text}</p>
 ...