index_3_1.html

<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <style>
        nav {
            display: flex;
            justify-content: space-around;
            background-color: cadetblue;
        }

        nav>a {
            color: coral;
            font-size: 30px;
        }
    </style>
</head>
<div id="root"></div>
<script type="text/babel">
    const NavItems = () =>
        <>
            <a href="/">Home</a>
            <a href="/About">About</a>
            <a href="/Services">Services</a>
            <a href="/Contact">Contact</a>
        </>
    const App = () =>
        <header>
            <nav>
                <NavItems />
            </nav>
        </header>

    ReactDOM.render(
        <App />,
        document.getElementById("root")
    )
</script>

</html>