Welcome to my React learning guide if you’re an Angular developer. On this series, I’ll provide you all the steps to develop the “Getting Started with Angular: Your First App” using React. , we review the essential elements of the React template, the prop system, and the communication channel between parent and children components. In the last lecture Now is time to talk about the routing. What routing means? In traditional web development, is a concept related to the physical location of the files required to display an application. If a user wants to render a page, the Browser clears the window document and updates everything with the information provided by the server. Routing If you review the real path of a file inside a server, it will include many characters (something like ). . Fortunately, The routing method exists and will transform the full path in something that can be easily recognized by the users like . https://12.123.13.243:1233/system/server01/src/html/index.html Can you imagine how hard it would be to remember an URL like that? https://myhairisblue.com/ The problem with the traditional approach is the white screen displayed by the Browser while the clearing process occurs. One of the techniques used to avoid the white screen of hell is what we all know as . Using this technique, the Browser will update the view without requesting a new template on the server using tools like Angular or React. single page application (SPA) How can I navigate through my SPA without requesting a new template in the server? The short answer is: We need to overwrite the default behavior of the server routing system. There are two techniques to achieve this: — The URL protocol allows users to interact with the URL without generating a new request to the server appending #. With this method, it is possible to update the information presented to the user by changing the URL without requesting a new template. ( ). The hashing system https://myhairisblue.com/#/no-refresh-page — This implies to redirect all the server petitions to the index.html. With that setup in place, we can interact with the URL without the use of the hashing system. ( ). The redirect method https://myhairisblue.com/no-refresh-page With all of this in mind, let’s start with the code: Coding Time Please fork this to start working in the React project. The URL of the Angular tutorial is . repo here Registering a route Here we are. In Angular, you must use the tools provided by the Angular Team. It’s a very well tested solution with excellent support. However, in React, we are the kings, aren’t we?. How could I Register a route using React? Let’s start by checking all the different options available in the official . As you can see, there are different flavors (Aviator, Backbone, component-router, Director, Finch, Reach Router, react-mini-router, react-router, react-router-component, and so on.). On this tutorial, I’ll pick the most popular routing libraries, I’m talking about and . React documentation React Router Dom Reach Router I picked these two libraries because according to , those are the most used. Please go to see the results yourself. npmtrends.com here Let’s start by creating the Product Details Component Create a file Add the following code. ProductDetails.js Add the following code: React ; ProductDetails = { ( <h2>Product Details works!</h2> ) }; ProductDetails; import from 'react' const => () return < = > div className "product-deatils" </ > div export default Let's code using React Router Dom 1. Go to index.js 2. Import the Component BrowserRouter . { BrowserRouter Router, Route } ; import as from "react-router-dom" 3. Replace by Fragment Browser 4. Replace Component by Products Route <Route exact path= component={ProductList} /> "/" 5. Go to ProductList.js 6. Import the component Link { Link } ; import from "react-router-dom" 7. Add the match in line 9. prop ProductList = { const ( ) => { name, match } 8. Update the anchors as follows: <Link to={ } title={ }> { product.name } < ` products/ ` ${match.url} ${index} ` details` ${product.name} /Link> Now is time for Reach React Router 1. Go to index.js 2. Import the Component Router { Router } import from "@reach/router" 3. Replace the container. <div className="container"> 4. Go to ProduList.js 5. Import the component Link { Link } ; import from "@reach/router" 6. Update the anchors as follows: <Link to={ } title={ }> { product.name } < `/products/ ` ${index} ` details` ${product.name} /Link> At this point, the application will be able to: Display the index page. Navigate to the to display the new Component after a click on each product title. Product Details Page ProductDetails What did we do? In React, everything is a . If the Function has some behavior related to the DOM, you will have a Component. The Router is a component too, something similar to the we use to inject the Angular components. However, it doesn’t use a but routes specified as . Function <router-outlet> configuration object children components Another thing you will notice is the use of the component instead of specifying the new path using a regular — . As a general rule, you should pick a component if the intention is to link an external resource and you should use a component when connecting different URL within the SPA. <Link> anchor <a> <a> <Link> What does the Link component do? The component will render a valid tag, and it will prevent the default behavior — submit a form, open a new tab, and so on — and it maps the given props options with the final anchor returned. Please refer to the official documentation of the router component for more information. <Link> <a> Using route information On this section, we will use the data of the URL to display the right information into the view. ProductDetails 1. Go to the index.js 2. Import the Component. ProductDetails ProductDetails ; import from './ProductDetails' 3. Add a route to the product detail: <Route path= component={ProductDetails} /> <ProductDetails path= /> // Using react-router-dom "/products/:productId" // Using reach-router "/products/:productId" 4. To read the param provided in the URL using , replace with: React Router Dom ProductDetails.js React ; {products} ; ProductDetails = { { : { productId }} = match; product = products[productId]; ( <h2>Product Details</h2> <div> <h3>{ product.name }</h3> <h4>{ product.price }</h4> <p>{ product.description }</p> </div> ) }; ProductDetails; import from 'react' import from './products' const ( ) => { name, match } const params const return < = > div className "product-deatils" </ > div export default 5. To read the param provided in the URL using , replace with: Reach Router ProductDetails.js React ; {products} ; ProductDetails = { product = products[productId]; ( <h2>Product Details</h2> <div> <h3>{ product.name }</h3> <h4>{ product.price }</h4> <p>{ product.description }</p> </div> ) }; ProductDetails; import from 'react' import from './products' const ( ) => { name, productId } const return < = > div className "product-deatils" </ > div export default What did we do? This section was about registering the routes. As an Angular developer, I have to be honest; moving from a configuration object to the was weird. I had to stop trying to find a way to generate routes based on an object configuration (I tended to use collections to produce the required JSX). Trust me, after a couple of days working with React you will find JSX is your best friend, and you will start using functions for everything. composing pattern You won’t have to remember the keys name of the configuration object but the prop name given to the component. Why Angular uses a subscription to inform about router changes and React doesn’t. The Angular architecture includes a service layer in parallel to the Component system; therefore, a subscription is required to inform about changes. In React, we don’t need a subscription because using the composition pattern all the events will happen sequentially, including the rending of the new page. At this point the app should be able to: Navigate to the product details page. Display the information of each product based on the product index present in the URL. The currency pipe The last section we have to cover is the use of the . In React, there isn’t something like a Pipe but Functions. Do you remember? Currency Pipe In React, everything is a function. In Angular terms, a pipe represents a that allows us to edit variables directly in the template. You could create a folder to store all the functions that will interact with your JSX. Although, in most of the projects I’ve been working on, this kind of folder its called . Over there, you will find all those functions that can be reusable in the app, including those that interact with the template. function /pipe /utils To create the currency function: Go to the ProductDetails.js Add the currency function: currency = { number.toLocaleString( , { : , : , : } ); } const => number return "en" style "currency" currency "USD" minimumFractionDigits 2 3. Use the function to format the price <h4>{ currency(product.price) }< /h4> What did we do? We created a JavaScript function using the method available in the number instance. This method allows us to create a new string with currency style. As you see, creating Pipes is not related to React, but JavaScript. toLocaleString Learning how to code with React has made me a better JavaScript developer. When you start working with React, you will have to use many of the core JavaScript functionalities. Plus, you will discover more elegant and efficient ways to write code. An excellent example of this is: when I was working with Angular, I didn’t know about the method, I just used the convenient set of functions available with the framework. toLocaleString Show me the code In the following links you will find the final code: . Angular . React + React Router Dom . React + React Router What’s next? In the following post, we will cover how we could manage the data following the React style. I hope you find this useful to understand the concepts behind React as an Angular developer. Thanks for reading, please support me by sharing this article or following me on and or . Medium Twitter LinkedIn Thanks to @camiloandresAC
