Category: Blog
-
Process data from a JSON endpoint in a Svelte app
Here’s a simple Svelte app that fetches and displays a list of users from the JSONPlaceholder API: You should see a list of users displayed in your browser. If there’s an error while fetching the data, an error message will be shown. What’s happening here? This is a basic example, and in a real-world scenario,…
-
How to make a closable menu in Astro build
In this example, we have a menu that is initially hidden with the .hidden class. When the user clicks on the “Menu” button, the toggleMenu function is called, which toggles the .hidden class on the menu to show or hide it. The menu also has a “Close” button that calls the same function when clicked.…
-
Prevent React applications from 404 errors when refreshing the page on inner URLs
This code is an Apache web server configuration file written in Apache’s mod_rewrite syntax. It’s commonly used in React applications to prevent 404 errors when refreshing the page on inner URLs. In summary, this code tells Apache to rewrite all requests that aren’t for an existing file, directory or symbolic link to the “/index.html” file.…
-
Fetch a JSON file in React using context
Assuming you have a data.json file in your project that contains an array of objects with some data: You can create a context to manage the data in your React app using the createContext function from the React library. Here’s an example: In the example above, we created a context called DataContext and a provider…
-
What is useEffect hook in React?
useEffect is a built-in React hook that allows you to manage side effects in functional components. Side effects are actions that occur outside the scope of a component and are not related to rendering, such as making an API call, adding an event listener, or setting a timer. The useEffect hook takes two arguments: Here’s…
-
Generate unique keys in React
One common way to do this is by using the index of the current item in the iteration, in combination with a prefix or suffix that is unique to the component. For example, consider the following code: In this example, each li element is given a key based on the index of the item in…
-
React’s useState – how does it work?
useState is a hook in React that allows you to add state to your functional components. It returns an array with two elements: the current state value, and a function that updates it. Here’s an example to help illustrate its usage: In this example, we’re using useState to store the number of times a button…
-
Create a template using React router and SASS
Here is an example of the full code for each of the files described above: src/Routes.js src/App.js src/Home.js src/About.js src/Contact.js src/sass/main.scss Please note that this is a basic example and you may want to add more functionality and styles to your components as needed. Also, Make sure that you’ve installed the necessary packages react-router-dom and…
-
Is using includes() faster than do-while when iterating trhough an array in Javascript?
When iterating through an array in JavaScript, the fastest method will depend on the specific use case and the size of the array. In general, if you are looking for a specific element in an array and you want to know if the element exists in the array, the Array.prototype.includes() method will be faster than…
-
Using localStorage in Javascript
JavaScript provides the localStorage and sessionStorage objects, which can be used to store key-value pairs of data in the browser. The difference between the two is that localStorage stores data permanently, while sessionStorage stores data for a single session (data is lost when the browser tab is closed). Here are a few examples of how…