7
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.
Create a new file called index.html
with the following boilerplate.
1 2 3 4 5 6 7 8 9 10 11 12
<!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
1 2 3 4 5 6 7
<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.
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.
1
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:
1 2
const Link = ReactRouterDOM.Link; const Route = ReactRouterDOM.Route;
Let's create a simple hooks component, the App Component
, as shown below, and render it on the DOM.
1 2 3 4
const App = () => ( ) ReactDOM.render(<App />, document.querySelector('#root'));
Next, add a few links inside this component.
1 2 3 4 5 6 7 8 9
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.
1 2 3
<Route path="/" exact component={Home} /> <Route path="/login" component={Login} /> <Route path="/register" component={Register} />
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.
1 2 3
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
<!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>
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.
7