Using React Router with CDN Links
To learn and explore React Router as a beginner, you can use a simple CDN setup without the hefty webpack configuration.
Nov 7, 2020 • 6 Minute Read
Introduction
When you are learning a new library or exploring new concepts in development mode, using CDNs can come in handy as they require minimal setup and get you up and running with only a few lines of code. To learn and explore React Router as a beginner, you can use a simple CDN setup without the hefty webpack configuration. In this guide, you'll learn how to use React and React Router using CDN links.
Setting up
Create a new file called index.html with the following boilerplate.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
</script>
</body>
</html>
The <div> inside the <body> is where your React App's DOM goes. The <script> following the <body> is where you can write your regular JavaScript to React. Next, include the CDN links as scripts for React, ReactDOM, React-Router-DOM, and Babel, as shown below
<head>
<meta charset='UTF-8'>
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'> </script>
<script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
</head>
Now you are ready to use React and React-Router-DOM inside this HTML file.
Importing React Router Elements
React Router offers components such as HashRouter, Route, Link, and so on for different purposes. Inside a regular React-CLI (Create-React-App) project, install react-router-dom as a dependency and import the components, as shown below.
import {Route,Link, HashRouter} from 'react-router-dom';
However, inside a regular JavaScript file, you need to call these components as properties of the ReactRouterDOM global object available via the CDN (React-Router-DOM's script) and assign it to a variable to use it. So in order to use the Link and Route components, you need to do the following:
const Link = ReactRouterDOM.Link;
const Route = ReactRouterDOM.Route;
Creating the App Component
Let's create a simple hooks component, the App Component, as shown below, and render it on the DOM.
const App = () => (
)
ReactDOM.render(<App />, document.querySelector('#root'));
Next, add a few links inside this component.
const App = () => (
<ReactRouterDOM.HashRouter>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/login">Login</Link></li>
<li><Link to="/register">Register</Link></li>
</ul>
</ReactRouterDOM.HashRouter>
)
The HashRouter component is directly invoked from the ReactRouterDOM global object. This is another method of requiring React-Router-DOM components, in addition to the method shown in the previous section.
Finally, set up some simple routes, as shown below.
<Route path="/" exact component={Home} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
Creating Child Components
On requesting the route /login, the Route component renders the Login Component. Create these child components to show a different message every time their route is requested.
const Home = () => <h1>Home</h1>
const Login = () => <h1>Login</h1>
const Register = () => <h1>Register</h1>
Run this HTML file and click on the login link. The current route changes to /login instead of / and the Login component is rendered. Similarly, the Register component can be rendered by clicking on the register link.
Have a look at the entire index.html file below.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
const Link = ReactRouterDOM.Link;
const Route = ReactRouterDOM.Route;
const App = () => (
<ReactRouterDOM.HashRouter>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/login">Login</Link></li>
<li><Link to="/register">Register</Link></li>
</ul>
<Route path="/" exact component={Home} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
</ReactRouterDOM.HashRouter>
)
const Home = () => <h1>Home</h1>
const Login = () => <h1>Login</h1>
const Register = () => <h1>Register</h1>
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>
Conclusion
Using CDNs for development offers a faster development environment where you can explore and experiment according to your needs. It also comes in handy when you are developing only a backend app by serving HTML files so you don't need to separately set up a frontend project consuming it. You can explore large React Libraries like Redux via CDN first to save time, and then use them inside your Create-React-App project. If you have any queries, feel free to contact me at CodeAlphabet.
