"react router"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/giTo/pen/XgdwPg?depth=everything&order=popularity&page=47&q=react&show_forks=false" /> <script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Comfortaa:400,300"); </style></head><body> <div id="app"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script><script src='https://unpkg.com/react-router-dom/umd/react-router-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/styled-components/2.0.1/styled-components.min.js'></script> <script >'use strict'; var _templateObject = _taggedTemplateLiteralLoose(['\n :root {\n --basic-font-size: calc(0.9rem + (1.3 - 0.9) * ((100vw - 18.75em) / (75 - 18.75)));\n --line-height: 1.4;\n --vertical-rhytm: calc(var(--basic-font-size)*var(--line-height));\n }\n html {\n font-size: var(--basic-font-size);\n font-family: \'Comfortaa\', sans-serif;\n font-kerning: normal;\n text-rendering: geometricPrecision;\n }\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }'], ['\n :root {\n --basic-font-size: calc(0.9rem + (1.3 - 0.9) * ((100vw - 18.75em) / (75 - 18.75)));\n --line-height: 1.4;\n --vertical-rhytm: calc(var(--basic-font-size)*var(--line-height));\n }\n html {\n font-size: var(--basic-font-size);\n font-family: \'Comfortaa\', sans-serif;\n font-kerning: normal;\n text-rendering: geometricPrecision;\n }\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }']), _templateObject2 = _taggedTemplateLiteralLoose(['\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }'], ['\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }']), _templateObject3 = _taggedTemplateLiteralLoose(['\n from {\n transform: scale(0.3);\n }\n to {\n transform: scale(1);\n }'], ['\n from {\n transform: scale(0.3);\n }\n to {\n transform: scale(1);\n }']), _templateObject4 = _taggedTemplateLiteralLoose(['\n width: 100vw;\n min-height: 100vh;\n background-image: linear-gradient(35deg, #C8FDFC 55%, #F88AD4);\n animation: ', ' 1s ease-out;\n display: flex;\n justify-content: center;\n align-items: center;\n'], ['\n width: 100vw;\n min-height: 100vh;\n background-image: linear-gradient(35deg, #C8FDFC 55%, #F88AD4);\n animation: ', ' 1s ease-out;\n display: flex;\n justify-content: center;\n align-items: center;\n']), _templateObject5 = _taggedTemplateLiteralLoose(['\n width: 100%;\n font-size: 5.61em;\n font-weight: 300;\n @media(max-width: 550px) {\n font-size: 2.986em\n}'], ['\n width: 100%;\n font-size: 5.61em;\n font-weight: 300;\n @media(max-width: 550px) {\n font-size: 2.986em\n}']), _templateObject6 = _taggedTemplateLiteralLoose(['\n display: flex\n flex-wrap: wrap;\n animation: ', ' 0.5s linear,\n ', ' 0.5s linear;\n'], ['\n display: flex\n flex-wrap: wrap;\n animation: ', ' 0.5s linear,\n ', ' 0.5s linear;\n']), _templateObject7 = _taggedTemplateLiteralLoose(['\n padding-left: 10px; \n list-style: none;\n'], ['\n padding-left: 10px; \n list-style: none;\n']), _templateObject8 = _taggedTemplateLiteralLoose(['\n color: black;\n opacity: 0.65;\n text-decoration: none;\n font-weight: 300;\n transition: opacity 0.22s ease-out;\n &:hover {\n opacity: 1;\n }\n &.', ' {\n color: #F88AD4;\n opacity: 0.55;\n }'], ['\n color: black;\n opacity: 0.65;\n text-decoration: none;\n font-weight: 300;\n transition: opacity 0.22s ease-out;\n &:hover {\n opacity: 1;\n }\n &.', ' {\n color: #F88AD4;\n opacity: 0.55;\n }']); function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; } var injectGlobal = styled.injectGlobal; var keyframes = styled.keyframes; var styled = styled.default; var _ReactRouterDOM = ReactRouterDOM; var HashRouter = _ReactRouterDOM.HashRouter; var NavLink = _ReactRouterDOM.NavLink; var Route = _ReactRouterDOM.Route; //global styles injectGlobal(_templateObject); //animations var show = keyframes(_templateObject2); var scale = keyframes(_templateObject3); // styled components var ColorWrapper = styled.div(_templateObject4, show); var Title = styled.h1(_templateObject5); var Header = styled.header(_templateObject6, scale, show); var List = styled.ul(_templateObject7); // styled active Link var activeClassName = 'is-active'; var StyledLink = styled(NavLink).attrs({ activeClassName: activeClassName })(_templateObject8, activeClassName); var LinkList = function LinkList() { return React.createElement( List, null, React.createElement( 'li', null, React.createElement( StyledLink, { exact: true, to: '/', activeClassName: activeClassName }, 'Home' ) ), React.createElement( 'li', null, React.createElement( StyledLink, { to: '/route-one', activeClassName: activeClassName }, 'Route One' ) ), React.createElement( 'li', null, React.createElement( StyledLink, { to: '/route-two', activeClassName: activeClassName }, 'Route Two' ) ), React.createElement( 'li', null, React.createElement( StyledLink, { to: '/route-three', activeClassName: activeClassName }, 'Route Three' ) ) ); }; var Home = function Home() { return React.createElement( Header, null, React.createElement( Title, null, 'React Router' ), React.createElement(LinkList, null) ); }; // function for proper formatting of Rout's title string var format = function format(str) { var replacement = { '/': '', '-': ' ' }; return str.replace(/\/|-/g, function (m) { return replacement[m]; }).replace(/\b./g, function (m) { return m.toUpperCase(); }); }; var Rout = function Rout(_ref) { var match = _ref.match; return React.createElement( Header, null, React.createElement( Title, null, format(match.path) ), React.createElement(LinkList, null) ); }; var App = function App() { return React.createElement( HashRouter, null, React.createElement( ColorWrapper, null, React.createElement(Route, { exact: true, path: '/', component: Home }), React.createElement(Route, { path: '/route-one', component: Rout }), React.createElement(Route, { path: '/route-two', component: Rout }), React.createElement(Route, { path: '/route-three', component: Rout }) ) ); }; ReactDOM.render(React.createElement(App, null), document.getElementById('app')); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: