<h2 id="introduction">Introduction</h2>
When developing large React applications, we typically use many images and videos, install third-party packages/libraries, make API calls, and do a variety of other things. That naturally increases the time it takes to load our application and results in a massive bundle size, which contributes to a poor user experience. That's where lazy loading comes into place. It enables us to load the content just in time, right before it will be displayed in the application.
We can avoid pre-loading content while it's still out of view, and focus all of the resources on the content that is in the view.
<blockquote>
In this guide, we'll look at how to use <code>React.lazy()</code> and <code>React.Suspense</code> to implement lazy loading and code splitting functionality that allows us to handle code splitting without the need to install any additional libraries.
</blockquote>
<h2 id="whatislazyloading">What is Lazy Loading?</h2>
When we launch a React web application, it usually bundles the entire application at once, loading everything including the entire web app pages, images, content, and much more for us, potentially resulting in a slow load time and overall poor performance, depending on the size of the content and the Internet bandwidth at the time.
Lazy loading allows us to load specific components only when they are needed. Typically, we also perform code splitting into logical components that can be lazy loaded with the content as well.
For example, if we have a dashboard page that displays a lot of information from various sources when clicked, it's always best to keep these components and pages lazy-loaded, so they only load when needed or required by the user.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The process of splitting a large bundle of code into multiple bundles that can be loaded dynamically with the overall goal of avoiding performance issues associated with over-sized bundles is known as <a rel="noreferrer noopener nofollow" target="_blank" href="https://reactjs.org/docs/code-splitting.html">code-splitting</a>. This is accomplished without reducing the amount of code in our app.

 </div>
 </div>
 </div>
 In summary, lazy loading allows us to render components or elements on demand, making our app more efficient and providing a better user experience.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Single Page Applications (SPAs) are designed to contain all pages and content within a single document/page. That's why lazy loading comes in especially handy when developing SPAs.

 </div>
 </div>
 </div>
 <h2 id="howtoimplementlazyloadinginreact">How to Implement Lazy Loading in React</h2>
So far, we've seen what lazy loading is and why it's important to implement. Now, let's look at how we can implement it in our React applications, using two React features that make code-splitting and lazy loading easy to implement - <a rel="noreferrer noopener nofollow" target="_blank" href="https://reactjs.org/docs/code-splitting.html#reactlazy">React.lazy()</a> and <a rel="noreferrer noopener nofollow" target="_blank" href="https://reactjs.org/docs/react-api.html#reactsuspense">React.Suspense</a>.
<code>React.lazy()</code> is a function that allows us to render dynamic imports in the same way as regular components. Using dynamic imports alongside the <code>React.lazy()</code> will enable us to import a component just before it renders on a screen. An important thing to note is that <code>React.lazy()</code> accepts a function as an argument - that function must call the dynamic <code>import()</code> in its body.
<code>React.Suspense</code> enables us to specify the fallback prop which takes in a placeholder content that would be used as a loading indicator while all the lazy components get loaded.
<blockquote>
Let's get started by looking at how we can implement lazy loading in our imported components, and then how we can implement it in our routes so that pages are not loaded until we navigate to them.
</blockquote>
<h3 id="gettingstarted">Getting Started</h3>
Suppose we have our React application, and we imported the <code>About</code> component into the <code>Home</code>:
<pre><code class="hljs">import AboutUs from &#x27;./About&#x27;;

const Home = () =&gt; {
 return (
 &lt;div className=&quot;App&quot;&gt;
 &lt;h1&gt;Home Page&lt;/h1&gt;
 &lt;AboutUs /&gt;
 &lt;/div&gt;
 );
};

export default Home;
</code></pre>
We can now implement lazy loading by making use of <code>React.lazy()</code>:
<pre><code class="hljs">import React from &#x27;react&#x27;;

// Lazy loading 
const AboutUs = React.lazy(() =&gt; import(&#x27;./About&#x27;));

const Home = () =&gt; {
 return (
 &lt;div className=&quot;App&quot;&gt;
 &lt;h1&gt;Home Page&lt;/h1&gt;
 &lt;AboutUs /&gt;
 &lt;/div&gt;
 );
};
export default Home;
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: <code>React.lazy()</code> used this way returns a <code>Promise</code> object. That promise resolves to a module that contains a React component we want to lazy load in its <code>default</code> export.

 </div>
 </div>
 </div>
 We've implemented lazy loading using <code>React.lazy()</code>, but the code above will always throw an error saying that our <code>“React component suspended while rendering, but no fallback UI was specified”</code>. This can be fixed by wrapping the component with <code>React.Suspense</code>'s <code>fallbackz</code> and attaching the fallback props as we explained earlier:
<pre><code class="hljs">import React from &#x27;react&#x27;;
const AboutUs = React.lazy(() =&gt; import(&#x27;./About&#x27;));

const Home = () =&gt; {
 return (
 &lt;div className=&quot;App&quot;&gt;
 &lt;h1&gt;Home Page&lt;/h1&gt;
 &lt;React.Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
 &lt;AboutUs /&gt;
 &lt;/React.Suspense&gt;
 &lt;/div&gt;
 );
};
export default Home;
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The fallback prop can take a component to show before the original content loads up.

 </div>
 </div>
 </div>
 Additionally, we can decide to destructure the React import to make the code cleaner and more readable:
<pre><code class="hljs">import { lazy, Suspense } from &#x27;react&#x27;;
const AboutUs = lazy(() =&gt; import(&#x27;./About&#x27;));

const Home = () =&gt; {
 return (
 &lt;div className=&quot;App&quot;&gt;
 &lt;h1&gt;Home Page&lt;/h1&gt;
 &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
 &lt;AboutUs /&gt;
 &lt;/Suspense&gt;
 &lt;/div&gt;
 );
};
export default Home;
</code></pre>
<blockquote>
So far, we've seen how to implement lazy loading in our imported components. Now, let's see how to implement it in our routes while routing with React Router.
</blockquote>
<h3 id="howtoimplementlazyloadingwithreactrouter">How to Implement Lazy Loading With React Router</h3>
Lazy routing is actually a good practice for routes that have a lot of content and may slow down your application's load time. Implementing lazy loading for React routes is almost identical to what we did earlier when lazy loading dynamically imported components.
Lazy loading React routes refers to dynamically importing a component only when it's needed. For example, say we have two routes in our application and two components representing those routes. If we implement mentioned routing in the following way, each component will be loaded only when we navigate to the corresponding route:
<pre><code class="hljs">import { lazy, Suspense } from &#x27;react&#x27;;
import { BrowserRouter, Routes, Route } from &#x27;react-router-dom&#x27;;

const Home = lazy(() =&gt; import(&#x27;./Home&#x27;));
const Products = lazy(() =&gt; import(&#x27;./Products&#x27;));

function App() {
 return (
 &lt;BrowserRouter&gt;
 &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
 &lt;Routes&gt;
 &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
 &lt;Route path=&quot;/products&quot; element={&lt;Products /&gt;} /&gt;
 &lt;/Routes&gt;
 &lt;/Suspense&gt;
 &lt;/BrowserRouter&gt;
 );
}
export default App;
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this guide, we learned what lazy loading and code splitting are, how to implement them, and that the best place to implement lazy loading is with routes. This avoids rendering the entire page at once, which may result in a slower load time when dealing with pages with large amounts of content.

Dimitrije Stamenic

Joel Olawanle

In this short tutorial, we'll take a look at how to import lazy loading in React. You'll learn what code splitting is, how to lazy load React components, and how to lazy load React routes.

Guide to Lazy Loading With React

<h2 id="introduction">Introduction</h2>
When developing websites and web applications, including a loading animation can improve the user experience significantly by communicating what's going on. This engages users and keeps their attention while loading the content, and it helps users understand what is going on rather than leaving them guessing.
<blockquote>
In this guide, we'll look at how to use Vanilla JavaScript to create a loading animation. We will work with both animated GIFs and CSS-created loaders and see how to use them in two scenarios: loading content at app/website launch or requesting content from an external API.
</blockquote>
<img src="https://s3.stackabuse.com/media/articles/loading-animation-in-vanilla-javascript.gif" alt="css and gif loading spinner animation in vanilla javascript">
<h2 id="howtocreatealoader">How to Create a Loader</h2>
There are various ways people may want to display their loader. For the purpose of this guide, we'll build a loader that will cover the entire screen and then disappear when the page is finished loading. First of all, we need to create a placeholder HTML page:
<pre><code class="hljs">&lt;div class=&quot;loader-container&quot;&gt;
 &lt;div class=&quot;spinner&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;main-content&quot;&gt;
 &lt;h1&gt;Hello World!&lt;/h1&gt;
 &lt;p&gt;
 This is a demo Project to show how to add animated loading with Vanilla
 JavaScript.
 &lt;/p&gt;
 &lt;div class=&quot;buttons&quot;&gt;
 &lt;button class=&quot;btn&quot;&gt;&lt;a href=&quot;#&quot;&gt;Read Article&lt;/a&gt;&lt;/button&gt;
 &lt;button class=&quot;btn get-quote&quot;&gt;Generate Quote&lt;/button&gt;
 &lt;/div&gt;
 &lt;div class=&quot;quote-section&quot;&gt;
 &lt;blockquote class=&quot;quote&quot;&gt;
 If you do not express your own original ideas, if you do not listen to
 your own being, you will have betrayed yourself.
 &lt;/blockquote&gt;
 &lt;span class=&quot;author&quot;&gt;- Rollo May&lt;/span&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>
For the sake of simplicity, we have only two <code>&lt;div&gt;</code> blocks - one for the loader and one for the website's content.
As previously stated, the loading icon can be a GIF, an animated icon created with CSS, or something else. The important thing to remember is that the same approach applies to any type of loading icon we use.
<h3 id="createloaderusingagif">Create Loader Using a GIF</h3>
A GIF is an animated icon that plays indefinitely. Once <a rel="nofollow noopener noreferrer" target="_blank" href="https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif">we've created our GIF</a>, we'll style the <code>loader-container</code> div that will house it. There are numerous ways to style it! You can get really creative here. We'll simply add a layer with a black background on top of our page alongside the icon, to &quot;block out&quot; the loading content:
<pre><code class="hljs">.loader-container {
 width: 100%;
 height: 100vh;
 position: fixed;
 background: #000
 url(&quot;https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif&quot;) center
 no-repeat;
 z-index: 1;
}
</code></pre>
When we load our web page now, we will see a black background with a GIF loading in the middle of the screen, similar to this:
<img src="https://s3.stackabuse.com/media/articles/loading-animation-in-vanilla-javascript-1.png" alt="">
At this point, we're ready to implement loading using JavaScript. But let's also see how we can use CSS-created animation instead of a GIF, which does not require an additional file to import.
<h3 id="createloaderusingcss">Create Loader Using CSS</h3>
We'll create exactly the same icon with CSS. Remember, we created an extra div (<code>spinner</code>) inside the <code>loader-container</code> div and that is what we'll be using to represent the icon:
<pre><code class="hljs">.spinner {
 width: 64px;
 height: 64px;
 border: 8px solid;
 border-color: #3d5af1 transparent #3d5af1 transparent;
 border-radius: 50%;
 animation: spin-anim 1.2s linear infinite;
}

@keyframes spin-anim {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(360deg);
 }
}
</code></pre>
The code above will help us create a CSS loader-icon of which we can now use the loader-container div to center and add the black background as we did previously:
<pre><code class="hljs">.loader-container {
 width: 100%;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 background: #000;
 z-index: 1;
}
</code></pre>
<blockquote>
Now that we've seen the two types of animated loaders available, let's use JavaScript to control when this loading animation appears and disappears.
</blockquote>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: You can check out this live <a rel="nofollow noopener noreferrer" target="_blank" href="https://codepen.io/olawanlejoel/pen/wvyzzYm">CodePen demo</a> to take a look at the loader we've created in action.

 </div>
 </div>
 </div>
 <h2 id="howtoimplementaloadinganimationwithjavascript">How to Implement a Loading Animation With JavaScript</h2>
JavaScript allows us to manipulate our HTML structure and remove or hide the <code>loader-container</code> that is currently displayed in front of the website's content. There are two major approaches for accomplishing this - just hiding the <code>loader-container</code>, or removing it altogether.
Whichever approach you choose, the first step is to use the <code>querySelector()</code> or <code>getElementById()</code> to retrieve the <code>loader-container</code> so that we can manipulate it:
<pre><code class="hljs">const loaderContainer = document.querySelector(&#x27;.loader-container&#x27;);
</code></pre>
Secondly, we will be using the <code>eventListener</code> to listen for a <code>load</code> event, so that it calls the callback function when the <code>load</code> event occurs:
<pre><code class="hljs">window.addEventListener(&#x27;load&#x27;, () =&gt; {
 // ...
});
</code></pre>
<h3 id="hidingtheloadingelement">Hiding the Loading... Element</h3>
The most common approach is to hide the <code>loader-container</code> with <code>display: none</code> so that it disappears when the content is fully loaded.
HTML DOM allows us to change the style of our HTML elements from JavaScript, and the code below indicates that we are setting the loader’s container <code>display</code> property to <code>none</code> so that it does not appear once the <code>load</code> is successful:
<pre><code class="hljs">window.addEventListener(&#x27;load&#x27;, () =&gt; {
 loaderContainer.style.display = &#x27;none&#x27;;
});
</code></pre>
Alternatively, you can create a separate class which holds <code>display: none</code> property:
<pre><code class="hljs">.loader-container-hidden {
 display: none;
}
</code></pre>
And then use <code>classList.add()</code> to add the class to the <code>loader-container</code> element:
<pre><code class="hljs">window.addEventListener(&#x27;load&#x27;, () =&gt; {
 loaderContainer.classList.add(&#x27;loader-container-hidden&#x27;);
});
</code></pre>
<h3 id="removingtheloadingelement">Removing the Loading... Element</h3>
So far, we've seen a major method that allows us to hide our <code>loader-container</code>, implying that the element is still present, but hidden. Another option is to remove the element entirely:
<pre><code class="hljs">window.addEventListener(&#x27;load&#x27;, () =&gt; {
 loaderContainer.parentElement.removeChild(loaderContainer);
});
</code></pre>
<blockquote>
At this point, when we load our page, the loading animation will be displayed until the page's content is fully loaded.
</blockquote>
<h2 id="implementingloadinganimationwhenrequestingexternalcontentfromanapi">Implementing Loading Animation When Requesting External Content From an API</h2>
Fetching content from an external API is another situation that may need the inclusion of a loader. This type of content can take some time to fetch and display, so it is best to include a loader.
In our case, let's try to get a quote from a quotes API using the built-in Fetch API. Notice that the HTML we've created at the beginning of this article has a &quot;Generate Quote&quot; button. All we have to do is use the <code>document.querxySelector()</code> method to get the element and create a callback function to handle a <code>click</code> event that is triggered when the user clicks the button:
<pre><code class="hljs">const getQuoteBtn = document.querySelector(&#x27;.get-quote&#x27;);

getQuoteBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
 fetch(&#x27;https://api.quotable.io/random&#x27;)
 .then((response) =&gt; {
 return response.json();
 })
 .then((data) =&gt; {
 const quote = document.querySelector(&#x27;.quote&#x27;);
 const author = document.querySelector(&#x27;.author&#x27;);
 quote.innerHTML = data.content;
 author.innerHTML = data.author;
 });
});
</code></pre>
This will successfully assist us in getting random quotes into our application, but we would like to have a loading animation so that the user knows we are expecting content. To accomplish this, we'll create two methods, one to display the <code>loader-container</code> and the other to hide it:
<pre><code class="hljs">const displayLoading = () =&gt; {
 loaderContainer.style.display = &#x27;block&#x27;;
};

const hideLoading = () =&gt; {
 loaderContainer.style.display = &#x27;none&#x27;;
};
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: We are using <code>display: none</code>, but we can use either of the other methods we listed earlier.

 </div>
 </div>
 </div>
 At this point, we can finally incorporate the loading animation into the callback function. When the fetching begins the callback function will display the loading animation and hide it once the data is received:
<pre><code class="hljs">getQuoteBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
 displayLoading();
 fetch(&#x27;https://api.quotable.io/random&#x27;)
 .then((response) =&gt; {
 return response.json();
 })
 .then((data) =&gt; {
 hideLoading();
 const quote = document.querySelector(&#x27;.quote&#x27;);
 const author = document.querySelector(&#x27;.author&#x27;);
 quote.innerHTML = data.content;
 author.innerHTML = data.author;
 });
});
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we've learned how to use vanilla JavaScript to create a loading animation and display it appropriately. We considered various approaches for accomplishing this and took a look at a couple of different use-cases for the loading animation. We've opted to use the rotating circle as a loader, but you can change it in any way you might like - feel free to create your own GIF or CSS animated loader.

In this guide, learn how to create a loading icon spinner with a GIF and custom animated CSS in vanilla JavaScript, when loading content on a web page or waiting for API responses.

Loading... Animation in Vanilla JavaScript

<h2 id="introduction">Introduction</h2>
Axios is an HTTP client library that is used to send asynchronous HTTP requests such as <code>POST</code>, <code>GET</code>, and <code>DELETE</code> to REST endpoints (mainly APIs). Some of these requests, such as <code>GET</code> and <code>POST</code>, can include headers, which provide an additional source of information for each API call.
<blockquote>
In this article, we will learn how to send headers alongside our POST request in Axios.
</blockquote>
Headers are critical when making API requests and are one of the first places we look when we encounter problems with an API because they help us track down any potential issues.
<h2 id="postrequeststructureinaxios">POST Request Structure in Axios</h2>
An Axios POST request can accept three parameters: the endpoint's URL, data, and the configuration object, which accepts headers:
<pre><code class="hljs">const res = await axios.post(URL, data, config);
</code></pre>
<h2 id="sendingheaderswithaxiospostrequest">Sending Headers with Axios POST Request</h2>
When passing headers into Axios, we supply an object containing the headers we want to pass as the <code>config</code> parameter. For example, assume we want to send a POST request to a server that accepts only <code>text/json</code> content type (instead of the usual <code>application/json</code>). In that case, we can customize the content type we want to send in the header:
<pre><code class="hljs">const result = await axios.post(&#x27;https://testapi.org/post&#x27;, { name: &#x27;John Doe&#x27; }, {
 headers: {
 &#x27;content-type&#x27;: &#x27;text/json&#x27;
 }
});
</code></pre>
Alternatively, we can use variables instead of passing these objects directly into the <code>axios.post()</code> method. This definitely improves readability of our code:
<pre><code class="hljs">const headers = {
 &quot;Content-Type&quot;: &quot;text/json&quot;
};

const data = {
 name: &quot;John Doe&quot;
};

const result = await axios.post(&quot;https://testapi.org/post&quot;, data, {
 headers: headers
});
</code></pre>
Let's just quickly confirm this works as expected:
<pre><code class="hljs">console.log(result.data.headers[&#x27;Content-Type&#x27;]);
// Prints: text/json
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we learned how to send headers with POST requests in Axios, as well as the structure of an Axios request, so that we do not mistake the <code>config</code> object for the <code>data</code> object, as many people do.

In this short tutorial, we'll take a look at how to customize the header of the Axios POST request we want to send to some kind of REST API.

How to Send Headers With an Axios POST Request

David Landup

Cássia Sampaio

In this detailed guide - learn the theory and practice behind linear (univariate) and multiple linear (multivariate) regression in Python with Scikit-Learn!

Linear Regression in Python with Scikit-Learn

<h2 id="introduction">Introduction</h2>
Axios is a promise-based HTTP client library that makes it simple to send asynchronous HTTP requests (such as <code>POST</code>, <code>GET</code>, and <code>DELETE</code>) to REST endpoints, mainly APIs.
<blockquote>
In this article, we will learn how to send POST JSON requests with Axios, and how to handle both previously serialized and unserialized data.
</blockquote>
<h2 id="howtosendpostjsonrequestsusingaxios">How to Send POST JSON Requests Using Axios</h2>
The POST request is used to send data to an endpoint. For example, if we have a registration page where users submit their information, this information can be sent as JSON to the endpoint we specify using a POST JSON request.
We use the <code>axios.post()</code> method to send a POST request with Axios, which takes two major parameters - the URL of the endpoint (<code>url</code>), and the object representing data we want to post (<code>data</code>):
<pre><code class="hljs">axios.post(url[, data[, config]])
</code></pre>
Besides those two parameters, there is also a third one - <code>config</code>. It is used to configure the POST request we are sending, mainly to set headers.
<h3 id="sendingunserializeddata">Sending Unserialized Data</h3>
It is important to note that Axios uses JSON for data posting by default, meaning that any object we pass into Axios automatically serializes the object to JSON and sets the <code>Content-Type</code> header to <code>application/json</code>. Let's illustrate that in the example - assume we are posting the object <code>{ name: 'John Doe' }</code>:
<pre><code class="hljs">const result = await axios.post(&#x27;https://testapi.org/post&#x27;, { name: &#x27;John Doe&#x27; });
</code></pre>
Axios will automatically serialize the object into JSON format:
<pre><code class="hljs">console.log(result.data.data); // &#x27;{&quot;name&quot;:&quot;John Doe&quot;}&#x27;
</code></pre>
And as we said, it will also set our <code>Content-Type</code> header to <code>application/json</code>:
<pre><code class="hljs">console.log(result.data.headers[&#x27;Content-Type&#x27;]); // &#x27;application/json;charset=utf-8&#x27;
</code></pre>
<h3 id="sendingserializedjsonstring">Sending Serialized JSON String</h3>
So far, we've seen that Axios will automatically serialize whatever data we send it, but in this case, we'll send a serialized JSON string as the second parameter of the <code>axios.post()</code> method:
<pre><code class="hljs">const usersName = JSON.stringify({ name: &#x27;John Doe&#x27; });
</code></pre>
Axios will simply treat this data as a form-encoded request body rather than setting the content-type header to <code>application/json</code>, as shown below:
<pre><code class="hljs">const usersName = JSON.stringify({ name: &#x27;John Doe&#x27; });
const result = await axios.post(&#x27;https://testapi.org/post&#x27;, usersName);

console.log(result.data.headers[&#x27;Content-Type&#x27;]); // &#x27;application/x-www-form-urlencoded&#x27;,
</code></pre>
To resolve this issue, we need to explicitly set the <code>Content-Type</code> header to <code>application/json</code>. We can do that by passing the <code>config</code> argument when calling the <code>axios.post()</code> method:
<pre><code class="hljs">const usersName = JSON.stringify({ name: &#x27;John Doe&#x27; });
customConfig = {
 headers: {
 &#x27;Content-Type&#x27;: &#x27;application/json&#x27;
 }
};
const result = await axios.post(&#x27;https://testapi.org/post&#x27;, usersName, customConfig);

console.log(result.data.data); // &#x27;{&quot;name&quot;:&quot;John Doe&quot;}&#x27;
console.log(result.data.headers[&#x27;Content-Type&#x27;]); // &#x27;application/json&#x27;,
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we learned how to send POST JSON requests with Axios, fully aware that these data could be serialized or non-serialized, and we dealt with both scenarios.

In this tutorial, we'll take a look at how to send a JSON POST request to a REST API using Axios. We'll learn how to send both JavaScript objects and serialized JSON objects.

Sending POST JSON Requests With Axios

<h2 id="introduction">Introduction</h2>
When creating React applications that fetch content from external sources that take some time to load, it is always a good idea to provide a pleasant user experience by engaging users and keeping their attention with a loader, as this helps users understand what is going on rather than leaving them to speculate.
<blockquote>
In this guide, we will learn how to display loader animation when loading an application and retrieving content from external sources, by utilizing the <code>react-spinners</code> library.
</blockquote>
To that end - we'll build a small application that fetches quotes, with a loading screen while a quote is being fetched:
<img src="https://s3.stackabuse.com/media/articles/how-to-create-a-loading-animation-in-react-from-scratch-2.gif" alt="react-loading-animation-example">
<blockquote>
If you'd like to learn more about creating spinners from scratch, read our <a target="_blank" href="https://stackabuse.com/how-to-create-a-loading-animation-in-react-from-scratch/">&quot;How to Create a Loading Animation in React from Scratch&quot;</a>!
</blockquote>
<h2 id="creatingasamplereactapp">Creating a Sample React App</h2>
Let's begin by looking at our React markup. Basically, we have two <code>&lt;div&gt;</code> elements in the parent <code>&lt;div&gt;</code> (for the sake of simplicity) - one is the <code>loader-container</code> and the second is the <code>main-content</code>:
<pre><code class="hljs">import React from &#x27;react&#x27;;

const App = () =&gt; {
 return (
 &lt;div className=&quot;container&quot;&gt;
 &lt;div className=&quot;loader-container&quot;&gt;
 &lt;div className=&quot;spinner&quot;&gt;&lt;/div&gt;
 &lt;/div&gt;

 &lt;div className=&quot;main-content&quot;&gt;
 &lt;h1&gt;Hello World!&lt;/h1&gt;
 &lt;p&gt;
 This is a demo Project to show how to add animated loading with React.
 &lt;/p&gt;
 &lt;div className=&quot;buttons&quot;&gt;
 &lt;button className=&quot;btn&quot;&gt;
 &lt;a href=&quot;#&quot;&gt;Read Article&lt;/a&gt;
 &lt;/button&gt;
 &lt;button className=&quot;btn get-quote&quot;&gt;
 Generate Quote
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;div className=&quot;quote-section&quot;&gt;
 &lt;blockquote className=&quot;quote&quot;&gt;
 If you do not express your own original ideas, if you do not listen
 to your own being, you will have betrayed yourself.
 &lt;/blockquote&gt;
 - &lt;span className=&quot;author&quot;&gt;Rollo May&lt;/span&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
};

export default App;
</code></pre>
So far, we've only created a <code>&lt;div&gt;</code> for our loader. Now, let's see how we can add it and trigger it when some content loads.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: You can check out <a rel="nofollow noopener noreferrer" target="_blank" href="https://github.com/olawanlejoel/loader-anim">this repository</a> and cross-check the code if need be while reading this guide.

 </div>
 </div>
 </div>
 <h2 id="usingreactspinnersinourapplication">Using React Spinners in Our Application</h2>
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.npmjs.com/package/react-spinners"><code>react-spinner</code></a> is a collection of many spinners that we can use in our React applications. To use React spinner, we must first install the library in our project's directory by running any of the following command:
<pre><code class="hljs">$ npm install --save react-spinners
// Or
$ yarn add react-spinners
</code></pre>
Once that is done, we can now import the particular loader we want to use (in this case, a <code>ClipLoader</code>) and set some styling like size and color:
<pre><code class="hljs">import React, { useState, useEffect } from &#x27;react&#x27;;
import ClipLoader from &#x27;react-spinners/ClipLoader&#x27;;

const App = () =&gt; {
 const [loadingInProgress, setLoading] = useState(false);
 
 &lt;!-- ... --&gt;
 
 return (
 &lt;div className=&quot;container&quot;&gt;
 {loadingInProgress ? (
 &lt;div className=&quot;loader-container&quot;&gt;
 &lt;ClipLoader color={&#x27;#fff&#x27;} size={150} /&gt;
 &lt;/div&gt;
 ) : (
 &lt;div className=&quot;main-content&quot;&gt;
 &lt;h1&gt;Hello World!&lt;/h1&gt;
 &lt;p&gt;
 This is a demo Project to show how to add animated loading with
 React.
 &lt;/p&gt;
 &lt;div className=&quot;buttons&quot;&gt;
 &lt;button className=&quot;btn&quot;&gt;
 &lt;a href=&quot;#&quot;&gt;Read Article&lt;/a&gt;
 &lt;/button&gt;
 &lt;button className=&quot;btn get-quote&quot; onClick={getRandomQuote}&gt;
 Generate Quote
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;div className=&quot;quote-section&quot;&gt;
 &lt;blockquote className=&quot;quote&quot;&gt;{quote.content}&lt;/blockquote&gt;-{&#x27; &#x27;}
 &lt;span className=&quot;author&quot;&gt;{quote.author}&lt;/span&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 )}
 &lt;/div&gt;
 );
};

export default App;
</code></pre>
The <code>react-spinner</code> library has a lot of useful features, for example, we can use it to handle loading without using ternary operators:
<pre><code class="hljs">&lt;ClipLoader color={&#x27;#fff&#x27;} loading={loadingInProgress} size={150} /&gt;
</code></pre>
Instead of using ternary operator to display the content based on the value of the <code>loadingInProgress</code> variable, we've simply used <code>loading={loadingInProgress}</code> instead.
We can also alter the CSS used to control the <code>spinner-icon</code> by using an <code>override</code> attribute:
<pre><code class="hljs">import { useState } from &quot;react&quot;;
import { css } from &quot;@emotion/react&quot;;
import ClipLoader from &quot;react-spinners/ClipLoader&quot;;

const override = css`
 display: block;
 margin: 0 auto;
 border-color: red;
`;

function App() {
 let [loadingInProgress, setLoading] = useState(true);

 return (
 &lt;div className=&quot;container&quot;&gt;
 &lt;ClipLoader color={&#x27;#fff&#x27;} loading={loadingInProgress} css={override} size={150} /&gt;

 // ...
 &lt;/div&gt;
 );
}

export default App;
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: We can read more about <code>react-spinner</code> in the <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.npmjs.com/package/react-spinners">documentation</a>, where we can see a list of available sinners as well.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
In this short guide, we've taken a look at how you can use <code>react-spinners</code> to add a loading spinner to an element in React.

In this short guide, learn how to create a loading spinner animation in JavaScript's React library, using `react-spinners`!

How to Create a Loading Animation in React with react-spinners

In this tutorial, we'll take a look at how to create a spinning loader in JavaSctript's React library. We'll learn how to create a loader using GIF images and CSS animation from scratch with practical code samples.

How to Create a Loading Animation in React from Scratch

<h2 id="introduction">Introduction</h2>
When developing web applications with Vue.js that have many pages and incorporate many features such as logging in, authentication, carting, as well as a good deal of CRUD applications, we will need to implement routing at some point, which involves redirecting a user from one page to another either programmatically or when they access a route via the URL.
<blockquote>
In this article, we will learn the various means of redirecting and routing in Vue.js with practical code samples.
</blockquote>
<h3 id="prerequisite">Prerequisite</h3>
Routing in Vue.js is accomplished through the use of the <code>vue-router</code> package, which enables us to easily perform single page routing within our Vue application. To implement router redirects in Vue, we must first install this package in our project, which we can do by running the following command in our terminal:
<pre><code class="hljs">$ npm install vue-router@4
</code></pre>
<h2 id="redirectwithvue">Redirect with Vue</h2>
All routes in Vue.js are configured in the router's configuration file, which is a dedicated file for all types of routing in Vue. This file is usually found under <code>/src/router/index.js</code>.
To use a route, we have to declare it in the router configuration file, after which we can reference it in other parts of the application. Routing can be done in a variety of ways, and different scenarios may necessitate different redirects, but let's start with the most basic type of redirect before moving on to others such as programmatic, conditional, and error redirects.
When a user navigates to the <code>/home</code> route, say it should always redirect them to the <code>/</code> route, thereby showing the <code>HomePage</code>. This can be done via redirects:
<pre><code class="hljs">const routes = [
 {
 path: &#x27;/&#x27;,
 name: &#x27;Home&#x27;,
 component: HomePage,
 },
 {
 path: &#x27;/home&#x27;,
 redirect: &#x27;/&#x27;,
 }
];
</code></pre>
The main emphasis is on the second object which takes in the <code>path</code> and <code>redirect</code> options, when a user navigates to the set <code>path</code> it automatically redirects them to the path set in the <code>redirect</code> option.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: We will notice that the redirect actually replaces the link, meaning when we navigate to <code>/home</code> the URL switches to <code>/</code> thereby showing the component set for the <code>/</code> route.

 </div>
 </div>
 </div>
 In a situation where we don’t want the URL to change, but we want it to show the component set for the <code>/</code> route, then we can make use of an Alias.
<h3 id="alias">Alias</h3>
An <code>alias</code> is an option we can add an alias for an existing route. In effect, we can have multiple routes that work with a particular component, rather than redirecting to a single route that handles it.
For example, when we set an alias to <code>/home</code> and the actual path is set to <code>/</code> with a component of <code>HomePage</code>, when a user navigates to <code>/home</code> the <code>HomePage</code> component will appear, but the URL remains <code>/home</code>:
<pre><code class="hljs">{
 path: &#x27;/&#x27;,
 name: &#x27;Home&#x27;,
 component: HomePage,
 alias: &#x27;/home&#x27;,
},
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: An <code>alias</code> can take an array of more than one path and these paths can include parameters.

 </div>
 </div>
 </div>
 <pre><code class="hljs">{
 path: &#x27;/&#x27;,
 name: &#x27;Home&#x27;,
 component: HomePage,
 alias: [&#x27;/home&#x27;, &#x27;/homepage&#x27;],
},
</code></pre>
Now - <code>/</code>, <code>/home</code> and <code>/homepage</code> all actually handle the same <code>HomePage</code> component!
<h2 id="redirectprogrammatically">Redirect Programmatically</h2>
We can also perform programmatic redirects, such as when a button is clicked or an action is performed. This is handled the router's <code>push()</code> method, which can be used anywhere in our application. When the button is clicked in the example below, it takes the user to the specified path:
<pre><code class="hljs">&lt;template&gt;
 &lt;h2&gt;Home Page&lt;/h2&gt;
 &lt;button @click=&quot;$router.push(&#x27;/about&#x27;)&quot;&gt;Redirect Me&lt;/button&gt;
&lt;/template&gt;
</code></pre>
This can also be handled within our script tag using the <code>this</code> keyword:
<pre><code class="hljs">&lt;template&gt;
 &lt;h2&gt;Home Page&lt;/h2&gt;
 &lt;button @click=&quot;redirectMe()&quot;&gt;Redirect Me&lt;/button&gt;
&lt;/template&gt;

&lt;script&gt;
 export default {
 methods: {
 redirectMe() {
 this.$router.push(&#x27;/about&#x27;);
 },
 },
 };
&lt;/script&gt;
</code></pre>
It’s important to note that the argument could be a string path as we used earlier or a location descriptor object which could accept name, path, etc.:
<pre><code class="hljs">// String path
$router.push(&#x27;/about&#x27;)

// Descriptor object with path
$router.push({ path: &#x27;/about&#x27; })

// Named route 
$router.push({ name: &#x27;About&#x27; })
</code></pre>
<h3 id="replacingthecurrenturl">Replacing The Current URL</h3>
As we navigate using programmatic methods, we're pushing and adding to our browser's history just as the user would through manual clicking. If we want to push without creating a new history entry - we'll want to replace the entry:
<pre><code class="hljs">router.push({ path: &#x27;/about&#x27;, replace: true })
// This is equivalent to
router.replace({ path: &#x27;/about&#x27; })
</code></pre>
<h2 id="conditionalredirect">Conditional Redirect</h2>
We may want to redirect users when a specific command is completed, such as when we want to authenticate a user, confirm a product purchase, and so on. This is typically accomplished through the use of conditional statements, such as:
<pre><code class="hljs">&lt;template&gt;
 &lt;h2&gt;Home Page&lt;/h2&gt;
 &lt;button @click=&quot;checkUser()&quot;&gt;Authenticate Me&lt;/button&gt;
&lt;/template&gt;

&lt;script&gt;
 export default {
 data(){
 return{
 isLoggedIn: true,
 }
 },
 methods: {
 checkUser() {
 if(this.isLoggedIn){
 this.$router.push(&#x27;/dashboard&#x27;);
 }else{
 this.$router.push(&#x27;/login&#x27;);
 }
 },
 },
 };
&lt;/script&gt;
</code></pre>
We can also perform this without having to create a method:
<pre><code class="hljs">&lt;template&gt;
 &lt;h2&gt;Home Page&lt;/h2&gt;
 &lt;button @click=&quot;{ isLoggedIn ? $router.push(&#x27;/dashboard&#x27;) : $router.push(&#x27;/login&#x27;); }&quot;&gt;
 Authenticate Me
 &lt;/button&gt;
&lt;/template&gt;

&lt;script&gt;
 export default {
 data() {
 return {
 isLoggedIn: true,
 };
 },
 };
&lt;/script&gt;
</code></pre>
<h2 id="redirecttoa404page">Redirect to a 404 Page</h2>
Finally, it would be beneficial to include how to handle errors when a user navigates to the incorrect route. When a user navigates to a route that is not declared in our router's configuration file, it displays an empty component, which is typically not the desired behavior.
This is easily handled in by catching all routes except those configured with a regular expression and assigning them to an error component:
<pre><code class="hljs">{
 path: &#x27;/:catchAll(.*)&#x27;,
 name: &#x27;ErrorPage&#x27;,
 component: ErrorPage
}
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we learned how to redirect in Vue and how to handle redirects in various ways.

In this guide, learn how to redirect a user in Vue programmatically, conditionally, on a button press, automatically, and how to keep multiple URLs pointing to the same component via aliases.

Guide to Vue Router Redirects

<h2 id="introduction">Introduction</h2>
Vue is a JavaScript framework that allows developers to create components that are used to divide the user interface into smaller pieces, rather than building the entire UI in a single file. When using components, we may want to pass data down from the parent component to the child component at some point, this is usually done with properties, also known as props.
<blockquote>
In this guide, we will take a deep dive into props, we'll take a look at how props work, the various prop types, how to pass various forms of data, and lots more.
</blockquote>
<h2 id="whatareprops">What Are Props?</h2>
Props can be a crucial concept to understand when working with components in Vue. Props, which stands for properties, enable us to pass data and functionality from one component to another. It's important to understand that props dataflow is one directional - we can pass data only from a parent to a child component, not another way around.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Props are read-only, which means the child component cannot modify them because the data is owned by the parent component and is only passed down to the child component to read it.

 </div>
 </div>
 </div>
 <h2 id="declaringpropsinvue">Declaring Props in Vue</h2>
Registering props is simple; all we have to do is add it to the <code>props</code> array in the <code>&lt;scripts&gt;</code> tag. Then, we can use it in our app's <code>&lt;template&gt;</code> section. This occurs in the child component, where data is received from the parent component:
<pre><code class="hljs">&lt;template&gt;
 &lt;p&gt;{{ name }}&lt;/p&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 props: [&#x27;name&#x27;]
}
&lt;/script&gt;
</code></pre>
This is the Single File Component syntax. Alternatively, you can register props for a specific component via:
<pre><code class="hljs">Vue.component(&#x27;user-profile&#x27;, {
 props: [&#x27;name&#x27;],
 template: &#x27;&lt;p&gt;My name is {{ name }}&lt;/p&gt;&#x27;
});
</code></pre>
<h3 id="declaringmultiplepropsinvue">Declaring Multiple Props in Vue</h3>
<code>props</code> are an array - you can add as many as you'd like:
<pre><code class="hljs">&lt;template&gt;
 &lt;p&gt;My name is {{ name }} and I am {{ age }} years.&lt;/p&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 props: [
 &#x27;name&#x27;, 
 &#x27;age&#x27;
 ],
}
&lt;/script&gt;
</code></pre>
<h2 id="passingpropsintocomponents">Passing Props Into Components</h2>
Passing props into components in Vue is similar to passing HTML attributes into HTML tags, and this can accept all types of data, including methods. For example, if we have a profiles component and want to pass user details into the user component, we can do something like this:
<pre><code class="hljs">&lt;template&gt;
 &lt;UserProfile
 v-bind:name=&quot;user.name&quot;
 :img=&quot;user.image&quot;
 /&gt;
&lt;/template&gt;
</code></pre>
<h3 id="staticanddynamicprops">Static and Dynamic Props</h3>
Props can be passed in one of two ways: as a static value or as a dynamic value. By static, we mean that these values are passed directly into the component without the need for <code>v-bind</code> or <code>:</code> (semicolon):
<pre><code class="hljs">&lt;template&gt;
 &lt;UserProfile name=&quot;John Doe&quot; /&gt;
&lt;/template&gt;
</code></pre>
While for dynamic values we use the <code>v-bind</code> or its <code>:</code> shortcut:
<pre><code class="hljs">&lt;template&gt;
 &lt;UserProfile :name=name /&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 &lt;!-- ... --&gt;
 data() {
 return {
 name: &#x27;John Doe&#x27;
 }
 },
 &lt;!-- ... --&gt;
}
&lt;/script&gt;
</code></pre>
Dynamic values may be inherited from the <code>data()</code> option of our component script.
<h3 id="passingpropswithternaryoperators">Passing Props With Ternary Operators</h3>
Oftentimes we want to pass different data based on the value of a condition. In that case, the ternary operator comes in handy, because we can use it inside a prop value:
<pre><code class="hljs">&lt;template&gt;
 &lt;div id=&quot;app&quot;&gt;
 &lt;Home :title=&quot;isHomepage? &#x27;Welcome to the homepage&#x27; : &#x27;This is not the Homepage&#x27;&quot; /&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import Home from &#x27;./components/Home&#x27;
export default {
 &lt;!-- ... --&gt;
 data(){
 return{
 isHomepage: true,
 }
 },
 components: {
 Home
 }
}
&lt;/script&gt;
</code></pre>
In this example, we've checked the <code>loggedIn</code> value - since it is <code>true</code> (a user is already logged in) the resulting prop value will be <code>Log Out</code>.
<h3 id="passingmethodsasprops">Passing Methods as Props</h3>
It is also possible to pass methods as props down to a child component, which works similarly to passing other data types:
<pre><code class="hljs">&lt;template&gt;
 &lt;ChildComponent :method=&quot;myFunction&quot; /&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 &lt;!-- ... --&gt;
 methods: {
 myFunction() {
 &lt;!-- ... --&gt;
 }
 }
};
&lt;/script&gt;
</code></pre>
<h2 id="propsvaluetypes">Props Value Types</h2>
So far, we have only passed string values, but, in reality, any data type can be passed as a prop - including numbers, objects, arrays, Boolean, methods, dates, and so on.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: When we use a static method to pass a number, object, array, and boolean values, we must bind them to tell Vue that this is a JavaScript expression rather than a string (matching the method's name).

 </div>
 </div>
 </div>
 So, to pass them, we pass them as a JavaScript expression (wrapped in quotes), which is evaluated to the correct data type implicitly:
<pre><code class="hljs">&lt;template&gt;
 &lt;UserProfile :age=&quot;22&quot; /&gt;
 &lt;UserProfile :married=&quot;false&quot; /&gt;
 &lt;UserProfile :hobbies=&quot;[&#x27;Singing&#x27;, &#x27;Gaming&#x27;, &#x27;Reading&#x27;]&quot; /&gt;
 &lt;UserProfile
 :name=&quot;{
 firstName: &#x27;John&#x27;,
 lastName: &#x27;Doe&#x27;
 }&quot;
 /&gt;
&lt;/template&gt;
</code></pre>
However, implicit conversions aren't without fault in practical settings. In most cases - you'll want to specify the types explicitly.
<h3 id="specifyingpropstypesexplicitly">Specifying Props Types Explicitly</h3>
Knowing that we can pass any type of data as a prop, the best practice is to specify the type of prop we want to use by declaring them as part of an object rather than an array, and to explicitly specify the type of that value. This is useful because Vue sends a warning alert (in development mode) to the console if the type of data passed does not match the specified prop type:
<pre><code class="hljs">&lt;template&gt;
 &lt;p&gt;My name is {{ name }} and I am {{ age }} years.&lt;/p&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 props: {
 name: String,
 age: Number,
 }
}
&lt;/script&gt;
</code></pre>
<h2 id="workingwithprops">Working With Props</h2>
As previously stated, the primary goal of using props is to pass down data. Say we are building an app that will be displaying user details - we will prefer to create reusable components so that we can pass these data as props, rather than manually creating separate components for each user. Let's create a parent component for that app:
<pre><code class="hljs">&lt;template&gt;
 &lt;div id=&quot;app&quot;&gt;
 &lt;UserProfile :name=&#x27;userName&#x27; age=&#x27;22&#x27; /&gt;
 &lt;UserProfile :name=&#x27;userName&#x27; age=&#x27;18&#x27; /&gt;
 &lt;UserProfile :name=&#x27;userName&#x27; age=&#x27;27&#x27; /&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import UserProfile from &#x27;./components/UserProfile&#x27;

export default {
 &lt;!-- ... --&gt;
 data(){
 return{
 userName:&quot;John Doe&quot;,
 }
 },
 components: {
 UserProfile
 }
}
&lt;/script&gt;
</code></pre>
And here's what the child component will look like:
<pre><code class="hljs">&lt;template&gt;
 &lt;div&gt;
 &lt;h2&gt;My name is {{name}} and I am {{age}} years old.&lt;/h2&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 &lt;!-- ... --&gt;
 props:{
 name:String,
 age:Number,
 }
}
&lt;/script&gt;
</code></pre>
<h2 id="validatingprops">Validating Props</h2>
Previously, we saw that adding prop types helps check the type of data returned by the props, which is a way to validate the props, but we can also add the required key and its value to the prop, as shown below:
<pre><code class="hljs">props: {
 name: {
 type: String,
 required: true
 }
}
</code></pre>
<h2 id="settingdefaultpropvalues">Setting Default Prop Values</h2>
In some cases, we may want to set default values so that if the child component is unable to get data from the parent component, such data can be rendered:
<pre><code class="hljs">props: {
 studentUserName: {
 type: String,
 required: true,
 default: &quot;student##&quot;
 },
 studentPassword: {
 type: String,
 required: true,
 default: &quot;password123&quot;
 },
 userImg: {
 type: String,
 default: &quot;../default-avatar.jpg&quot;
 },
},
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The default value can also be an object or a method that returns a value.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
Props are a crucial part of Vue when using components. In this article, we've taken a look at what props are, how to use them in Vue, how to declare and register them, set default values, validate them, etc.

In this guide, learn what Vue props are, how to register and use them, how to pass data using props, validate them, set data types, default values, and more!