App.css

nav a {
  padding-right: 8px;
  text-decoration: none;
}

li { 
  margin: 8px;
}

component.js

export default function News(){
  return <h1>News</h1>
}

react-router.md

React Router News App

Navigate through a basic news app

sportData.js

const wikiCommons = 'https://upload.wikimedia.org/wikipedia/commons/'
const footballSrc = wikiCommons + '1/1b/American_football_icon_simple.svg'
const basketballSrc = wikiCommons + '7/7a/Basketball.png'
const baseballSrc = wikiCommons + '9/92/Baseball.svg'
const soccerSrc = wikiCommons + '6/6e/Football_%28soccer_ball%29.svg'

const sportsData = [
  { id: 1, title: 'Football', imageSrc: footballSrc },
  { id: 2, title: 'Basketball', imageSrc: basketballSrc },
  { id: 3, title: 'Baseball', imageSrc: baseballSrc },
  { id: 4, title: 'Soccer', imageSrc: soccerSrc }
]

export default sportsData;