Installing React Router and Declaring Routes

React router is an external library that you install with NPM, or Yarn. 0:00 It has separate packages available for either web, or native app development. 0:04 Since we're working on a react web app that uses the DOM and 0:08 runs in a browser, we'll need to install react router DOM. 0:12 Over in my terminal, I'll first stop running the app by pressing Ctrl + C, 0:15 then to install react router dom as a dependency, 0:20 let's run the command npm install --save followed 0:23 by react-router-dom. 0:28 React let's you create components with JSX 0:33 an extension to the JavaScript language that uses an expressive XML style syntax. 0:37 Most react developers write components in JSX, because it resembles writing HTML. 0:42 React router extends what you already know about react, and the library itself 0:46 is just the small set of react components, so you write your routes using JSX. 0:50 React router DOM provides two components to get you started. 0:55 BrowserRouter, the root routing component, that keeps your UI in sync with URL and 0:58 Route, which is responsible for 1:03 rendering a component in your app, when the URL matches its path. 1:05 In react, you build components that fit into other components. 1:09 For example, index.js is rendering the app components into the dom. 1:12 So, app is the root component of our app. 1:17 It's going to be responsible for 1:20 displaying the content rendered by the home about teachers and courses component. 1:22 As well as shared elements like the app's main layout container, header, and 1:26 navigation. 1:29 React-router lets you declare routes from anywhere in your component tree. 1:30 So, we're going to write most of our routes here 1:34 inside the route app component. 1:37 In app.js, let's first import the components browser router and 1:39 route from react-router by typing import. 1:43 Browser router and 1:47 route from 'react-router-dom'. 1:52 You begin declaring routes with react router 2:00 by rendering a router that wraps all your app components. 2:03 So, we'll wrap the BrowserRouter component around our app by placing this 2:06 main container div inside opening and closing BrowserRouter tags. 2:11 So, this renders the route router that listens to URL changes, and 2:25 provides other react rather component information about the current URL and, 2:29 which components to render, that way your UI is always in sync with the URL. 2:33 Normally in react, you render nested, or child components with its tag. 2:38 So, for example, you can render the home component with an app by including 2:44 the home tag inside the container div. 2:49 Well, in this case, we're not just loading one unchanging component into app. 2:51 We want our app to render a different component inside app based on the URL. 2:57 So, for example, the home component for 3:01 the route path, the about component for the /about path, and so on. 3:03 But with react router. 3:07 You render components via the route component. 3:08 So, lets nest a self closing route tag inside the container div. 3:12 And the quickest way to create a route is by specifying a path, and the component 3:19 you want to render for that path by using the path and component properties. 3:23 Path indicates the URL to match and the component prop specifies, 3:30 which react component to render when the URL matches the route path. 3:35 So, for example, to render the home component at the root path, or 3:41 when the app loads, I'll use a forward slash for 3:45 path, then set the component prop to home. 3:48 So, when the path in the URL is a forward slash, or 3:52 when it's the route path, this route will render the Home component. 3:54 Let's have a look. 3:59 I'll run the app in my terminal with npm start, And, 4:00 over in the browser, we get a failed to compile error. 4:06 It says, Home is not defined. 4:10 Well, we're getting this error, because we've specified home and 4:13 the component prop, but we haven't yet imported the home component in app.js. 4:17 So, let's do that now. 4:22 I'll just leave a comment here that says, App components. 4:22 And below that we'll type 4:26 import home from ./Home. 4:30 I'll give this a save, and, now, at the root path, the router renders 4:35 the home component inside app, and we're able to see the app's welcome content. 4:40 Now, the best part about working with react-router is that since you're working 4:45 with regular components, wherever you declare a route, the component 4:49 the route renders automatically becomes a nested component in your UI. 4:53 In other words, any route you write in the app container 4:57 will render a child's component when its path matches the URL. 5:02 Next, let's declare a route for the about component. 5:06 So, first, we'll import About from './About';. 5:09 Now, let's add a new route component, this time we'll specify 5:18 that when the URL path is forward ''/about'', render the about component. 5:23 Back in our app changing the URL to forward slash about shows that both 5:37 the home and about components are being rendered inside app. 5:41 Well, this happens, because both paths began with a forward slash. 5:45 So, the router considers the route forward slash route 5:50 the same as the forward slash about route. 5:54 They both match the URL. 5:56 So, to fix this, we'll need to add the exact prop to the home route. 5:59 Exact instructs the router to render the component only 6:07 when the path matches the URL exactly, so only when it's a forward slash. 6:12 So, if we take a look at it now we'll see that just the about component is rendering 6:18 inside app at the forward slash about path. 6:21 Currently, app just displays the content rendered by the home and about components. 6:24 But the apps header and main navigation should be present at all times. 6:30 Like this. 6:35 So, next, let's make the header and navigation available to our entire app. 6:36 And, we'll do that by first importing the header component, inside out. 6:40 And since the header needs to be present at all times, 6:49 we can simply nest the header component inside App, just above our routes. 6:53 Now, the navigation isn't working just yet, so 7:04 clicking a navlink isn't going to link you to a route. 7:06 You'll learn how to do that in a later video. 7:10 And, now, that you've learned to declare routes, why don't you write the routes for 7:12 the teachers and courses components. 7:15 Your routes should look like this when the path and the URL is forward slash 7:18 teachers, the router should render the teachers component inside app. 7:23 And when the path is forward slash courses, 7:26 it should render the courses component. 7:29 In the next video, you'll see how I wrote the routes, and 7:31 you'll also learn other ways to render components with route. 7:33