![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
It's been a popular week for React, so if you're a React fan, bookmark this edition! Plenty of How to's from "How to Write Cleaner React Code" and " How to Create Time Sliders in React Native" to React Bootcamp's "How to Read React Errors (fix 'Cannot read property of undefined'!)"
Another favourite not to miss this week is Chameera Dulanga's "Using GPU to Improve JavaScript Performance" on Bits and Pieces.
General
Using Python for Frontend
For almost three decades, JavaScript has been the de facto language for front-end development. For the back-end, countless other languages have been created, popularized, and then left to rot in the corner of the forgotten languages. But JavaScript not only has remained as the first, second, and third front-end language, it has evolved to provide the required features for the modern web.
Authored by: Bit
JavaScript
Using GPU to Improve JavaScript Performance
As developers, we always seek opportunities to improve application performance. When it comes to web applications, we mainly make these improvements in code. This article will introduce you to a...
Authored by: Bit
How to Add or Remove Element Class Name using JavaScript
In this tutorial, we are going to learn about how to add or remove a class name to an html element by using JavaScript. Consider we have a div element with an id, and two button elements.
Authored by: Sai gowtham
3 Ways to Merge Arrays in JavaScript
An array is a data structure representing an ordered collection of indexed items. A common operation performed on multiple arrays is merge - when 2 or more arrays are merged to form a bigger array containing all the items of the merged arrays.
Authored by: Dmitri Pavlutin
Vanilla JavaScript Code Snippets
A guide to vanilla JavaScript code snippets - with resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.
Authored by: Smashing Magazine
React
Let's build a search bar using React Hooks
February 22, 2021 A few years ago I wrote an article called Let's build a search bar in React where I showed readers (you guessed it!) how to build a search bar in React. When I wrote that article, React Hooks didn't exist so it is written using class components.
Authored by: Tim Smith
React App Performance Optimization: The Definitive Guide
Additionally, you can visualize component lifecycles and compare them to one another. Since this feature depends on the User Timing API, it only works in Chrome, Edge and Internet Explorer. Now that we know the tools and root cause of glitching performance in React, let's understand how to optimize react app performance.
Authored by: Ayush Verma
An Overview of React Query
Any piece of data that is fetched from the server can be termed as server state. For example publications you are subscribed to, stories you have clapped for, stories that you have written are all server state. An example of client state can be the user's theme preference (light or dark).
Authored by: Abhishek Kumar
Build a Collapsible Menu in React with Intersection Observer
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. - developer.mozilla.org For our design, IntersectionObserver can be a good fit because it can provide information about menu items that are overflowing the container (i.e.
Authored by: Shubham Khatri
How to Read React Errors (fix 'Cannot read property of undefined'!)
Got an error like this in your React component? Cannot read property `map` of undefined In this post we'll talk about how to fix this one specifically, and along the way you'll learn how to approach fixing errors in general.
Authored by: Dave Ceddia
How to Write Cleaner React Code
As React developers, we all want to write cleaner code that is simpler and easier to read. In this guide, I've put together seven of the top ways that you can start writing cleaner React code today to make building React projects and reviewing your code much easier. In general,
Authored by: React Bootcamp
How to Create Time Sliders in React Native
From my recent code-read, recently I have learned how to create custom time sliders. All credit goes to my colleague. I am just sharing my learning! Let us first see what do we want to make. We want to convert a slider into time sliders where users can pick a single time or a time range.
Authored by: Saad Khan
Node.js
Top-level await is available in Node.js modules
This post is part of my Today I learned series in which I share all my learnings regarding web development. Node.js is a beautiful tool to write quick utility scripts. I use it in many of my build processes. Renaming files, downloading data, image processing - Node.js scripts handle many tasks in my projects.
Authored by: stefan judis
Libraries and Tools
5 Useful Tools and Libraries for Testing VueJS Applications
Over the past few years, VueJS has become one of the most popular web application frameworks. That is no surprise given how flexible, easy to use, and productive it is. But none of these would matter if you haven't tested your application correctly. Software testing refines the whole process and ensures superior quality to the product.
Authored by: Bit
Testing
Testing React Apps that use React Router
So your React app, like a lot of modern apps, uses React Router to get users from one page to another. And you, like any thorough tester, want to account for React Router in your testing. This post will help you learn about the syntax to get you started testing React Router with your app.
Authored by: Bonnie Schulkin
A web testing deep dive: The MDN web testing report - Mozilla Hacks - the Web developer blog
For the last couple of years, we've run the MDN Web Developer Needs Assessment (DNA) Report, which aims to highlight the key issues faced by developers building web sites and applications. This has proved to be an invaluable source of data for browser vendors and other organizations to prioritize improvements to the web platform.
Authored by: Mozilla Hacks
Functional Programming
JavaScript Map - How to Use the JS .map() Function (Array Method)
Sometimes you may need to take an array and apply some procedure to its elements so that you get a new array with modified elements. Instead of manually iterating over the array using a loop, you can simply use the built-in Array.map() method. The Array.map() method allows you
Authored by: NathanSebhastian
