<h2 id="introduction">Introduction</h2>
There are several ways you can remove quotes from a string in Python. You may need to remove all quotes or just ones surrounding a string. You may also need to remove single or double quotes.
<blockquote>
In this short article, we've compiled a comprehensive list of methods you can use to remove quotes from a string in Python. It's absolutely up to you which one you'll use. Please note that the solutions we've listed here are not ordered from best to worst. Each solution is good as long as it meets your needs in a specific case.
</blockquote>
<h2 id="howtoremoveallquotesfromastringinpython">How to Remove All Quotes from a String in Python</h2>
First of all, let's take a look at how to remove all quotes from a string. Solutions listed in this section can be altered to work with both single and double quotation marks. But, for the purpose of this article, let's say we have an example string that has three double quotation marks in it:
<pre><code class="hljs">example_str = &#x27;&quot;This is a string&quot; with quotes&quot;&#x27;
</code></pre>
In this section, we'll take a look at several ways to remove all <code>&quot;</code> from the <code>example_str</code>.
<h3 id="strreplace">str.replace()</h3>
The first approach we'll discuss is to use the <code>str.replace()</code> method on the <code>example_str</code>. It accepts two arguments - the string we want to replace and the replacement string. In this case, we'll replace a double quotation mark (<code>&quot;</code>) with an empty string:
<pre><code class="hljs">new_str = example_str.replace(&#x27;&quot;&#x27;, &#x27;&#x27;)
print(new_str) # This is a string without quotes
</code></pre>
The <code>str.replace()</code> used in this way will remove all double quotes from the <code>example_str</code>.
<h3 id="regularexpressions">Regular Expressions</h3>
This approach uses regular expressions to remove all quotes from a string. Before we start using regular expressions in Python, we first need to import the <code>re</code> module:
<pre><code class="hljs">import re
</code></pre>
After that, we can use the <code>re.sub()</code> method to substitute all occurrences of the quotation mark with the empty string:
<pre><code class="hljs">new_str = re.sub(&#x27;&quot;&#x27;, &#x27;&#x27;, example_str)
print(new_str) # This is a string without quotes
</code></pre>
This will give us the <code>example_str</code> without any quotes in it.
<h3 id="strjoin">str.join()</h3>
The <code>str.join()</code> is another method we can use to remove all quotes from a string in Python. This solution has a bit more complex syntax than other solutions if you are not already familiar with the <code>join()</code> method. We'll essentially go over the <code>example_str</code> character-by-character and append each which is not a quotation mark to the empty string. That way, we'll get the <code>example_str</code> without any quotes in it:
<pre><code class="hljs">new_str = &#x27;&#x27;.join(c for c in example_str if c not in &#x27;&quot;&#x27;)
print(new_str) # This is a string without quotes
</code></pre>
<h2 id="howtoremovequotessurroundingastring">How to Remove Quotes Surrounding a String</h2>
So far, we've been discussing several approaches on how to remove all quotation marks from a string in Python. That's only one way of looking at removing quotes from a string. Arguably, the more common problem is how to remove only quotes surrounding a string. The <code>str.strip()</code> method is intended to do just that. Therefore, we'll discuss the <code>str.strip()</code> method in this section.
Say we have the same exact <code>example_str</code> as in the previous section, and we want to remove only the first and the last quotation marks:
<pre><code class="hljs">example_str = &#x27;&quot;This is a string&quot; with quotes&quot;&#x27;
</code></pre>
Using the <code>str.strip()</code> with a double quotation mark as its argument will remove leading and trailing quotation marks from the <code>example_str</code>:
<pre><code class="hljs">new_str = example_str.strip(&#x27;&quot;&#x27;)
print(new_str) # This is a string&quot; without quotes
</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: No matter how many leading and/or leading quotation marks are in the string, the <code>str.strip()</code> will remove all of them.

 </div>
 </div>
 </div>
 Besides the usual <code>str.strip()</code> method, there are also two of its derivatives - <code>str.lstrip()</code> and <code>str.rstrip()</code>. The first one removes all leading quotes, and the second removes all trailing quotes:
<pre><code class="hljs">new_str = example_str.lstrip(&#x27;&quot;&#x27;)
print(new_str) # This is a string&quot; without quotes&quot;

new_str = example_str.rstrip(&#x27;&quot;&#x27;)
print(new_str) # &quot;This is a string&quot; without quotes
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this short article, we've taken a comprehensive look at how to remove quotes from a string in Python. First of all, we've explained how to remove all quotes from a string using several different methods - <code>str.replace()</code>, <code>str.join()</code>, and <code>re.sub()</code>. Afterward, we've taken a look at the <code>str.strip()</code> method, as well as its derivatives <code>str.lstrip()</code> and <code>str.rstrip()</code>.

David Landup

Dimitrije Stamenic

In this tutorial, we'll take a look at how to remove quotes from a string in Python. First, we'll explain how to use replace(), join(), and regular expressions to remove all quotes from a string in Python. After that, we'll take a look at how to use strip(), lstrip(), and rstrip() to remove all leading and trailing quotes from strings.

How to Remove Quotes from Strings in Python

Joel Olawanle

In this guide learn what routing is, how you can install the `vue-router` in new and existing projects, how to perform lazy loading, navigate between routes, perform dynamic routing, access route parameters and peform programmatic navigation in Vue and JavaScript.

Guide To Vue Router

<h2 id="introduction">Introduction</h2>
When developing lightweight applications - we may want to store some data. If a database is overkill - there's a great alternative: <code>localStorage</code>!
While it doesn't replace a database for, well, database purposes, it does serve as a simple file-based storage system that you can leverage to store easily-accessible data points.
<blockquote>
In this article, we will learn how to use <code>localStorage</code> to easily store data in our browser. This data is saved as key-value pairs that the user can easily retrieve.
</blockquote>
Saving data to <code>localStorage</code> in React is super easy:
<pre><code class="hljs">const [data, setData] = useState([]);

useEffect(() =&gt; {
 localStorage.setItem(&#x27;dataKey&#x27;, JSON.stringify(data));
}, [data]);
</code></pre>
If you're not in a hurry and want to learn more about how this works, keep reading!
<h2 id="whatislocalstorage">What is localStorage?</h2>
<code>localStorage</code> is a web storage object that enables developers to store key-value pairs in a web browser and ensures that this data survives all page refreshes, even when a user closes or restarts a browser - and it has no expiration date. Stored key-value pairs can include any type of data - arrays, objects, strings, numbers, and many others.
However, this cannot replace the role of databases in your websites and web apps because data is lost when a user clears the browser's cache and local storage - ultimately, it's local storage and should be used as such. Nonetheless, there are situations in which a user can use <code>localStorage</code>, such as implementing the dark mode feature, persisting a user's form input value, and many others.
<code>localStorage</code> has built-in methods that allow us to access the browser's storage object. One example is the <code>setItem()</code> method, which allows us to add a key and a value to <code>localStorage</code>, therefore enabling us to store data. Other methods are used to retrieve data - <code>getItem()</code>, delete data - <code>removeItem()</code>, clear all <code>localStorage</code> instances - <code>clear()</code>, and so on.
<h2 id="storingdatatolocalstoragewiththesetitemmethod">Storing Data to localStorage With the setItem() Method</h2>
The <code>setItem()</code> method allows us to save values of any data type to <code>localStorage</code> by assigning values to keys, resulting in a key-value pair. This key would be used to retrieve the corresponding value whenever we want to retrieve it from <code>localStorage</code>.

 <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: In order to store data in <code>localStorage</code>, we must first convert it to JSON string using the <code>JSON.stringify()</code> function. And when we want to retrieve it, we will parse the data using <code>JSON.parse()</code>, converting the JSON string back to a JSON object.

 </div>
 </div>
 </div>
 When working with data in React, we frequently use hooks to help us store/hold it. Hooks can also help us find where to upload that data. This also applies to <code>localStorage</code> because we will use the <code>useState()</code> and <code>useEffect()</code> hooks. These hooks are critical because the <code>useState()</code> hook is used to hold and set data, whereas the <code>useEffect()</code> hook is triggered by default after the first render and whenever the state passed as the second parameter changes.
After explaining the foundation, here is the code we would use to store data in <code>localStorage</code>:
<pre><code class="hljs">const [data, setData] = useState([]);

useEffect(() =&gt; {
 localStorage.setItem(&#x27;dataKey&#x27;, JSON.stringify(data));
}, [data]);
</code></pre>
We've first created a state to hold the data we want to store in our <code>localStorage</code>, and then we've created a <code>useEffect()</code> hook, passing the state as the second parameter. That way, whenever the state changes, the data in the <code>localStorage</code> is updated to the current value.
We handled the core functionality, which is used to assist us in data storage, within the <code>useEffect()</code> hook:
<pre><code class="hljs">localStorage.setItem(&#x27;dataKey&#x27;, JSON.stringify(data));
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we learned how to use React hooks to store data in React using <code>localStorage</code>. As previously stated, this will never replace the role of a database, but rather will assist us in storing some user-related data that can improve the UI but isn't meant to be persisted independently of the browser.

In this short tutorial, we'll take a look at how to store user data directly into browser cache memory using the localStorage object in React.

Storing to localStorage in React

<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.

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

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`!