reactjs.md

<img src="https://hackernoon.com/banner-image.png" alt="drawing" width="1012"/>

# [reactjs](https://hackernoon.com/tagged/reactjs)
### Let's learn about [Reactjs](https://hackernoon.com/tagged/reactjs) via these 469 free blog posts. They are ordered by HackerNoon reader engagement data. Visit the [/Learn](https://hackernoon.com/learn) or [LearnRepo.com](https://learnrepo.com) to find the most read blog posts about any technology.

Reteaching people basic web skills since 2013.

### [1. ReactJs component lifecycle methods — A deep dive](https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-0403b76.jpeg)
This blog post is for the React version less than 16.3.<br>In React v16.3 there has been significant changes in component lifecycle methods. If you are using React greater than 16.3 please refer the following blog post.

### [2. How to Deploy a React Application With Firebase Hosting](https://hackernoon.com/how-to-deploy-a-react-application-with-firebase-hosting-p92m37b7)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-kfj37ls.jpeg)
In this blog, I am going to discuss how we can deploy react applications within a few minutes by using Firebase.

### [3. Setting Scroll Position in React](https://hackernoon.com/setting-scroll-position-in-react)
![](https://cdn.hackernoon.com/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-kla3rz9.jpeg)
In this article, we will explore how web developers can use the scrollTo() method to set a scroll position to specific coordinates or DOM elements in React

### [4. Cleanup Functions in React’s UseEffect Hook — Explained with examples](https://hackernoon.com/cleanup-functions-in-reacts-useeffect-hook-explained)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-owa3u68.jpeg)
Cleanup functions in React’s useEffect hook allow us to stop side effects that no longer need to be executed in the component.

### [5. Share Code between React and React Native Apps](https://hackernoon.com/code-reuse-using-higher-order-hoc-and-stateless-functional-components-in-react-and-react-native-6eeb503c665)
![](https://cdn.hackernoon.com/images/mk48h31lz.jpg)
Developers are adopting Higher Order Components (HOC) Stateless Functional Components, and for good reason: they make it easier to achieve code reuse, a coveted aspiration of developers.

### [6. How to use componentWillMount with Functional Components in React](https://hackernoon.com/how-to-use-componentwillmount-with-functional-components-in-react-fc143u9d)
![](https://cdn.hackernoon.com/drafts/mv1331n3.png)
Functional components are far more efficient than class based components. Less code is needed to be written to achieve the same goal.

### [7. Top 10 React Libraries on GitHub](https://hackernoon.com/top-10-react-libraries-on-github-ebf730e7ac25)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-ov03bih.jpeg)
Created by Facebook, React has gone on to become a really powerful JavaScript framework, making the job of frontend development easier for programmers. If you have spent some time working with React JS, you would agree that a couple of other libraries need to be used with React to get the best experience.

### [8. Best Examples of Apps Written in React.js](https://hackernoon.com/best-examples-of-apps-written-in-reactjs)
![](https://cdn.hackernoon.com/images/xWx1eln9Ida9r216TnPyHFrKw1J2-8q93sd7.jpeg)
Want to see the real-world applications of React.js? Explore a collection of the best apps built with React.js and get inspired for your own projects.

### [9. Mastering SOLID Principles Like the Back of Your Hand in Just 8 Minutes!](https://hackernoon.com/mastering-solid-principles-like-the-back-of-your-hand-in-just-8-minutes)
![](https://cdn.hackernoon.com/images/L79Bn4QauxVT0oBr1v6HT1hm9Sg1-19a3rx9.gif.webp)
Boost Performance, Maintainability, and Scalability with SOLID Principles in React Applications!

### [10. How to Create a Chrome Extension with React](https://hackernoon.com/how-to-create-a-chrome-extension-with-react)
![](https://cdn.hackernoon.com/images/CaJQOsx5JXRYxEOC15hktEiTMlU2-pqa3os6.jpeg)
Chrome Extensions, React SPA, Manifest V3, Building Chrome Extensions, Web Extension API, Service Workers, TypeScript, CRA

### [11. How to Render 3D Model in a React JS Application](https://hackernoon.com/how-to-render-3d-model-in-a-react-js-application)
![](https://cdn.hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-t7a3vtn.jpeg)
In this article we are going to use Three.js to render an iPhone model in a React application. We will use react-three/fiber and react-three/drei.

### [12. How to manage state in Next.js 13 using Redux Toolkit](https://hackernoon.com/how-to-manage-state-in-nextjs-13-using-redux-toolkit)
![](https://cdn.hackernoon.com/images/c23q7sWhhWSAiQEYIeUjFL8AK233-ct93rt4.jpeg)
With server and client components in next.js 13, this tutorial will take you through integrating and managing state using redux toolkit in your project.

### [13. The Perfect React Modal Implementation for 2023](https://hackernoon.com/the-perfect-react-modal-implementation-for-2023)
![](https://cdn.hackernoon.com/images/DUNwZCukeJNLc4sNJWS9gfbJuRg1-zva3ooy.jpeg)
The Perfect React modal windows subsystem implementation for 2023

### [14. The React Developer RoadMap](https://hackernoon.com/the-2020-reactjs-developer-roadmap-8q143yan)
![](https://cdn.hackernoon.com/images/pq25y3ylr.jpg)
An illustrated guide to becoming a Read JS Developer with links to relevant courses

### [15. 6 Easy Steps to Use Next Auth in Next.js 13 Using Route Handler](https://hackernoon.com/6-easy-steps-to-use-next-auth-in-nextjs-13-using-route-handler)
![](https://cdn.hackernoon.com/images/XZ441gigeTTXc7E3mtYOPnsJvBk2-vu93n85.jpeg)
Next.js is a JavaScript framework that enables developers to create front-end web applications that are run on a server. It is a React-based framework that is e

### [16. "If You Have a Goal, You Can Reach it" Nominee Nominee Yan Tsishko](https://hackernoon.com/if-you-have-a-goal-you-can-reach-it-nominee-nominee-yan-tsishko)
![](https://cdn.hackernoon.com/images/oO6rUouOWRYlzw88QM9pb0KyMIJ3-yr33n64.jpeg)
 Yan Tsishko is a chief software engineer at Oxagile. He believes Javascript/TypeScript is the most exciting technology & that frontend is the future of tech. 

### [17. Next.js and File Downloads: Three Ways to Restrict Access to a File](https://hackernoon.com/nextjs-and-file-downloads-three-ways-to-restrict-access-to-a-file)
![](https://cdn.hackernoon.com/images/3FnIKHGgbNVQq1IJMsgvsFiWteK2-6ec3qa2.jpeg)
Let's see exactly how we can protect files in next.js and allow certain users only to download them. Click to read the article...

### [18. Why You Must Use Next.js to Get the Benefits of React](https://hackernoon.com/is-nextjs-a-better-choice-than-react-in-2022)
![](https://cdn.hackernoon.com/images/rklQdWiRIHQDhmQ2G0J4cCI4OQZ2-1n93ocl.jpeg)


### [19. 4 Reasons Why React JS Has Taken Over the Front End Web Development](https://hackernoon.com/4-reasons-why-react-js-has-taken-over-the-front-end-web-development)
![](https://cdn.hackernoon.com/images/XzHPuJxAd3aeUjUxw9gCGbNFUEI3-pr93na0.jpeg)
React.Js has taken the role of a standard resource in front-end development and here are some of the reasons why the language has done so well recently.

### [20. Why Vite is Better Than Create-React-App (CRA)](https://hackernoon.com/why-vite-is-better-than-create-react-app-cra)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-h693svh.jpeg)
Vite is a build tool similar to Webpack. It can be used for React, Preact, Svelte, Vue, Vanilla JS, and LitElements. Vite is 100 times faster than Webpack and b

### [21. How to Retrieve Player Stats from the NHL's undocumented REST API](https://hackernoon.com/retrieving-hockey-stats-from-the-nhls-undocumented-api-zz3003wrw)
![](https://cdn.hackernoon.com/drafts/rydr3wdm.png)
It's that time of year again. Summer is coming to an end, Autumn is around the corner, and the NHL season is about to begin.

### [22. How to Publish a React Component as a Package to Npm](https://hackernoon.com/how-to-publish-a-react-component-as-a-package-to-npm)
![](https://cdn.hackernoon.com/images/hPxuWwdsVdX5m8RoVpgA3hChIn42-j0m2u9u.jpeg)
This is a step-by-step approach to publishing a react component as a package to the npm registry

### [23. Package Your React App with Spring Boot [A How-To Guide]](https://hackernoon.com/package-your-react-app-with-spring-boot-a-how-to-guide-cdfm329w)
![](https://cdn.hackernoon.com/images/561y3yuv.jpg)
A little backstory on how this started. My team needed to save some on money on the infrastructure we were requesting and since most of the load for the application we wanted to build would be on the client-side rather than the service side. We decided to see if we could combine a Spring Application with a React app and serve up a single war file.

### [24. 5 Most Popular React UI Component Libraries](https://hackernoon.com/5-most-popular-react-ui-component-libraries-5sx3t9c)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FPSAg5ijEefbKXa7Mqz3dBvZqmfj2-x53h3uht.jpeg?alt=media&token=996e2b90-c0fa-4691-b531-260d3b8286f6)
According to Stack Overflow Developers Survey 2020, ReactJS was voted as the most loved and wanted Javascript web framework. 

### [25. The Headless-UI Date Picker for React Apps](https://hackernoon.com/the-headless-ui-date-picker-for-react-apps)
![](https://cdn.hackernoon.com/images/Sgj0oszXXxgEo1rKF4QtuLfwneM2-v9a3opl.png)
Each year the ⚛️ React community is becoming bigger and bigger. And with this growth, we get more and more tools to achieve our goals and needs.

### [26. 13 Useful React Libraries for Devs in 2023](https://hackernoon.com/13-useful-react-libraries-for-devs-in-2023)
![](https://cdn.hackernoon.com/images/FpKROxxtLBRmSsCCb4lxCS7LBVr2-uh93srj.jpeg)
Being a modern React developer is not only about understanding the core concepts of React but also about getting well-versed with the whole ecosystem of React.

### [27. What's The Right Way to Fetch Data in React Hooks? [A Deep Dive]](https://hackernoon.com/whats-the-right-way-to-fetch-data-in-react-hooks-a-deep-dive-2jc13230)
![](https://cdn.hackernoon.com/drafts/dejx3ydb.png)
The React Hooks docs has a FAQ entry: “How can I do data fetching with Hooks?” where they link to this well written and detailed article by Robin Wieruch. There is however a shortcoming in that approach which affects correctness is some important situations.

### [28. Qwik vs Next.js: Speed Comparison](https://hackernoon.com/qwik-vs-nextjs-speed-comparison)
![](https://cdn.hackernoon.com/images/XyqHIwK0xDMOGdIf5iTNW4CrLjb2-2wn33iy.png)
A benchmark comparison and analysis between Qwik and Next.js 13.

### [29. Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More](https://hackernoon.com/building-a-full-stack-airbnb-clone-with-nextjs-tailwind-css-amplication-and-more)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-te92y5n.jpeg)
Learn to create a Full Stack Airbnb Clone with Amplication: Low-code Next.js frontend, Tailwind CSS styling, JWT-based auth, Mapbox API maps, and more.

### [30. Creating a Terminal Emulator in React](https://hackernoon.com/creating-a-terminal-emulator-in-react)
![](https://cdn.hackernoon.com/images/08bWL6HYrRWojYGR2t4YDxvOGzj2-7gc3lks.jpeg)
How to create a terminal emulator in React and Typescript

### [31. Three Main Components of JavaScript](https://hackernoon.com/three-main-components-of-javascript-0bp3tjx)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F2URpjmJLkjVeYGsWZeCo2hCb90Y2-fd363yht.jpeg?alt=media&token=ddbcd010-f6bd-4411-a2c5-5dfde21bab7b)
 JavaScript is certainly one of those programming languages which you can get started within a few hours due to its simple syntax, but would probably take you years to master it.

### [32. Create your React.js Address Autocomplete Component in 10 minutes ⏰](https://hackernoon.com/create-your-reactjs-address-autocomplete-component-in-10-minutes-ws2j33ej)
![](https://images.unsplash.com/photo-1539316814650-83bdbc5339be?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Hi guys, I want to introduce use-places-autocomplete. It's a React.js hook for Google Maps Places Autocomplete. With it you can build your own places autocomplete UI like the following demo easily! Hope you guys 👍🏻 it.

### [33. React Native eCommerce Templates -  2019 Edition [My Top 5 Picks]](https://hackernoon.com/5-best-react-native-ecommerce-template-2019-pc2y32zq)
![](https://cdn.hackernoon.com/images/sshy32d7.jpg)
Establishing online store, e-commerce websites and applications have been a growing trend in the modern world. Due to the utmost feasibility and efficiency of customer attraction from digital or online marketing, online stores and e-commerce sites are growing rapidly. In the near future, there is a high possibility that every real-world store will set up its own on online store application or website. There is speedy growth of published e-commerce application in app stores. Mobile e-commerce application has been a growing trend nowadays. As more customers switch from PC to mobile platforms, pretty much any online store needs to have its own mobile application. This is where the React Native eCommerce template come in extremely handy.

### [34. Using ReactJS and Context API to Build a Custom Toast Notification Component ](https://hackernoon.com/using-reactjs-and-context-api-to-build-a-custom-toast-notification-component)
![](https://cdn.hackernoon.com/images/VeLvC6JAPhRDBAjfhrIDt3Gp3cD2-sna3sum.jpeg)
Learn how to build a custom toast notification component in React using Context API. Add progress bar, pause on hover, and dismiss button functionality.

### [35. Implement Form Validation in React Without Any Libraries](https://hackernoon.com/implement-form-validation-in-react-without-any-libraries)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-1v93oq3.jpeg)
You don’t need a fancy library when you have HTML5 and Constraint API to implement Form Validation and Submission in React.

### [36. Creating Context in ReactJS Using TypeScript](https://hackernoon.com/creating-context-in-reactjs-using-typescript)
![](https://cdn.hackernoon.com/images/ZIJAyZ1t1NP4cp9j5L6agAHvOkF3-up93z9m.jpeg)
A react context is meant to be used in more than one component or custom hook. Enforce typings in your context to ensure a better quality code

### [37. How To Build A Web3 e-Commerce Platform with React and Solidity: (PART II)](https://hackernoon.com/how-to-build-a-web3-e-commerce-platform-with-react-and-solidity-part-ii)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-9ag3ln9.jpeg)
Now let’s build the frontend for interacting with it as you can see above.
Not much talking, let’s get coding… We’ll begin by installing the rest of the depend

### [38. How to Set Up Firebase Authentication with React](https://hackernoon.com/how-to-set-up-firebase-authentication-with-react)
![](https://cdn.hackernoon.com/images/cF7mu2NOvjhw93apYPWBBmsndEM2-6wd3pqc.jpeg)
Tutorial on how to add Firebase Email/Password authenticaion to a React application leveraging React Router.

### [39. Best Practices for React Performance Optimization](https://hackernoon.com/best-practices-for-react-performance-optimization)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-kn93xkn.png)
Learn to React performance optimization with practical examples to create blazing-fast web apps for a seamless user experience.

### [40. Using React and Typescript to Create Reusable and Customizable Modals](https://hackernoon.com/using-react-and-typescript-to-create-reusable-and-customizable-modals)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-3va3mds.jpeg)
Create reusable and customizable modals with React and TypeScript. Learn how to make a complete modal with React Portals and styled-components.

### [41. Detecting Scroll Direction in React: a StackOverflow Answer Turned NPM Package](https://hackernoon.com/detecting-scroll-direction-in-react-a-stackoverflow-answer-turned-npm-package)
![](https://cdn.hackernoon.com/images/2kJk8vVbUKfVSNAex9vepyD95Qf2-tf83xue.jpeg)
Explore @smakss/react-scroll-direction, a React npm package for detecting scroll direction inspired by a popular StackOverflow answer.

### [42. Top 9 Tips to Improve React Performance](https://hackernoon.com/top-9-tips-to-improve-react-performance)
![](https://cdn.hackernoon.com/images/OujWaQx7FhMxIORYNRgWYZuh1kb2-9yad35nr.jpeg)
These 9 tips will help you improve the performance of your React code so that you can make the most out of your software and maximize what you are capable of. 

### [43. Step by Step Guide to Create 3 Different Types of Loading Screens in React](https://hackernoon.com/step-by-step-guide-to-create-3-different-types-of-loading-screens-in-react-lu2633nd)
![](https://hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-g6aq337h.jpeg)
Here I will show you 3 ways to create cool loading screen or preloader in React.  

### [44. Creating Highly-Performant Animations using Web Animations API and React hooks ](https://hackernoon.com/creating-highly-performant-animations-using-web-animations-api-and-react-hooks-k92d3utf)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2Fjgvl75J01zfc9i0NsYvVgqlVkkh2-uj6d3y8q.jpeg?alt=media&token=9371a577-9f09-4dd8-9168-a39979e892ea)
Using Web Animations API (a.k.a WAAPI) in the React hook way. Let's create highly-performant, flexible and manipulable web animations in the modern world. Hope you guys 👍🏻 it!

### [45. How to Use Screen Wake Lock API in React to Manage Screen Locking/Dimming in a Browser](https://hackernoon.com/how-to-use-screen-wake-lock-api-in-react-to-manage-screen-lockingdimming-in-a-browser)
![](https://cdn.hackernoon.com/images/fN6gqyEn1ZWGSnRkRVKQmlxFpdc2-948365k.jpeg)
LIVE demo 🚀 on how to integrate the Screen Wake Lock API into any React application with automatic reacquisition of a lock using react-use-wake-lock.

### [46. The Main Differences Between Angular, React, and Vue ](https://hackernoon.com/the-main-differences-between-angular-react-and-vue)
![](https://cdn.hackernoon.com/images/xWx1eln9Ida9r216TnPyHFrKw1J2-gl036s5.jpeg)
Gathered review of the major used frameworks: Angular, React, and Vue. We compared them by the most crucial criteria for deciding on one of them for a project.

### [47. How I Cloned a Simple VSCode Using Tauri and ReactJS](https://hackernoon.com/how-i-cloned-a-simple-vscode-using-tauri-and-reactjs)
![](https://cdn.hackernoon.com/images/3vn6gVC40lf9EZovJoHLxSOK5Gr1-vo93u5w.jpeg)
How I built a simple code editor like VScode using Tauri and Reactjs

### [48. How To Implement The Prefetch Pattern in React Concurrent Mode](https://hackernoon.com/implementing-the-prefetch-pattern-in-react-concurrent-mode-h4r3twc)
![](https://cdn.hackernoon.com/drafts/sool3tca.png)
Recently, React announced a feature of the React ecosystem — Concurrent Mode. This would allow us to stop or delay the execution of components for the time that we need. It’ll help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.

### [49. How to Handle REST API Requests in React](https://hackernoon.com/how-to-handle-rest-api-requests-in-react-vg1e32rn)
![](https://cdn.hackernoon.com/drafts/jaboj3yhk.png)
REST APIs are commonly used in web development. They are programming interfaces that web apps use to 'talk' to each other. They are used to access features and data. 'REST' (Representational State Transfer) is a concept that defines the APIs properties. This article will focus on the use of web-based APIs to retrieve data from a database. 

### [50. How to Document Picture-in-Picture in React (with Typescript)](https://hackernoon.com/how-to-document-picture-in-picture-in-react-with-typescript)
![](https://cdn.hackernoon.com/images/fN6gqyEn1ZWGSnRkRVKQmlxFpdc2-twc30ik.jpeg)
Implementing Document Picture-in-Picture in modern React (with Typescript)

### [51. Implementing Social Login for a React and Backend App](https://hackernoon.com/implementing-social-login-for-a-react-and-backend-app)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-cv93sn7.jpeg)
Implementing Social Login: A Step-by-Step Guide in  React with Typescript. How to add Github and Google login for users and taking advantage of the social netwo

### [52. Setting Up Google Analytics 4 in a Next.js Project](https://hackernoon.com/setting-up-google-analytics-4-in-a-nextjs-project)
![](https://cdn.hackernoon.com/images/XgeYnyzJtxbHsPPDPbFLA1SdvPA3-ag93uqu.jpeg)
Google Analytics is a web analytics service that tracks and reports several types of website traffic. 

### [53. How to Use GraphQL with the Remix Framework](https://hackernoon.com/how-to-use-graphql-with-the-remix-framework)
![](https://cdn.hackernoon.com/images/YhQrn2uriTN9SEA31DxtfMz7glu1-f7b3yrx.jpeg)
Learn how to integrate GraphQL into your Remix project! Follow this step-by-step tutorial and learn about how GraphQL and Remix can be best friends!

### [54. ReactJS Custom Modal Component using Hooks and Portals](https://hackernoon.com/reactjs-custom-modal-component-using-hooks-and-portals-p12j35le)
![](https://cdn.hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-zmgu35c7.jpeg)
Create reusable modal component in react js using hooks and portals.  Using this modal you can render content dynamically with cool animation.

### [55. ✨ Introducing react-cool-img: An easy way to optimize images ](https://hackernoon.com/a-easy-way-to-handle-image-ux-and-performance-with-reactjs-introducing-react-cool-img-u2jt362o)
![](https://images.unsplash.com/photo-1453000109878-d4619d01587c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
react-cool-img is a lightweight but powerful React.js image component, which helps you handle image UX (user experience) and performance as a professional guy 🤓. It empowers the standard img tag by many cool features without breaking your original development experience. Ideally, it can be an img tag replacement for your React.js project.

### [56. How to Add NSLocationAlwaysUsageDescription Key to Info.plist File in Your iOS App](https://hackernoon.com/how-to-add-nslocationalwaysusagedescription-key-to-infoplist-file-in-your-ios-app-7s5e341a)
![](https://cdn.hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-hvs28ro.jpeg)
We received a message from iOS App Team about adding NSLocationAlwaysUsageDescription key in Info.plist file. Our last build was rejected for this specific reason.

### [57. Getting started with React Native for Windows & macOS](https://hackernoon.com/getting-started-with-react-native-for-windows-and-macos)
![](https://cdn.hackernoon.com/images/7FWGsynngiU89ohyitGw0qxV0L42-fj93zxk.jpeg)
News flash! React Native is not only for mobile development. It can also be used to create desktop apps for Windows and macOS. Learn how to get started with it.

### [58. Autocomplete Search Component With React and TypeScript](https://hackernoon.com/autocomplete-search-component-with-react-and-typescript)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-0c93uls.jpeg)
Autocomplete Search Component With React and TypeScript

### [59. Building a Sidebar in React with a Higher-Order Component](https://hackernoon.com/building-a-sidebar-in-react-with-a-higher-order-component)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-6l93pvf.jpeg)
In this article, I explore one of the use cases of React's higher-order component.

### [60. How to Add an Announcement Banner to your React Navbar](https://hackernoon.com/how-to-add-an-announcement-banner-to-your-react-navbar)
![](https://cdn.hackernoon.com/images/ZuuM3fSjXmf2oETrekt5pezKail2-zpl3p2s.jpeg)


### [61. Implementing Password Validation in React With HTML5](https://hackernoon.com/implementing-password-validation-in-react-with-html5)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-h593o6t.jpeg)
Let's implement the Password component in React, supporting 5 validation rules.

### [62. Deploy React Application to Kubernetes Cluster on Google Cloud Platform](https://hackernoon.com/deploy-a-react-application-to-kubernetes-cluster-on-google-cloud-platform-3idt32ha)
![](https://cdn.hackernoon.com/drafts/gfkjn32rv.png)
Congratulations to all who made it this far in the ALCwithGoogle
program. 

### [63. React useRef Hook Explained with Examples](https://hackernoon.com/react-useref-hook-explained-with-examples-cc1z35jx)
![](https://cdn.hackernoon.com/images/SnVhdDNm3fMGfftKZO7mnXldvQm2-mj4539q9.jpeg)
Well, we all know that ref helps us to get access to the DOM. But let's consider next situation, we have some React component and we want to know how many times this component was rendered. How can we achieve that? Well, maybe we can use React useEffect and useState hooks to determine that the component was re-rendered. Something like this:

### [64. How to Track User Navigation Events in a React Application](https://hackernoon.com/how-to-track-user-navigation-events-in-a-react-application-8c2933w1)
![](https://cdn.hackernoon.com/images/adxOC8WlP1OTnFqCw6rgfMcBzQI2-bzcu33s1.jpeg)
A scalable and maintainable strategy for tracking page navigation events in a React application.

### [65. 7 React Admin Dashboard Templates For Your Next Project](https://hackernoon.com/7-react-admin-dashboard-templates-for-your-next-project-gn3x3yse)
![](https://cdn.hackernoon.com/images/7223j3kwu.jpg)
Developing an admin area for your React web application can be very time-consuming. And it is just as important as designing all of the front-end pages. Both admin area of your web-application and the pages themselves must be pixel-perfect, fully responsive and have mobile-first and user-friendly web design. In this article, I listed some of the best ReactJS admin dashboard templates that can speed up your development and save you a lot of time and money, eliminating the costs of creating a web application from scratch.

### [66. How to Create Different Gradient Backgrounds in React Native Application](https://hackernoon.com/how-to-create-different-gradient-backgrounds-in-react-native-application-ig1u3uwo)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F3nhao37bBEfHA9RTQ0WNVWfXPD02-h2f3u2f.gif?alt=media&token=a3e763c3-805c-48d5-a44a-e7fb1576448b)
Gradients bring out a colorful taste in our apps. So it’s important to know how and when to use them in your mobile apps. In React Native, gradients are extremely easy to integrate and in this article we are going to describe exactly how to implement them. There are mainly two types of linear gradients in React Native and CSS: Linear and Radial gradient

### [67. Creating Real-Time Chat App using React And Socket.io with E2E Encryption](https://hackernoon.com/creating-real-time-chat-app-using-react-and-socketio-with-e2e-encryption-b0113u5s)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F1ygoOJrOIvNFNp0un0WDg4WhTfk1-bqbe3y0o.gif?alt=media&token=3fe92d69-0a5a-4b5a-89c5-f77857e24bb3)
Link link: Here is the example of the chat app we are going to build ✌.

### [68. How to Integrate an Image CDN in Your React Application](https://hackernoon.com/how-to-integrate-an-image-cdn-in-your-react-application-7r3z3v0s)
![](https://cdn.hackernoon.com/images/rr1mv3yig.jpg)
One of the most crucial maxims that I internalized during my career in web engineering is that every technical decision embodies tradeoffs. No matter the benefits, you’ll always face certain costs and restrictions: be it creating an abstraction in your code, scaling a distributed data store or choosing between web and mobile app format for the initial product launch.

### [69. React Progressive with Lazy-Loading Images [A How-To Guide]](https://hackernoon.com/react-progressive-with-lazy-loading-images-a-how-to-guide-0ki732kb)
![](https://cdn.hackernoon.com/images/q9ez3b6q.gif)
npm i react-progressive-graceful-imageSupports features like Custom Image Placeholder/Loader Component, srcset, lazy Loading, Graceful Loading, Progressive Image Loading.Use of Intersection Observer and navigator.onLine (Better performance and Optimization)

### [70. How to Build an Airbnb clone with React and ElasticSearch](https://hackernoon.com/how-to-build-an-airbnb-clone-with-react-and-elasticsearch-822r73yna)
![](https://cdn.hackernoon.com/images/5e2xv3y79.jpg)
This blog post will help you build powerful search UI experiences similar to Airbnb's. I will do this using ReactiveSearch - the most popular React UI components library for building search interfaces. I will do this by breaking down the UI into components so this will be helpful to build any search UI. In the process, you will also learn about about how to work with ElasticSearch.

### [71. Demystifying React Hooks: Usage, Examples, and Common Mistakes ](https://hackernoon.com/demystifying-react-hooks-usage-examples-and-common-mistakes)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-x392u6s.jpeg)
Unleash the full potential of React Hooks! Discover how to leverage this powerful feature to enhance your React applications with examples and common pitfalls. 

### [72. How Javascript Was Created and Why The History Behind It Is Important](https://hackernoon.com/how-javascript-was-created-and-why-the-history-behind-it-is-important-fwh3tco)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F3nhao37bBEfHA9RTQ0WNVWfXPD02-ppd3tly.jpeg?alt=media&token=b31469ee-6cb9-453b-a740-9318d731a65e)
Having a humble beginning of starting as a language that was intended to handle browser validations to a full-blown programming language that powers a lot of desktop applications as well, JavaScript has traveled a long journey.

### [73. How to Fetch Data From an API in React.js](https://hackernoon.com/how-to-fetch-data-from-an-api-in-reactjs-j11q34k0)
![](https://hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-95l344q.jpeg)
Without any doubt, the use of React is increasing day by day. And also API(Application Programming Interface) is gaining more popularity in the modern era of technology. This article will guide a beginner to play with React to API.

### [74. How to Create the Negative Margin Effect in Flutter](https://hackernoon.com/how-to-create-the-negative-margin-effect-in-flutter)
![](https://cdn.hackernoon.com/images/5fsVCK2bllWuX0JHIqFNx1DULDa2-7693plt.gif.webp)
How to achieve the negative margins effect that can be seen in CSS in flutter. 

### [75. Migrating from useState to useReducer in React Hooks](https://hackernoon.com/migrating-from-usestate-to-usereducer-in-react-hooks)
![](https://cdn.hackernoon.com/images/p78YqcSArmS6R4uiGKkhQ5CNJa22-0e93n5f.jpeg)
useState is a simple hook for single state. useReducer is a powerful hook for complex state. Here's how to convert from useState to useReducer.

### [76. I Created an Alternative to React's useEffect Hook](https://hackernoon.com/i-created-an-alternative-to-reacts-useeffect-hook)
![](https://cdn.hackernoon.com/images/qKpeaoFMpkfgP9RP0ujjUyy9fa42-3a63bbm.jpeg)
Two custom hooks as an alternative for componentDidMount() and componentDidUpdate() React lifecycle method.

### [77. Hiding Your API Credentials Client Side Using a Proxy Server in React](https://hackernoon.com/hiding-your-api-credentials-client-side-using-a-proxy-server-in-react)
![](https://cdn.hackernoon.com/images/MIq3LAf1OoPW35o7MBmd2s51rcB3-9v93tiu.jpeg)
When you're writing client-side code to make API requests, you might need a Proxy Server to hide your API Credentials. Let's see how to do this for React apps.

### [78. React + Express + Typescript Boilerplate with Performance and Extended Functionality](https://hackernoon.com/full-stack-react-typescript-express-project-with-advanced-features-ts4m308w)
![](https://cdn.hackernoon.com/drafts/3p1jz30sr.png)
Why Another Boilerplate

### [79. How to Lazy Load React Components with an Intersection Observer](https://hackernoon.com/how-to-lazy-load-react-components-with-an-intersection-observer)
![](https://cdn.hackernoon.com/images/zoOctYrZ1RX1tldfBOyGfrmZq7f1-tya3ruq.jpeg)
Learn how to improve the performance of your application by lazy loading react components using the intersection observers

### [80. An Intro to Container-Presenter Design Patterns in React ](https://hackernoon.com/an-intro-to-container-presenter-design-patterns-in-react)
![](https://cdn.hackernoon.com/images/ZHAz9wv9l3eZzNLiVyAUACoJBo03-zl930vi.jpeg)


### [81. ReactJS Continuous Deployment to Firebase Hosting using Circle CI](https://hackernoon.com/reactjs-continuous-deployment-to-firebase-hosting-using-circle-ci-ed31c0aee2ca)
![](https://cdn.hackernoon.com/images/1bp36ja.jpg)
Doing the same thing is very bored. On this topic, the boring part is deploying our Web Application to Firebase Hosting. The steps that we do are:

### [82. 10 Best React Native Chart Libraries](https://hackernoon.com/10-best-react-native-chart-libraries-jz1x3wlg)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FTIJzydIu3tguQ0D6uODERgXfGTW2-5wv33of.jpeg?alt=media&token=97fb44f5-ac13-4ac5-8de3-d89319f0f4b5)
Representing statistical data in plain text or paragraphs, tables are pretty boring in my opinion. What about you? 

### [83. How to Build a Hamburger Menu in ReactJS via Styled-Components](https://hackernoon.com/how-to-build-a-hamburger-menu-in-reactjs-via-styled-components-2h2y316j)
![](https://cdn.hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-6m5i31qd.jpeg)
Build Hamburger Menu in ReactJS. Using this method you can create different types of Hamburger Menu. How to build Hamburger Menu?

### [84. The Ultimate Guide to Integrating Cloudinary With Next.js](https://hackernoon.com/the-ultimate-guide-to-integrating-cloudinary-with-nextjs)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-7q931n7.jpeg)
Enhance your web app's performance with Cloudinary in Next.js! Optimize media delivery and improve user experience. Learn how in our step-by-step guide.

### [85. 3 Practical Tasks for Your Next React Interview](https://hackernoon.com/practical-tasks-for-your-next-react-interview)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-gq93qsc.jpeg)
Here are 3 React tasks to check your coding skills, way of thinking, and ability to create good understandable code.

### [86. Building Efficient npm Packages with React, TypeScript, and CSS Modules: A Comprehensive Guide](https://hackernoon.com/building-efficient-npm-packages-with-react-typescript-and-css-modules-a-comprehensive-guide)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-f093m3e.jpeg)
boilerplate project for publishing your npmjs package with typescript and css

### [87. 6 JavaScript Courses To Land Your Next High Paying Job](https://hackernoon.com/6-javascript-courses-to-land-your-next-high-paying-job)
![](https://cdn.hackernoon.com/images/MQzhgEvAeOXyPo3IjFRz4IZU3K83-rv93htg.jpeg)


### [88. Creating Effective And Optimized Next.JS Reusable Components.](https://hackernoon.com/creating-effective-and-optimized-nextjs-reusable-components)
![](https://cdn.hackernoon.com/images/frontend-developer-using-in-next-js-on-their-computer-or-laptop-wsq7mfouj2u2pxh5kjletr4k.png)
Learn to create reusable components in React for better code organization and maintenance, using ComponentProps and HTMLAttributes interfaces for adaptability..

### [89. Reducing the Pain of Big Numbers, and Introducing W3bNumber.](https://hackernoon.com/reducing-the-pain-of-big-numbers-and-introducing-w3bnumber)
![](https://cdn.hackernoon.com/images/TGVgfOSIw0foLzHHOM4wyPrTs5C3-2692hmp.jpeg)
Dealing with bignumbers in a dApp UI can be hard. This article serves as a big-number primer, and introduces W3bNumbers to help display them effectively.

### [90. The Top React Reporting Tools](https://hackernoon.com/the-top-react-reporting-tools)
![](https://cdn.hackernoon.com/images/bJmCjBFKDCdFyOp2WyArQwy7BiF3-vk03462.png)
Explore the top React reporting tools and their notable features for your applications in this review of leading options.

### [91. Creating a Custom Hook for Fetching Asynchronus Data: useAsync Hook with Cache](https://hackernoon.com/creating-a-custom-hook-for-fetching-asynchronus-data-useasync-hook-with-cache)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-j3a3q9h.png)
We can create a custom hook that will be used to handle all asynchronous data fetching and updating the state updating.

### [92. Authentication in React with Firebase](https://hackernoon.com/authentication-in-react-with-firebase-qc3x3vjl)
![](https://images.unsplash.com/photo-1519337718347-749509f114a8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Sometimes we want to implement authentication for multiple reasons and we don't want to create an API just for the authentication or maybe we are not backend developers. That's why Firebase provides authentication backend services easy to use. It supports authentication using passwords, phone numbers, popular social networks like Google, Facebook and Twitter, and more.

### [93. How to Bring Live-Reloading Back to a Django And React Project](https://hackernoon.com/how-to-bring-live-reloading-back-to-a-django-and-react-project-ilf3ubm)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FpCJV1fObnCcoR8Gk6jvEHaFwleR2-bb2p25y9.jpeg?alt=media&token=ffd75310-4217-4c3d-b715-8f149df5ab27)
This article is a prequel of sorts to my earlier 110% Complete JWT Authentication with Django & React - 2020 article. That article covers how to get started with JWT authentication in a typical React and Django Rest Framework project, and it does that well enough. There's just one major annoyance with it - I couldn't figure out how to get live reloading working! So for every change made to the frontend, we had to shut down the dev server, rebuild the React bundle, and start it up again. Talk about tedious!

### [94. Micro-Frontends in 2023: The Complete Guide](https://hackernoon.com/micro-frontends-in-2023-the-complete-guide)
![](https://cdn.hackernoon.com/images/K19Ut5KCZFSiuWGZtFpWBYbdXH53-gw93ooj.jpeg)
The Micro Frontend style of architecture design does for the frontend of an application what microservices do for the backend.

### [95. Why Order in React Hooks Matters](https://hackernoon.com/why-order-in-react-hooks-matters)
![](https://cdn.hackernoon.com/images/LrlTQmoSCkNaSYh7rdFItbc5Yoz2-u693hux.jpeg)
React Hooks are a new feature in React 16.8. They are a powerful way to write stateful components. All this power comes at a cost, however.

### [96. React Functional Components are the future](https://hackernoon.com/react-functional-components-are-the-future)
![](https://cdn.hackernoon.com/images/FpKROxxtLBRmSsCCb4lxCS7LBVr2-8013a0u.jpeg)
React Functional Components grabbed all the attention after the introduction of Hooks. They sidelined Class Components to become the main hero of React apps.

### [97. How I Live Stream My Brain with Amazon IVS, a Muse Headband and React](https://hackernoon.com/how-i-live-stream-my-brain-with-amazon-ivs-a-muse-headband-and-react)
![](https://cdn.hackernoon.com/images/7GGjdbIpEWhSoNNMb3i5kpsuefF3-cab2hwt.jpeg)
This is the first time we've used React to broadcast live streaming our brain data

### [98. How to Build an Invoice PDF System Using React.js, Redux and Node.js](https://hackernoon.com/how-to-build-an-invoice-pdf-system-using-reactjs-redux-and-nodejs)
![](https://cdn.hackernoon.com/images/JWpNuLDeRsStgUHXtRorNSHgVkN2-t693sm6.jpeg)
Learn to build an Invoice PDF system with React.js, Redux, and Node.js. Set up, integrate, style UI, test, and deploy. GitHub repo included.

### [99. How To Send Emails with Nodejs and EmailJS Module](https://hackernoon.com/how-to-send-emails-with-nodejs-and-emailjs-module-dk1133dx)
![](https://cdn.hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-w915313g.jpeg)
It’s 2021 and JavaScript has taken over the development landscape. At this point there is a JavaScript library or framework for everything. So you have a few different options if you want to send emails directly from your browser side code. For example you can always just include your email handle in a link. If your users have their system set up correctly a simple click will open their email account with your email in the mailto: slot(aka send). However as a developer this seems less than ideal because it requires  that your users have the proper set up to handle the action. 

### [100. Advanced React Router V6 Techniques: Going Beyond the Basics](https://hackernoon.com/advanced-react-router-v6-techniques-going-beyond-the-basics)
![](https://cdn.hackernoon.com/images/Bf6xbPmhtTcARlzNXM2oktEZuh22-34b2nv9.jpeg)
Learn advanced React Router techniques to elevate your routing abilities. Discover how to handle 404 pages, create an active page indicator, and utilize hooks.

### [101. 7 Best UI Components Libraries and Frameworks for React.js in 2022](https://hackernoon.com/7-best-ui-components-libraries-and-frameworks-for-reactjs-in-2022)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-6i93jhh.jpeg)
Here, we'll cover the best UI components libraries and frameworks for React.js that you can follow and utilize in 2022.

### [102. How to Create a Modern Skeleton Loader in React to Improve User Experience](https://hackernoon.com/how-to-create-a-modern-skeleton-loader-in-react-to-improve-user-experience)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-mqg3sbm.jpeg)
Improve user experience with a skeleton loader in React. Mimic page layout with placeholder boxes for text and images while actual content loads.

### [103. How to Manage Reusable UI Components](https://hackernoon.com/how-to-manage-reusable-ui-components-iu1x32up)
![](https://cdn.hackernoon.com/images/tz1mk3yx7.jpg)
Just a few days ago we open-sourced the React components we use to build the bit.dev platform. 

### [104. My Top 5 Best Practices for ReactJs](https://hackernoon.com/my-top-5-best-practices-for-reactjs)
![](https://cdn.hackernoon.com/images/QepJZAyLUDcMpCXcZjnWeHJM7ad2-8893jy9.jpeg)
Howdy people, In this article we will be discussing the 5 best ReactJs practices that will help you simplify the building of great and high-performance ...

### [105. Mastering Monorepos: Organizing Component NextJS Libraries & Projects with NPM Workspaces](https://hackernoon.com/mastering-monorepos-organizing-component-nextjs-libraries-and-projects-with-npm-workspaces)
![](https://cdn.hackernoon.com/images/OaKbDySLt9XUEwmFIQVq3BBEYot1-3x93v88.jpeg)
Discover NPM Workspaces & Monorepos for efficient project management, empowering NextJS & Storybook integration in a unified repository.

### [106. Meet Solid: A Lightweight JavaScript UI Library that is Gaining in Popularity](https://hackernoon.com/meet-solid-a-lightweight-javascript-ui-library-that-is-gaining-in-popularity)
![](https://cdn.hackernoon.com/images/HMfDlkGVkoMk0WzhOX2zil9gTLj1-q3i335f.jpeg)
SolidJS uses fine-grained reactivity and avoids Virtual DOM but retains much of React's programming model with JSX, unidirectional flow, immutable interfaces...

### [107. Angular Vs. React: Choosing a Front-End Web Stack](https://hackernoon.com/angular-vs-react-choosing-a-front-end-web-stack)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-ss33oc0.jpeg)
Web development is an Art.

### [108. How to Upload an Image From React to the Rails API Using React-hook-form and Context API](https://hackernoon.com/how-to-upload-an-image-from-react-to-the-rails-api-using-react-hook-form-and-context-api)
![](https://cdn.hackernoon.com/images/mROvv4Q9VldLo9c7ybGDZ10ISmS2-wv93fop.gif.webp)
After reading this article, you should be able to create a React UI that allows you to use react-hook-form to upload an image to an API endpoint.

### [109. Creating a React Form Repeater Component: A Step-by-Step Guide](https://hackernoon.com/creating-a-react-form-repeater-component-a-step-by-step-guide)
![](https://cdn.hackernoon.com/images/react-code-displayed-on-a-software-developers-screen-g4txx8n60pzse14ylhht5lfc.png)
Learn how to create a React Form Repeater Component,

### [110. 7 Best Free Platforms To Learn React](https://hackernoon.com/7-best-free-platforms-to-learn-react-p01b378s)
![](https://cdn.hackernoon.com/images/uehDVtnVGYe0dhArlJa1buMOtFt1-p0835j8.jpeg)
React is a JavaScript library developed by Facebook for building modern applications. React takes care of the view layer and can be used to create both web and mobile applications.

### [111. On Recursion and Trampolining](https://hackernoon.com/on-recursion-and-trampolining-uxf3tvx)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FghNSk6l5TwN1Zm4sPpFRTGpklu93-8i1y3u4q.jpeg?alt=media&token=144ab738-a4b1-414a-b857-1ba659dc9a37)
Did you know that recursion can be optimized using a concept which works similar to the way how we jump on a  trampoline. 

### [112. How to Build a Newsletter Application with Email Automation via ReactJS and Firebase](https://hackernoon.com/how-to-build-a-newsletter-application-with-email-automation-via-reactjs-and-firebase-n5dn32a2)
![](https://cdn.hackernoon.com/images/otda32fo.jpg)
NB: I saw I had this tutorial in my draft for close to 2 years now, I just decided to post it.

### [113. React Hooks: The Difference Between useMemo and useCallback](https://hackernoon.com/react-hooks-the-difference-between-usememo-and-usecallback-5no3t0x)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FJzHuBnIPz7Z7biKI1IDfHxwifg63-57m3x6s.jpeg?alt=media&token=23ed49b8-072a-48c7-95da-dc6f92a7c3fd)
React library provides us two built-in hooks to optimize the performance of our app: useMemo & useCallback. At first glance, it might look like their usage is quite similar, so it can get confusing about when to use each. To clear that confusion, let’s dig in and understand the actual difference and the correct way to use them both.

### [114. How to Choose the Technology Stack for Your Web Application](https://hackernoon.com/how-to-choose-the-technology-stack-for-your-web-application-hm4t3yte)
![](https://cdn.hackernoon.com/drafts/133p3yle.png)
The right technology stack used for building a web application is a critical element of project success. The reason is pretty simple. The product creation doesn’t only imply making an outstanding user interface design and ensuring high usability. It is also about delivering a stable solution that works as intended and adds value to users. 

### [115. How to Deploy a React App to Heroku in 5 Minutes in 5 Easy Steps](https://hackernoon.com/how-to-deploy-a-react-app-to-heroku-in-5-minutes-in-5-easy-steps)
![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-jw53mno.jpeg)
Deployment of a React app on Heroku is a way of hosting an application on a server, and the server provides everything to keep the app live on the internet

### [116. An Important Lesson About React Hooks](https://hackernoon.com/an-important-lesson-about-react-hooks)
![](https://cdn.hackernoon.com/images/shN9bGT9UTa4Q1e20wtJrN6azMA3-pya3ilc.jpeg)
The react hooks are regular functions.

### [117. Higher Order Components (HoCs) in React ](https://hackernoon.com/higher-order-components-hocs-in-react)
![](https://cdn.hackernoon.com/images/ZHAz9wv9l3eZzNLiVyAUACoJBo03-itc30oi.jpeg)
Higher Order Components are actually a design pattern derived from the compositional nature of React, which allows us to derive components...

### [118. Execute Multiple Commands On Parallel Terminal Tabs With A Simple Bash/Apple Script ](https://hackernoon.com/execute-multiple-commands-on-parallel-terminal-tabs-with-a-simple-bashapple-script)
![](https://cdn.hackernoon.com/images/JKdKyQvIDYXgoO2zfYAgaimo6qH2-9sb3uu8.jpeg)
Are you frustrated to run same scripts again & again before resuming your work?? Here is a simple solution to automate starting those scripts before you start.

### [119. Learn How to Create a Dynamic PDF Generator with React](https://hackernoon.com/learn-how-to-create-a-dynamic-pdf-generator-with-react)
![](https://cdn.hackernoon.com/images/m0lHZxJFuqhBFL6Q8Csl4Zdjzf12-0b93zfa.jpeg)
Learn how to generate dynamic PDFs by taking inputs from user. Some of the use-cases include generating invoices, resumes, reports based on data.

### [120. Gatsby.js vs. Next.js: The Best React Framework and Its Use Cases](https://hackernoon.com/gatsbyjs-vs-nextjs-the-best-react-framework-and-its-use-cases)
![](https://cdn.hackernoon.com/images/ANXM52c6bza87cFs8uIGa0BmM9v1-a063966.jpeg)
Gatsby.js vs. Next.js: Gatsby.js is better for static websites, while Next.js is better for dynamic or hybrid multi-user websites.

### [121. Optimizing React Native Project Structure: The Modular Architecture Approach](https://hackernoon.com/optimizing-react-native-project-structure-the-modular-architecture-approach)
![](https://cdn.hackernoon.com/images/raD3IjEsJBWIqwoxcjk2om7YGHm1-jai3bzh.jpeg)
Streamline React Native projects with modular architecture for better organization and efficiency."

### [122. Who said SOLID is applicable only in OO languages? Here's how you can do it in Javascript!](https://hackernoon.com/who-said-solid-is-applicable-only-in-oo-languages-heres-how-you-can-do-it-in-javascript-yyyo3590)
![](https://cdn.hackernoon.com/drafts/uk10335cm.png)
SOLID is five design principles intended to make software designs more understandable, flexible, and maintainable. It helps us to think about the right way to build a software system

### [123. What Software Development Stack to Build on in 2022?](https://hackernoon.com/what-software-development-stack-to-build-on-in-2022)
![](https://cdn.hackernoon.com/images/aBBfgZPPZyb0YobTc0dCp6i6p7V2-fx134v7.jpeg)
It’s impossible for teams to make the most out of their development effort without the right tools. Here is the best software development stack for 2022.

### [124. 10 Best Practices for Every React Developer](https://hackernoon.com/10-best-practices-for-every-react-developer)
![](https://cdn.hackernoon.com/images/B9T1IUJcMIUtnDyj3ZT2HrbhQmj1-va93p4o.jpeg)
React Best Practices, How to get the most out of React library and what steps you should take.React is one of the most popular front-end libraries for JS

### [125. Awesome React: How I Created a Sleek Parallax Effect ](https://hackernoon.com/awesome-react-how-i-created-a-sleek-parallax-effect)
![](https://cdn.hackernoon.com/images/3FnIKHGgbNVQq1IJMsgvsFiWteK2-t893igw.jpeg)
How to create a sleek parallax effect without adding dependencies

### [126. Embedding Phaser3 Games into  React 18 Function Components with useEffects](https://hackernoon.com/embedding-phaser3-games-into-react-18-function-components-with-useeffects)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-g792hi9.jpeg)
At its simplest implementation, you can use this pattern to add Phaser3 Games and treat them like a GIF animation on steroids.

### [127. React Hooks 101: useState and useEffect](https://hackernoon.com/react-hooks-101-usestate-and-useeffect-diay36zb)
![](https://cdn.hackernoon.com/drafts/xp3et2dyc.png)
React components are simply functions. Some are created with classes, better known as stateful and / or class components, and the others are created with functions only, also known as stateless and/or functional components.

### [128. How to Build a React Chat App](https://hackernoon.com/how-to-build-a-react-chat-app)
![](https://cdn.hackernoon.com/images/chatbot-app-clc8nr6nj000001s6eel4a0b4.png)
this tutorial walks through the process of building a react chat application using the MinChat chat sdk and React.js .

### [129. Is There a High Demand for React Programmers?](https://hackernoon.com/is-there-a-high-demand-for-react-programmers-lm2737sx)
![](https://cdn.hackernoon.com/images/Y76EDykTOcVA82Su65bt4Ms454W2-8t8x35uk.png)
React.js is one of the most demanding frameworks on the market; it is now used by 31.3 percent of all professionals globally. Netflix, PayPal, eBay, Airbnb, and other leading IT companies utilise the tool to develop scalable, easy-to-maintain systems. Why are corporations so interested in implementing React.js? 

### [130. Building Engaging Real-Time Data Visualizations In React With Highcharts](https://hackernoon.com/building-engaging-real-time-data-visualizations-in-react-with-highcharts)
![](https://cdn.hackernoon.com/images/lmcwhIPXHyPIgqoOoDrA9xd8umf1-dd9313y.jpeg)
Learn to create real-time charts in React with Highcharts and WebSocket. Includes setup guide, code examples, and GitHub repo for quick experimentation.

### [131. Implement Authentication & Security Using SuperTokens in Your React and HarperDB App](https://hackernoon.com/how-to-add-authentication-and-secure-harperdb-apis-using-supertokens-in-your-react-app)
![](https://cdn.hackernoon.com/images/tVmgy1BFDcZK1c7Ty90Zue1TAN93-gfa2i43.jpeg)


### [132. React Hooks In Depth Part #1: Introduction](https://hackernoon.com/react-hooks-63192d1d)
![](https://cdn.hackernoon.com/images/ssoy2gs8.jpg)
Note: This is the first article in a series of articles where we will cover React Hooks in Depth and try to understand their usage.

### [133. Implement Password Validation With Strength Meter From Scratch With React Hooks](https://hackernoon.com/implement-password-validation-with-strength-meter-from-scratch-with-react-hooks)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-owb3peb.jpeg)
Security is a priority when building apps and you want to let users know how strong their passwords are during sign up while giving good user experience.

### [134. How to Secure User Authentication in React With Clerk](https://hackernoon.com/how-to-secure-user-authentication-in-react-with-clerk)
![](https://cdn.hackernoon.com/images/s6Oqrc0EZkg4kONGviNcpShG3T12-dn333q5.jpeg)
Learn how to integrate Clerk authentication in a React app. This tutorial guides you through setting up authentication and styling with TailwindCSS.

### [135. How To Create a Static, Personal Website for Less Than $1 a Month](https://hackernoon.com/how-to-create-a-static-personal-website-for-less-than-$1-a-month)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-pt832ed.jpeg)
 The goal of this post is to show you how you can create your own static personal website for under $1 a month.

### [136. The Ugly Side of React Hooks](https://hackernoon.com/update-react-request-for-comment-to-the-ugly-side-of-react-hooks-8l3b3eha)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F4p7fglDaoVNMZqZvIciuHwFTkC52-v61e3tbh.jpeg?alt=media&token=97486381-8d9a-4de2-a40c-4e49eed61d71)
In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

### [137. Why More Developers Should Shift to Gatsby ](https://hackernoon.com/thinking-in-gatsby-way-series-overview-to-build-a-static-web-application-ux4f32bc)
![](https://cdn.hackernoon.com/images/lm3v32gv.jpg)
Gatsby framework deserves you investing time to learn, this article will give you answers don’t exist elsewhere.

### [138. How I Built Local-First Apps with React Native + RxDB (and Why Your App Probably Needs This Too)](https://hackernoon.com/how-i-built-local-first-apps-with-react-native-rxdb-and-why-your-app-probably-needs-this-too)
![](https://cdn.hackernoon.com/images/FPQfbJY2fYbkpykIFnuaI2Xsd9v2-ln039lf.png)
Local-first apps process data locally, sync it when you can. This means users stay happy, and you don’t get midnight “the app’s broken” calls.

### [139. Creating Custom React Native Templates: A Step-by-Step Guide](https://hackernoon.com/creating-custom-react-native-templates-a-step-by-step-guide)
![](https://cdn.hackernoon.com/images/raD3IjEsJBWIqwoxcjk2om7YGHm1-xc93b0r.png)
Learn to create custom React Native templates for efficient, error-free, and streamlined mobile app development.

### [140. Create a Scalable ReactJs Web App in 10 minutes- for beginners](https://hackernoon.com/create-a-scalable-reactjs-web-app-in-10-minutes-922gf30n5)
![](https://cdn.hackernoon.com/images/gq683x1o.jpg)
React has become very popular as a UI layer, but there doesn’t appear to be a clearly proven best practice for the state management.

### [141. TemplatesKart: Is this the Best Chakra UI Component Library?](https://hackernoon.com/templateskart-is-this-the-best-chakra-ui-component-library)
![](https://cdn.hackernoon.com/images/bmUxO1baVGfJI3QTDkGnShmlyfc2-zsf3gpw.png)
Responsive chakra ui components, templates and projects. Production-ready hand crafted chakra Components and templates. Deliver your projects faster.

### [142. How To Connect AWS Amplify with React Native Application](https://hackernoon.com/how-to-connect-aws-amplify-with-react-native-application-8t1p3twj)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F7hNScric1WcTcZqxOlzpN8s54n43-r4fd3jtg.jpeg?alt=media&token=f1535efc-38e0-4419-b96c-ef9b1b91d818)
AWS Amplify is a framework that lets you develop a web or mobile application quickly, by accessing the backend cloud services offered by AWS. In this article, we are going to learn how to use AWS Amplify in React Native by building a fully functional login and registration flow.

### [143. Is React leading the Infrastructure As Code Movement?](https://hackernoon.com/react-for-infrastructure-n84n2dw7)
![](https://cdn.hackernoon.com/images/e75t2dsn.jpg)
What is "Infrastructure as Code"? If someone checks a bunch of YAML files into a Git repository, do they suddenly become code? That seems more like "Infrastructure as Files" to me. I suppose that's better than infrastructure as a gaggle of shell scripts and some commands run by hand in the middle of the night in a coffee-fueled haze, but it is a far cry from code. How about a system to define infrastructure that really is like code?

### [144. A Detailed Guide to the useEffect Hook in React](https://hackernoon.com/a-detailed-guide-to-the-useeffect-hook-in-react)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-ma93pmc.png)
A complete guide for using React's useEffect hook

### [145. How to Make the Floating Balloons 🎈Effect in ReactJS](https://hackernoon.com/how-to-make-the-floating-balloons-effect-in-reactjs)
![](https://cdn.hackernoon.com/images/cdKDtiFbXAdKDehLAz7YsIaD9j62-3w93nl1.jpeg)
Create custom floating balloons in ReactJS/NextJS. Supports balloon pop animation and sound. Custom count, msg, loop, multiple colors, and more.

### [146. Axios or Fetch: What Is Better for HTTP Requests?](https://hackernoon.com/axios-or-fetch-what-is-better-for-http-requests-om1n3u4o)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FZcvfyVxI3KNhEQxQ9H6wfvhdWlW2-tr6a3utu.webp?alt=media&token=c6160efd-fffd-4e73-89c2-257928f0fb83)
Ever wondered why developers are going for Axios over fetch? As we are aware both are the means to deal with HTTP or XMLHttp requests, Both are capable of making all types of API calls (get, post,put.. etc.). Both are based on Promise API which is native to ES6. But what are the major points to be noted?

### [147. How To Improve React App Performance with SSR and Rust 
[Part I: SSR]](https://hackernoon.com/how-to-improve-react-app-performance-with-ssr-and-rust-part-i-ssr-b75x36ed)
![](https://cdn.hackernoon.com/drafts/ma2s3665.png)
Server-side rendering (SSR) is technique when content for a web page is rendered on the server using JavaScript.

### [148. React 18 Suspense fetch data from a headless CMS](https://hackernoon.com/using-suspense-in-react-18-to-fetch-data-from-a-headless-cms)
![](https://cdn.hackernoon.com/images/Jxe9yCMk4BW1cZd1hs3AlUhayZv1-4ba3txh.jpeg)
React 18 Suspense fetch data from a headless CMS

### [149. Get Started Building your First MERN Application - Step by Step](https://hackernoon.com/get-started-building-your-first-mern-application-step-by-step)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-6x930s6.jpeg)
I am sure that when you first begin learning full-stack web development using the MERN stack, you will have questions.

### [150. Creating a Todo App with NextJs & Firebase](https://hackernoon.com/creating-a-todo-app-with-nextjs-and-firebase)
![](https://cdn.hackernoon.com/images/YlcWytkfRIY64lSLBbuvErBdoUg2-4bo3i86.jpeg)
Hey devs, welcome to this tutorial; we will build a real-time Todo App with React, NextJs + Firebase.

### [151. Cats Taking Over: How to Make a Random Cat Image Generator With React and Cat API](https://hackernoon.com/cats-taking-over-how-to-make-a-random-cat-image-generator-with-react-and-cat-api-ke3s3wrg)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FU6xUV5JDfIempveh8o2Whnpj8qh2-wt283wxf.jpeg?alt=media&token=a328d26a-7056-421c-9adf-0b3173dc87a4)
Easy guide to filling your life with (more) internet cats by making a random cat image generator with React and Cat API. If you prefer video format then I have already made a video on YT:

### [152. Guide to React Suspense: From Code Splitting to Data Fetching](https://hackernoon.com/the-evolution-of-react-suspense-from-code-splitting-to-data-fetching)
![](https://cdn.hackernoon.com/images/TU75aLEAtQahH1ixBhcEmzyyikA2-zy93xia.jpeg)
Suspense is behind lazy component, it helps you to reduce boilerplate and optimize SSR. In this guide, we'll discover how it works and how to use it.

### [153. 5 JavaScript Trends To Watch Out In 2020](https://hackernoon.com/5-javascript-trends-to-watch-out-in-2020-x92c3ykt)
![](https://cdn.hackernoon.com/images/9z243ynr.jpg)
You think JavaScript will fade away in 2020, wait till you read this study! 

### [154. Effortless Data Fetching with React Suspense](https://hackernoon.com/effortless-data-fetching-with-react-suspense)
![](https://cdn.hackernoon.com/images/7hNScric1WcTcZqxOlzpN8s54n43-2893t4p.jpeg)
Learn how React Suspense enhances user experience by simplifying asynchronous operations in app development. Faster, more responsive interfaces explained.

### [155. 10 React Admin Dashboard Templates For Your Next Website](https://hackernoon.com/10-react-admin-dashboard-templates-for-your-next-website-bb4a3yi7)
![](https://cdn.hackernoon.com/images/q81nz3yf2.jpg)
React is one of the most popular tools found in the web development library, but like anything you need to learn how to use it properly. React is used with native. The main purpose is to bring the power to react to native mobile app development.

### [156. Learning ReactJS From Scratch](https://hackernoon.com/learning-reactjs-from-scratch-pe153ubv)
![](https://cdn.hackernoon.com/images/z2xg2bpo.jpg)
React is a product of Facebook. It is a very flexible and efficient JavaScript library for building interactive user interfaces. React forms the view layer of the web application which is technically the frontend. This makes it easier to make web applications with essential features such as reusable components, state management, DOM rendering and many more which are explained later. React is mainly used in making single-page web applications. In this article we’ll see the fundamentals of react library and why is it so popular.

### [157. ReactJS Pagination Tutorial: Building from Scratch](https://hackernoon.com/reactjs-pagination-tutorial-building-from-scratch-video-tr4g316w)
![](https://hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-mg9p317b.jpeg)
Create pagination component from scratch in ReactJS. Pagination component are of two types, one loads items vertically and one display items with page numbers 

### [158. Resolving the FOUC Issue in Next.js App Routes](https://hackernoon.com/resolving-the-fouc-issue-in-nextjs-app-routes)
![](https://cdn.hackernoon.com/images/P2cZnKavUpaBLHV8hgggzZsi0TH2-5w830z8.jpeg)
Learn how to diagnose and fix Flash of Unstyled Content (FOUC) in Next.js 14 with our step-by-step guide.

### [159. Top Startups and Enterprises Using ReactJS ](https://hackernoon.com/top-startups-and-enterprises-using-reactjs-j2173t42)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FJErJXky5MfaAbQdfTlFCmcUKbGG2-h4743u8j.jpeg?alt=media&token=4aae7eb8-db09-4ece-bff1-19794d1ee202)
React is a framework released by Facebook for creating Single Page Applications (SPA). What is a Single Page Application? Most web applications are traditionally server-side applications. The server holds the business logic, stores data, and renders the website to the client. When a client clicks on a link, it sends a request to the server, and the server will handle this request and send back a response with HTML code which the browser will render and be viewed by the user. 

### [160. Build a Fully Functional Youtube Clone Using Firebase, FFmpeg, And React. Part 1](https://hackernoon.com/build-a-fully-functional-youtube-clone-using-firebase-ffmpeg-and-react-part-1)
![](https://cdn.hackernoon.com/images/iHKErLv7KAegkfw3m5jwsrsy3J63-n8g3n0i.jpeg)
An exact clone of youtube with all functionalities from View count to Subscribe to everything (Without Youtube Api) Using Firebase, FFmpeg, And React

### [161. Top 28 Free and Paid Courses and Tutorials to Learn React](https://hackernoon.com/top-30-free-and-paid-courses-and-tutorials-to-learn-react-in-2021)
![](https://cdn.hackernoon.com/images/N0ENUd29UdNJCFcl7GnmZHdk2fA2-kc039c2.jpeg)
Check the list of the most popular platforms to learn React. Here is a list of YouTube channels, teaching marketplaces like Udemy for all-level developers.

### [162. Using Client Components to Display React Server Components](https://hackernoon.com/using-client-components-to-display-react-server-components)
![](https://cdn.hackernoon.com/images/4bJFgJbS5WfBSw6S3fP1fTBHqKf1-hr92flv.jpeg)
This article discusses how to pass React Server Components as props to Client Components and why you might want to do so.

### [163. The Lessons We Learned From Moving to Recoil.js  ](https://hackernoon.com/the-lessons-we-learned-from-moving-to-recoiljs)
![](https://cdn.hackernoon.com/images/QNyLqFXGvYRXJI4JG991mDDnbcC2-zja3osk.jpeg)
The many tips and tricks that we learned when we switched to Recoil.js and how the change affected how we handled React state management for our product 

### [164. Connecting React 17, TypeScript, Tailwind CSS, NextJS Into Developers Friendly Application](https://hackernoon.com/connecting-react-17-typescript-tailwind-css-nextjs-into-developers-friendly-application-cj283wpv)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FWvW28jEl4jUjfwJehRmZlkXmrQw2-7x5030lw.png?alt=media&token=8365cabe-bae3-4af9-94b1-3b7d4264a16f)
NextJS is becoming a de facto framework for modern web development. In this article we will build a starter repo that you can use for every new project.

### [165. Top Advanced Data Grids for React](https://hackernoon.com/top-advanced-data-grids-for-react)
![](https://cdn.hackernoon.com/images/RZ6M8wddNoQliZd5obFbiLEw8e42-my034zt.jpeg)
This article focuses on ready-to-use React data grid components, which provide high-demand features out-of-the-box.

### [166. 14 GitHub Repositories to Ace JavaScript Interviews 🎯 🚀](https://hackernoon.com/14-github-repositories-to-ace-your-javascript-interviews)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-jj03gve.jpeg)
Finding a developer job in the current tech market can be a challenge, especially for beginners.

### [167. React App Configuration with TypeScript and Webpack](https://hackernoon.com/react-app-configuration-with-typescript-and-webpack-zy1q354b)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-a01k35n8.jpeg)
A step by step guide on how to create a React project from scratch, with TypeScript and Webpack.

### [168. How to Create Dynamic Stock Charts in React.js](https://hackernoon.com/how-to-create-dynamic-stock-charts-in-reactjs)
![](https://cdn.hackernoon.com/images/qtmJE3qxC1R4I6iIAxutfHvgY9s1-vz82397.png)
Learn how to create dynamic stock charts in React.js using Yahoo Finance API and react-chartjs-2. Perfect for stock screeners and stock price prediction tools. 

### [169. JavaScript Frameworks for Frontend and Backend Developers [Top Ten Picks]](https://hackernoon.com/10-of-the-most-popular-javascript-libraries-for-frontend-and-backend-development-ph1h0326n)
![](https://cdn.hackernoon.com/drafts/0g1jr323v.png)
There is no doubt that JavaScript is now the #1 programming language in the world and also the undesputed king of web development. If you want to become a web developer a good knowledge of JavaScript and various, popular JavaScript web development framework is very important for you.

### [170. Crucial React Design Patterns Every Dev Should Know](https://hackernoon.com/crucial-react-design-patterns-every-dev-should-know)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-b493p9s.jpeg)
Checkout the various React Design Patterns to use in building React components that are extensible and reusable for your next React project.

### [171. Protect Your Application by Hiding API Keys and Tokens in React - Beginners guide](https://hackernoon.com/protect-your-application-by-hiding-api-keys-and-tokens-in-react)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-4s93rlj.jpeg)
Discover how to hide your API keys and tokens in React using environment variables with Vite and nodejs. Protect the security of your services.

### [172. Having (More) Fun Creating Components with the Lightning Design System for React](https://hackernoon.com/having-more-fun-creating-components-with-the-lightning-design-system-for-react)
![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-ue0376l.jpeg)
Check out how easy it is to create a custom component using the Lightning Design System for React and some very detailed blueprints

### [173. How To Set Up Firebase Passwordless Authentication With A React Web Application](https://hackernoon.com/how-to-set-up-firebase-passwordless-authentication-with-a-react-web-application)
![](https://cdn.hackernoon.com/images/cF7mu2NOvjhw93apYPWBBmsndEM2-7cf3we1.gif.webp)
A tutorial describing the steps to implement Firebase passwordless authentication with a React web application.

### [174. Higher Order Components (HOC) In React: Beginners Guide](https://hackernoon.com/higher-order-components-hoc-in-react-beginners-guide-2l13335m)
![](https://hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-0367373o.jpeg)
In this tutorial, we are going to learn what is higher-order components, the syntax of higher-order components, and how to use HOC in React.

### [175. Compilation of the Most Common React.js Interview Questions](https://hackernoon.com/compilation-of-the-most-common-reactjs-interview-questions)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-x3032i7.webp)
A comprehensive collection of React technical questions to help you prepare for frontend interviews.

### [176. Struggling to Pick a Charting Library for React? These 10 Options Cover It All](https://hackernoon.com/struggling-to-pick-a-charting-library-for-react-these-10-options-cover-it-all)
![](https://cdn.hackernoon.com/images/RZ6M8wddNoQliZd5obFbiLEw8e42-iqa3apt.jpeg)
Explore 10 powerful open-source charting libraries for React to help you visualize complex business data, dashboards, timelines, and more.

### [177. 5 Reasons to Convert from React to Next.js](https://hackernoon.com/5-reasons-to-convert-from-react-to-nextjs)
![](https://cdn.hackernoon.com/images/eQHzh6rz7ETBHLjs0KzCl1Dooqp2-c993qjb.jpeg)
React itself is a great solution already. But why are there many guides on "How to convert React to Next.js"? Let's find out why and when Next.js is better.

### [178. How I Built a Simple Keystroke Application for Windows](https://hackernoon.com/how-i-built-a-simple-keystroke-application-for-windows)
![](https://cdn.hackernoon.com/images/3vn6gVC40lf9EZovJoHLxSOK5Gr1-b893sf5.jpeg)
I'm so excited to show you how I built a keystroke application for Windows that was inspired by KeyCastr.

### [179. A Compilation of the Best Full-Stack Clones: Amazon, Whatsapp, Netflix, Spotify & More](https://hackernoon.com/a-compilation-of-the-best-full-stack-clones-amazon-whatsapp-netflix-spotify-and-more)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-ot931sg.jpeg)
Explore a world of web development innovation with full-stack clones of popular apps, from Amazon to WhatsApp. Discover endless possibilities in tech!

### [180. How to Get a User's Location in React.js: A Practical Guide](https://hackernoon.com/how-to-get-a-users-location-in-reactjs-a-practical-guide)
![](https://cdn.hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-nnb3pcj.jpeg)
In this article, we will take you through step-by-step instructions on how you can get the user's location using modern web technologies such as React.

### [181. A Beginner's Guide To Using React Native Camera](https://hackernoon.com/a-beginners-guide-to-using-react-native-camera-aj243xwn)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMJpFVUEItkSdoh38rYo60VT7RfH3-av1b28oq.png?alt=media&token=a858f5fb-6631-47ac-b2e6-0e6d22c6e00c)
Capturing Memories! Camera in our smartphones allows us to quickly capture amazing moments in our lives. Moments which we most likely can never return to, but we can safely capture them up in the form of photos and videos. 

### [182. The Top React Spreadsheet Tools](https://hackernoon.com/the-top-react-spreadsheet-tools)
![](https://cdn.hackernoon.com/images/bJmCjBFKDCdFyOp2WyArQwy7BiF3-cp034no.png)
Explore the top React spreadsheet tools and their notable features for your applications in this review of leading options.

### [183. How a Beginner Created and Deployed a WebApp in 4 Days](https://hackernoon.com/how-a-beginner-created-and-deployed-a-webapp-in-4-days)
![](https://cdn.hackernoon.com/images/T6nDKzWN05fnNfpB9Rxe0nXl15w1-5u1375b.jpeg)
How I created and deployed a WebApp in 4 days after learning to code.

### [184. React-Redux Flow: Detailed Guide](https://hackernoon.com/react-redux-flow-detailed-guide-zm2k3un3)
![](https://cdn.hackernoon.com/drafts/v9i307e.png)
State. That’s one word behind Redux’s existence in the React framework. But wait a minute what is the state of an application, and why does it matter in single-page applications(SPA). Oh, single-page applications? What are those too? Let’s back it up a bit and take it one step at a time.

### [185. Protecting Your React.js Source Code with Jscrambler](https://hackernoon.com/protecting-your-reactjs-source-code-with-jscrambler)
![](https://cdn.hackernoon.com/images/1JNoLAkx1ZO5O8qO5dcdNjh6RQw1-0oa3ktl.jpeg)
In this step-by-step guide, you'll learn how to protect your React.js application with Jscrambler to prevent code theft and reverse engineering.

### [186. A Guide to Running Ganache in a Browser](https://hackernoon.com/a-guide-to-running-ganache-in-a-browser)
![](https://cdn.hackernoon.com/images/YpGUqiNYo2Sl2tRp2O2FS0ePM0V2-gb93u7c.jpeg)
Learn how to run a local blockchain instance in your browser to test the functionality of your web3 dapps using Ganache, Truffle and a simple React frontend.

### [187. How to Develop a React Native Library for Telegram’s TDLib: Part 1](https://hackernoon.com/how-to-develop-a-react-native-library-for-telegrams-tdlib-part-1)
![](https://cdn.hackernoon.com/images/raD3IjEsJBWIqwoxcjk2om7YGHm1-vd73ed5.png)
Getting started with Telegram TDLib in React Native: Exploring authorization, user profile retrieval, and the first steps into native code.

### [188. Unravelling The Suspense About Render-As-You-Fetch In React](https://hackernoon.com/unravelling-the-suspense-about-render-as-you-fetch-in-react)
![](https://cdn.hackernoon.com/images/x0dSS5DFvWbQk7hcHum8ZZKg3vb2-coa3n73.jpeg)
Render-as-you-fetch is the latest data fetching pattern in React. It leverages the React Suspense capabilities to provide a smooth developer & user experience.

### [189. Why You Should be Learning about the Remix Framework ](https://hackernoon.com/why-you-should-be-learning-about-the-remix-framework)
![](https://cdn.hackernoon.com/images/YhQrn2uriTN9SEA31DxtfMz7glu1-nla3yql.jpeg)
Are you looking to build an app with minimal effort? With Remix, you can do just that! Learn how this relatively new web framework compares.

### [190. How to Use InertiaJS to Build a Single Page Application Without an API](https://hackernoon.com/how-to-build-a-single-page-application-without-api-using-inertiajs)
![](https://cdn.hackernoon.com/images/pviEc2TFCIOF7fL5z3BcpbGQE5o2-23036mq.jpeg)
InertiaJS is a routing library written in Javascript that lets you build single-page applications without using an API in the process, saving lots of time.

### [191. Mastering useReducer for Complex State Management](https://hackernoon.com/mastering-usereducer-for-complex-state-management)
![](https://cdn.hackernoon.com/images/illustrate-react-code-displayed-on-a-desktop-screen-mn4qaqlyfyrvdue1zthq7mif.png)
Complex state management in ReactJS with React's useReducer() explained with beginner as well as advanced examples.

### [192. React State vs Props: Understanding the Difference](https://hackernoon.com/react-state-vs-props-understanding-the-difference)
![](https://cdn.hackernoon.com/images/SS37gCNcHuOiFreNUNVPCPiYFb83-zp93kn6.jpeg)
React Props & State two terms beginners often confused by their functionalities. Here is a detailed comparison between React State vs Props you need to know.

### [193. Building a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, Amplication and More. ](https://hackernoon.com/creating-a-full-stack-amazon-clone)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-tb931u7.jpeg)
This Amazon Clone features a wide range of technologies and functionalities, including Next.js, Tailwind CSS, Zustand, Typescript, Prisma and Amplicaiton

### [194. MUI (Material-UI) Releases v5 of its Core React Components](https://hackernoon.com/mui-material-ui-releases-v5-of-its-core-react-components)
![](https://cdn.hackernoon.com/images/MR29WSibpKb19UivRTcjcGWkGyn1-a2035cq.png)
MUI (Material-UI) releases v5 of its core React components - brings advanced styling and customization features, new components, and more.

### [195. Custom React Hook For Tracking Clicks Outside of the Component](https://hackernoon.com/custom-react-hook-for-tracking-clicks-outside-of-the-component-si9n36xs)
![](https://images.unsplash.com/photo-1519810410960-332413a4e48f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
react-cool-onclickoutside is a React hook to trigger callback when user clicks outside of the target component(s) area. It's a useful logic for UI interaction design (IxD) like dismiss a dropdown menu, modal or tooltip etc. Help you guys ❤️ it.

⚡️ Live demo: https://react-cool-onclickoutside.netlify.app

### [196. 4 Tips & Tricks That Will Make Your ReactJS Code More Clear and Reliable](https://hackernoon.com/4-tips-and-tricks-that-will-make-your-reactjs-code-more-clear-and-reliable)
![](https://cdn.hackernoon.com/images/jbvDqjDxpkThWOWvBvlJNkaqIKl1-nm02fac.jpeg)
Here is a list of amazing tricks that you can use to improve your React application quickly without changing too much about your processes or too much effort. 

### [197. React Internals: Basic Concepts and Notes](https://hackernoon.com/react-internals-basic-concepts-and-notes-7v2f350t)
![](https://cdn.hackernoon.com/images/nuST4U0AkMa1imTW9yZi0UhVAay1-mjv35mb.jpeg)
An introductory lesson to React internals based on React Fiber.

### [198. How I Made a YouTube Video With React](https://hackernoon.com/how-i-made-a-youtube-video-with-react)
![](https://cdn.hackernoon.com/images/oUS9HxHnMOackh1UhEDoXjMokWv1-qgd2efa.png)
I wanted a good animation for my first YouTube video. But with no experience with tools like After Effects, what can I do? React JS to the rescue!

### [199. Improve Your Application Performance With React Hooks](https://hackernoon.com/improve-your-application-performance-with-react-hooks-7r3d35p1)
![](https://hackernoon.com/images/7FWGsynngiU89ohyitGw0qxV0L42-f82a28xg.jpeg)
React Hooks are a powerful technique liked by many developers. They allow the use of React features like state managing or the use of lifecycle methods.

### [200. Understanding Chakra UI](https://hackernoon.com/understanding-chakra-ui)
![](https://cdn.hackernoon.com/images/1LFWV1HmcxgIDvjV1Yqt5rcv93l2-x1a38ve.jpeg)
In this article, we will discuss what Chakra UI is, its core features and capabilities and by the end you should be able to decide if Chakra UI is a good fit.

### [201. Component-based Website Development with React and the Cosmic JS CMS](https://hackernoon.com/component-based-website-development-with-react-and-the-cosmic-js-cms-828213d48656)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-fa82rzg.jpeg)
A common approach to website development is to build components that can be reused across different web pages. The benefit to this approach is that you end up doing less duplicate work by managing the components rather than managing duplicate content across different pages. Popular JavaScript frameworks like React, Vue and Angular utilize this concept on the application code level to much success. How can we benefit from this approach on the content management level?

### [202. How to Create and Publish Your First NPM Package](https://hackernoon.com/how-to-create-and-publish-your-first-npm-package)
![](https://cdn.hackernoon.com/images/MM8znQHHo5PO8CucT9ftiFOGCOD2-7893usd.jpeg)
A Comprehensive Guide To Creating and Publishing Your First NPM Package

### [203. Two Decades of Transformation: A Timeline of How JavaScript Revolutionized Software Development](https://hackernoon.com/two-decades-of-transformation-a-timeline-of-how-javascript-revolutionized-software-development)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-2h93n03.jpeg)
Explore the journey of JavaScript's evolution and its impact on software development. Witness the solutions that have reshaped the landscape.

### [204. How to Write Tests for React - Part 1 [Beginner's Guide]](https://hackernoon.com/how-to-write-tests-for-react-beginners-guide-4299302l)
![](https://images.unsplash.com/photo-1516534775068-ba3e7458af70?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Writing React Test with react recommended libraries — Jest & React Testing Library for complete beginners.

### [205. Enhancing Password Security and Recovery with Next.js 14 and NextAuth.js](https://hackernoon.com/enhancing-password-security-and-recovery-with-nextjs-14-and-nextauthjs)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-jb833fd.jpeg)
Learn to set up a secure and user-friendly system for password recovery in Next.js, complete with token verification and email notifications.

### [206. Migrating a 50K SLOC Flow + React Native app to TypeScript](https://hackernoon.com/migrating-a-50k-sloc-flow-react-native-app-to-typescript-c91aj3ton)
![](https://cdn.hackernoon.com/drafts/1a10e32pt.png)
Photo by Sergey Pesterev on Unsplash



### [207. Firebase Pagination Using StartAfter() and Nextjs](https://hackernoon.com/firebase-pagination-using-startafter-and-nextjs)
![](https://cdn.hackernoon.com/images/aMpkPkutiaS2ZIAH4OqpDnzLFau1-1w93syx.jpeg)
Firebase v9 Paging with StartAfter() + Nextjs 13.x.x

### [208. React Context API login example using FaceIO for face authentication.](https://hackernoon.com/react-context-api-login-example-using-faceio-for-face-authentication)
![](https://cdn.hackernoon.com/images/htVjKcTLFYes7Isse0vYEolH3GF2-v292q0a.jpeg)
React.js, typescript tutorial showing how to add facial recognition to a website using FaceIO.

### [209. Top 15 Ideas for React Apps that Web Devs Can Build in 2022](https://hackernoon.com/top-15-ideas-for-react-apps-that-web-devs-can-build-in-2022)
![](https://cdn.hackernoon.com/images/9ln0OHvfuhgKBqQIuNFg8jiCzrI2-t4337z8.jpeg)
Choose one of these React project ideas and build your next React application in 2022! 

### [210. MomentJS Tutorial -The Ultimate Guide to Moment.JS](https://hackernoon.com/momentjs-tutorial-the-ultimate-guide-to-momentjs)
![](https://cdn.hackernoon.com/images/QUCwfIDJx7PKhBu03In0tMSPA7K2-ug037jt.jpeg)
Moment.js tutorial shows how to work with data and time in JavaScript with the Moment.js module.

### [211. Blazor vs React: Why This .NET Architect Finally Picked a Side](https://hackernoon.com/blazor-vs-react-why-this-net-architect-finally-picked-a-side)
![](https://cdn.hackernoon.com/images/jkY3SLOd0XcNDShAKELjiv22rBy1-xp03dq4.png)
A seasoned .NET architect compares Blazor and React, from npm security risks to .NET 10 performance, and explains when each framework makes sense.

### [212. How to Build Real-time Voice Search on React](https://hackernoon.com/how-to-build-real-time-voice-search-on-react-ap1m3eqs)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FgrPs3gTSVlSmvmiQa34yixc4FMe2-342328ad.jpeg?alt=media&token=394e730a-96c2-42b6-b676-711dffc6828f)
Introduction

### [213. Building a Login Screen With React and Bootstrap](https://hackernoon.com/building-a-login-screen-with-react-and-bootstrap)
![](https://cdn.hackernoon.com/images/tQ9kB6bRVWOji0aXNiHdKY9Q17y1-prf2ik3.jpeg)
Build an elegant login screen super fast using React and Bootstrap

### [214. The Seven Best Admin Templates And Themes in React](https://hackernoon.com/the-seven-best-admin-templates-and-themes-in-react-sd17331h)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-0rr33c0.jpeg)
The appearance of Node.js became the new era for JavaScript because of the opportunity to synchronize frontend and backend. All JavaScript programs with help of

### [215. How to Build a GatsbyJS Blog (Part 1): Creating the Project](https://hackernoon.com/how-to-build-a-gatsbyjs-blog-part-1-creating-the-project)
![](https://cdn.hackernoon.com/images/YhQrn2uriTN9SEA31DxtfMz7glu1-kt93shf.jpeg)
GatsbyJS is a fantastic framework to use when creating your blog. In this series of posts we will work together to create a blog from scratch!

### [216. How to Create Apple Music's Background Blur Effect Using Blurhash](https://hackernoon.com/how-to-create-apple-musics-background-blur-effect-using-blurhash)
![](https://cdn.hackernoon.com/images/RI9jFuqpWRXnfpvi7ZpuNpNYoNg2-jk93pgr.jpeg)
n this blog post, we'll learn how to create apple music's background blur effect using blurhash.

### [217. How to Use React.JS in a Secure Way](https://hackernoon.com/how-to-use-reactjs-in-a-secure-way)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-t5a3vcg.jpeg)
It’s easier to find a remedy and defend against the known enemy if you know the most prevalent React vulnerabilities. 

### [218. GatsbyJS: Everything to Know About This React-Based Static Site Generator](https://hackernoon.com/gatsbyjs-everything-to-know-about-this-react-based-static-site-generator)
![](https://cdn.hackernoon.com/images/YhQrn2uriTN9SEA31DxtfMz7glu1-oha3ss5.jpeg)
GatsbyJS is a fantastic static site generator for React-based websites. I broke it down in this article if you're curious to learn more about this framework.

### [219. How to Develop a Progressive Web App with React](https://hackernoon.com/how-to-develop-a-progressive-web-app-with-react)
![](https://cdn.hackernoon.com/images/yh6ijmgeppUYwux9kNlTiEhYQw02-db93o0q.jpeg)
This article will show you how to develop progressive web app with react. You can follow the steps and create an offline-first application that works across mul

### [220. How to Build a GatsbyJS Blog (Part 3): The Blog and Post Pages](https://hackernoon.com/how-to-build-a-gatsbyjs-blog-part-3-the-blog-and-post-pages)
![](https://cdn.hackernoon.com/images/YhQrn2uriTN9SEA31DxtfMz7glu1-uuc3s9j.jpeg)
In part three of our "Building a Gatsby Blog" series, we delve into the blog itself and create the list and post pages.

### [221. How to Create a Custom State Management Library With React Hooks and Context API](https://hackernoon.com/how-to-create-a-custom-state-management-library-with-react-hooks-and-context-api)
![](https://cdn.hackernoon.com/images/eQHzh6rz7ETBHLjs0KzCl1Dooqp2-2f93qyg.png)
In this article, I will introduce the React Context API for state management and create a similar solution as Redux without using a third-party library.

### [222. I'm 15 and Here's How I Made a 😴 Bedtime Calculator with React JS](https://hackernoon.com/im-15-and-heres-how-i-made-a-bedtime-calculator-with-react-js-yw233ehq)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F8PSwGHo3CLTd90b9bbGpzLHgmGZ2-xcf3uat.jpeg?alt=media&token=d0fd1c77-ddc8-49c5-9b30-d2ffca4f42ed)
Ever wake up feeling groggy, even though you thought you had enough sleep? It turns out that by timing your wake up time based on REM cycles, you can wake up more refreshed and more productive.

### [223. Quick Tips For Migrating from JavaScript to TypeScript](https://hackernoon.com/migrating-from-javascript-to-typescript-some-tips)
![](https://cdn.hackernoon.com/images/zaFsi86habTuCYRikyd3UBKEgKE3-2703623.jpeg)
Some useful tips to keep in mind when migrating your JavaScript project to TypeScript

### [224. How To Build a Decentralized Betting Platform With Solidity and React.js](https://hackernoon.com/how-to-build-a-decentralized-betting-platform-with-solidity-and-reactjs)
![](https://cdn.hackernoon.com/images/laptop-screen-displaying-code-yojdtztld5mvvwwemjevnokm.png)
earn how to create a decentralized betting platform using Solidity and React.js. 

### [225. What is ECMAScript and How is it Different From JavaScript?](https://hackernoon.com/what-is-ecmascript-and-how-is-it-different-from-javascrip-m1263u76)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F2URpjmJLkjVeYGsWZeCo2hCb90Y2-up1g3yt6.jpeg?alt=media&token=5732d5b6-c303-4c6e-b10a-cd1decea1095)
Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing.

### [226. Forms of Composition in JavaScript and React](https://hackernoon.com/forms-of-composition-in-javascript-and-react-5e1c3wsm)
![](https://images.unsplash.com/photo-1590912710679-1877d9757cdc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos. 

### [227. How to Take Full Advantage of useEffect in React](https://hackernoon.com/how-to-take-full-advantage-of-useeffect-in-react)
![](https://cdn.hackernoon.com/images/zoOctYrZ1RX1tldfBOyGfrmZq7f1-7if3rre.png)
Optimizing useEffect in React gives you a significant boost in performance and sometimes gets your code rid of nasty bugs.

### [228. How to Fetch Data from APIs Using useEffect React Hook](https://hackernoon.com/how-to-fetch-data-from-apis-using-useeffect-react-hook-v51b3twa)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FtygerKTQ5DPFXQy8a87C7wleTg52-az2t3t31.jpeg?alt=media&token=86fd9f64-b3e5-42f1-838d-3136280e0cb1)
In this article, we will take a look at useEffect React hook to fetch data from an API. We will create a sample React application to pull data from the provider and use it in our application.

### [229. Real DOM, Virtual DOM, and Shadow DOM: What's the Difference?](https://hackernoon.com/understanding-the-differences-between-real-dom-virtual-dom-and-shadow-dom)
![](https://cdn.hackernoon.com/images/p78YqcSArmS6R4uiGKkhQ5CNJa22-ecc3fhh.jpeg)
Real DOM, Virtual DOM, Shadow DOM, What's the Difference? Take a dive to see how they all work together to create a clean, performant Document Object Model.

### [230. The Importance Of Selecting The Right Frontend Framework](https://hackernoon.com/the-importance-of-selecting-the-right-frontend-framework-4sk34ae)
![](https://hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-6bk349r.jpeg)
Creating a new product comes with lots of ideas and requires numerous technologies. The idea of choosing the right framework matters a lot. Learn how to choose 

### [231. How to Add React.js to Laravel](https://hackernoon.com/how-to-add-reactjs-to-laravel)
![](https://cdn.hackernoon.com/images/zWaijZTsEGUHlbiQytfM9O3ZypD2-6v93jux.jpeg)
How to add ReactJS to your Laravel project

### [232. Top 3 React UI Component & Asset Libraries in 2021 ](https://hackernoon.com/top-3-react-ui-component-and-asset-libraries-in-2021-il2o330f)
![](https://cdn.hackernoon.com/images/CKm5QWycYDYVoSD7SPg8hYqgO7p1-aq8a3778.png)
I’m going to condense down years of trial and error and give you my top three React libraries to help you make beautiful websites and apps.

### [233. The 4 Main Principles of React That Made It So Popular](https://hackernoon.com/the-4-main-principles-of-react-that-made-it-so-popular)
![](https://cdn.hackernoon.com/images/E9wk9VmYAffu4uCpvu3n5aJXn1L2-69m2ftz.jpeg)
React is popular for a reason. It offers not only a solid paradigm of programming but also makes code much more maintainable.

### [234. How does your code sound?](https://hackernoon.com/how-does-your-code-sound-em45338j)
![](https://cdn.hackernoon.com/images/f1763803.jpg)
As a developer, I love listening to music while coding. The orchestral music allows me to focus more on what I do. And one day I noticed my fingers dance on the keyboard by the music rhythm. Like playing the piano. Every word or symbol in the code was written with harmony. And then I thought... how it could sound... The code I write every day?

### [235. Is HTML, CSS, and JavaScript Enough for Front-End Development? The Sad Truth](https://hackernoon.com/is-html-css-and-javascript-enough-for-front-end-development-the-sad-truth)
![](https://cdn.hackernoon.com/images/ahtiEWeKi5Q3mnkSzvRwGRF8Ez63-4202tkx.jpeg)
Explore the essentials of HTML, CSS, and JavaScript for web development. Are they enough for modern front-end applications? Learn more in this article !

### [236. The Top React UI Components](https://hackernoon.com/the-top-react-ui-components)
![](https://cdn.hackernoon.com/images/bJmCjBFKDCdFyOp2WyArQwy7BiF3-m8034oq.png)
Explore the top React UI Components and their notable features for your applications in this review of leading options.

### [237. How to Build a Github User Finder App With Next.js & Tailwind CSS](https://hackernoon.com/how-to-build-a-github-user-finder-app-with-nextjs-and-tailwind-css)
![](https://cdn.hackernoon.com/images/Y0kXG115Z7VorP4rguIGxwn3FoD3-gh93mx7.jpeg)
In this project, we are going to build GitHub user Search App using Github API. We will design the UI of the app using Tailwind CSS with Next.js as a framework.

### [238. Top 6 Material Design Dashboards](https://hackernoon.com/top-6-material-design-dashboards-mzr3kls)
![](https://cdn.hackernoon.com/drafts/3d3q3ndk.png)
I won’t make the intro too long. I will shortly introduce you to the Material Framework and mention our traditional criteria for evaluating dashboards/admin templates.

### [239. A Beginner's Guide to Performance Optimization Using React.memo()](https://hackernoon.com/a-beginners-guide-to-performance-optimization-using-reactmemo-lk1n34qy)
![](https://cdn.hackernoon.com/images/aHcUME45O0Sw3JLt9OGFJpazIvO2-eb9287d.jpeg)
React.memo is a higher-order component provided by React that will return a memoized version of the component that only changes if one of the props has changed. It is the same as PureComponent but instead of classes React.memo is used for functional components.

### [240. The Ultimate Guide to Effectively Using and Validating Forms in React](https://hackernoon.com/the-ultimate-guide-to-effectively-using-and-validating-forms-in-react)
![](https://cdn.hackernoon.com/images/tVmgy1BFDcZK1c7Ty90Zue1TAN93-go93ovu.jpeg)
Master React forms with this comprehensive guide on using and validating them effectively!

### [241. 20 JavaScript Libraries Every Programmer Should Know](https://hackernoon.com/20-javascript-libraries-every-programmer-should-know-883w34ic)
![](https://cdn.hackernoon.com/images/RV7pi7rhFfPvU6Z2JzjXQYzBQ3c2-4lq347q.jpeg)
A JavaScript library is a library of pre-written JavaScript that allows for easier development of JavaScript-based applications

### [242. Why Is React the Best Front-end Framework to Learn in 2024?](https://hackernoon.com/why-is-react-the-best-front-end-framework-to-learn-in-2024)
![](https://cdn.hackernoon.com/images/XWk05i8rnIh4jD7Lpxp4izORJrq2-5u93xo0.jpeg)
In this article, we will explore why React stands out, comparing it with two other popular frameworks, Angular and Vue.js, and why you should choose React.

### [243. The Noonification: Building Efficient npm Packages with React, TypeScript, and CSS Modules: A Comprehensive Guide (7/15/2023)](https://hackernoon.com/7-15-2023-noonification)
![](https://cdn.hackernoon.com/images/noonification_851_geo65fjubwrhxxk4lgart2ys.png)
7/15/2023: Top 5 stories on the Hackernoon homepage!

### [244. Single Page Application: Dispelling  SEO Myths](https://hackernoon.com/single-page-application-dispelling-seo-myths)
![](https://cdn.hackernoon.com/images/JqKwqhPiOYPfc8nv9WJVoyeS7ZP2-vw037w5.jpeg)
Single Page Application (SPA) can be indexed by search engines without SSR or prerendering

### [245. Creating a Dynamic Header in React: Shrink on Scroll, Expand on Top](https://hackernoon.com/creating-a-dynamic-header-in-react-shrink-on-scroll-expand-on-top)
![](https://cdn.hackernoon.com/images/zpA8BwP5iRUp1Yp5aGImZfUk4uw1-au93ww9.jpeg)
Learn to make a React header that shrinks on scroll and expands at the top for a dynamic user experience."

### [246. A Tutorial for Todo Apps using React, Redux and Framer-Motion](https://hackernoon.com/a-tutorial-for-todo-apps-using-react-redux-and-framer-motion-lf9i35u9)
![](https://hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-3hn037a9.jpeg)
React redux todo app tutorial : In this tutorial we will build Todo List app with  animations using Framer-motion. With react-redux we will use redux-toolkit.

### [247. Increase Performance of React Applications Via Array JavaScript Methods](https://hackernoon.com/increase-performance-of-react-applications-via-array-javascript-methods-uo3h3tqs)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FugoTV1vwcgR4mN8MMDUUN4vt6p02-2u2y3tbk.jpeg?alt=media&token=88ac4502-b36a-43b1-8d65-d9b4dca26e5d)
We know the array methods of javascript. We used it in simple programming, right? But today we will see how to use it in real life programming.

### [248. How to Become a Front-End Developer: Skills, Resources, and Career Roadmap ](https://hackernoon.com/how-to-become-a-front-end-developer-skills-resources-and-career-roadmap-50203w06)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FbFFEe4dIUoXgbouiLfgW9PI9b8q1-kvd3w3o.jpeg?alt=media&token=440e423d-cf2e-43ca-9cc7-a9863ad76942)
Are you a starting front end developer's journey? Then this roadmap is for you. You'll get to know all the essential aspects and steps required for frontend web developer.🤩

### [249. Build Smooth Page Transitions with React and GSAP](https://hackernoon.com/build-smooth-page-transitions-with-react-and-gsap-ou133uyt)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F6gIrvIcQwUepoybsXCq5ZrclLxq2-zg773yrj.webp?alt=media&token=a19bfaf0-7fcf-4c63-9f4d-99d6d0a44888)
Check out what you'll be able to do here

### [250. React vs Angular: Choosing the Best Option for Front-end Development](https://hackernoon.com/react-vs-angular-choosing-the-best-option-for-front-end-development-5n1s33sd)
![](https://cdn.hackernoon.com/images/bI8qtI7HUAYME4whVTqvW1Kn5cL2-dte3fpo.png)
React.js and Angular are equally good at building web-based applications. Some of the world projects are built with React.js.

### [251. ReactJS: The Javascript Developer’s Guide](https://hackernoon.com/reactjs-the-javascript-developers-guide-5q2b3z0o)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FuEeA5IEPqbgLWGwgx7ngt2xJrbI2-4q11303i.png?alt=media&token=649fd54a-ebdb-49e0-b5d7-e43f1b2eae01)
This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.

### [252. Javascript Basics For React Beginners](https://hackernoon.com/javascript-basics-for-react-beginners-1b1231c2)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-zhy31zc.jpeg)
I am one of those persons who learned React before properly learning the basic concepts of javascript. Because of this, in the early days of my React journey, I didn't know which part of the code is React and which part is the vanilla js. It's important to know the basic javascript concepts to understand better which part of the puzzle is React solving.

### [253. Streamline NestJS Setup with Extensive React Boilerplate](https://hackernoon.com/streamline-nestjs-setup-with-extensive-react-boilerplate)
![](https://cdn.hackernoon.com/images/SFsbtjO6xoXZQmI9d6SeRPSFgnH2-xa838b2.jpeg)
Extensive React Boilerplate: what is it, what features include, how it complements Nest.js boilerplate to build full-stack apps

### [254. How to Deploy React JS Applications for Free on Firebase](https://hackernoon.com/how-to-deploy-react-js-applications-for-free-on-firebase-is1j348y)
![](https://cdn.hackernoon.com/images/MPQxyfch0lZHKZM3k3hMies8Fpv1-hxj310f.jpeg)
In this article , I’ll take you through all the steps involved in deploying a your React app on firebase.

### [255. Building Highly Performant Applications With React Server Components](https://hackernoon.com/building-highly-performant-applications-with-react-server-components)
![](https://cdn.hackernoon.com/images/DUNwZCukeJNLc4sNJWS9gfbJuRg1-z893q5a.jpeg)
React introduced a new feature called React Server Components (RSC) in December 2020. RSC are a new type of React component that can run on the server

### [256. Newbie React Developer? Watch Out for These 15 Common Mistakes ](https://hackernoon.com/newbie-react-developer-watch-out-for-these-15-common-mistakes)
![](https://cdn.hackernoon.com/images/1Q2GB4CpCUMN5XiyaLtJfwCyuz83-1bc3ol5.jpeg)
15 common mistakes that every newbie React developer ends up making

### [257. Records And Tuples Usage In React](https://hackernoon.com/records-and-tuples-usage-in-react-qo103uqo)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F8fEI9xkzAKR8f3GlkTak2hzTJek1-vwfd3uzm.png?alt=media&token=1a7a1c29-54b7-446e-9434-ff6d4c39811b)
Records & Tuples, a very interesting proposal, has just reached stage 2 at TC39.

### [258. How React Testing Library Can Improve Your Mental Health [Part 2]](https://hackernoon.com/how-react-testing-library-can-improve-your-mental-health-part-2-071b31hk)
![](https://cdn.hackernoon.com/images/rZ3rn8qcvagyoGK9VRZZGonZwLN2-4bi435f3.jpeg)
How React Testing Library Can Improve Your Mental Health Part 2

### [259. A Handy Checklist of Secure Coding Practices: Protect Your App and Your Users](https://hackernoon.com/a-handy-checklist-of-secure-coding-practices-protect-your-app-and-your-users)
![](https://cdn.hackernoon.com/images/KqfopgYCVjenJNeh8DD99wUIl1C2-mq92vbk.jpeg)
In this brief article, we will discuss important security measures that can protect web applications from potential threats and ensure the safety 

### [260. React vs Angular: Final Thoughts](https://hackernoon.com/react-vs-angular-final-thoughts-8bik3157)
![](https://cdn.hackernoon.com/images/RX8xMnl8Q5fsB6oGTIzeeX6BLfh1-kurl34b9.jpeg)
React versus Angular when learning a new framework, which should you use?

### [261. How to Simplify State Management With React.js Context API - A Tutorial](https://hackernoon.com/how-to-simplify-state-management-with-reactjs-context-api-a-tutorial)
![](https://cdn.hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-yk834rt.png)
Master state management in React using Context API. This guide provides practical examples and tips for avoiding prop drilling and enhancing app performance.

### [262. Tail-kit Introduction: 200+ Free Tailwind CSS Components And Templates](https://hackernoon.com/tail-kit-introduction-200-free-tailwind-css-components-and-templates-d7v31v2)
![](https://cdn.hackernoon.com/images/I6baOfMDJPVeudwIwtHwkMpYTdz2-qj2m3625.jpeg)
Free and open source Tailwind css 2.0 components and templates KIT for React, vueJS and Angular. 

### [263. I Built a Platform to Help Users Practice Programming Challenges Guided by AI](https://hackernoon.com/i-built-a-platform-to-help-users-practice-programming-challenges-guided-by-ai)
![](https://cdn.hackernoon.com/images/JvjCOSrRbJTj3eDxmY8zFRxYoRF3-op8344j.jpeg)
Walking  through the process of building a platform leveraging AI to help users practice for interviews; integrating feedback from the first few live user tests

### [264. A Complete Guide to React Hooks](https://hackernoon.com/a-complete-guide-to-react-hooks)
![](https://cdn.hackernoon.com/images/tVmgy1BFDcZK1c7Ty90Zue1TAN93-ns83n2m.jpeg)
Let's deep dive into React Hooks and uncover the secrets to building efficient, dynamic UIs with this comprehensive guide to modern web development.


### [265. The Ultimate React State Management Handbook](https://hackernoon.com/the-ultimate-react-state-management-handbook)
![](https://cdn.hackernoon.com/images/tVmgy1BFDcZK1c7Ty90Zue1TAN93-ix83x6m.jpeg)
Enhance your React skills with 'The Ultimate React State Management Handbook. 

### [266. What You Need to Know About Tailwind CSS](https://hackernoon.com/what-you-need-to-know-about-tailwind-css-x02o3z8m)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FoEONxPFhWdacHIrQLtHUpSaupSM2-gu5v28bw.jpeg?alt=media&token=8502ebfb-f709-48f0-8d05-1140bb80f8fb)


### [267. Automatic Image Optimization: Next.js 10 New Standards for 2020 ](https://hackernoon.com/automatic-image-optimization-nextjs-10-new-standards-for-2020-dc1h3zlf)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FXAzN6nKMBMW8TomIi1JTTlWalZD2-hx4i23m3.jpeg?alt=media&token=96a1d9fb-8ffe-40dc-aa7a-a3e5fb9d2feb)
Vercel has recently announced the latest version of its React-based web framework- Next.js 10. 

### [268. Introduction to React Hooks and Why They are the Wrong Abstraction ](https://hackernoon.com/introduction-to-react-hooks-and-why-they-are-the-wrong-abstraction-ut3m346l)
![](https://cdn.hackernoon.com/images/0ZS6gkHLHSOQYYrvGTP2fNuXbjK2-8m531dq.png)
Before I get started, I'd like to express how grateful I am for all of the work that the React team has put in over the years. They've created an awesome framework that in many ways was my introduction to the modern web. They have paved the path for me to believe the ideas I'm about to present and I would not have arrived at these conclusions without their ingenuity.

### [269. How ADHD and AI Work Together Better Than Any Productivity System I Tried](https://hackernoon.com/how-adhd-and-ai-work-together-better-than-any-productivity-system-i-tried)
![](https://blog.deeflect.com/medium-img/02-adhd-and-ai.jpg)
Scored 147 on RAADS-R and 38 on AQ-50 (autism), plus ADHD. Here's how I built AI systems that work with my brain, not against it. Real stack, real workflows....

### [270. How to Create a Simple Object Detector with NextJs](https://hackernoon.com/how-to-create-a-simple-object-detector-with-nextjs)
![](https://cdn.hackernoon.com/images/vX16JSD0foZLtxXfu11SaCH0Y6o2-as137sz.jpeg)
A simple tutorial for beginners to create an object detector with NextJs.

### [271. How to Avoid React Anti-Patterns by Weaning Off Bad Programming Habits ](https://hackernoon.com/how-to-avoid-react-anti-patterns-by-weaning-off-bad-programming-habits)
![](https://cdn.hackernoon.com/images/6EORd3lScrVTxxVB0ulAUeFzv0E2-5sc3n6h.jpeg)
Let's consider some examples of React anti-patterns which avoidance will help you ensure the top-notch quality of your front-end development.

### [272. JS Community Reacts to George Floyd’s Death](https://hackernoon.com/js-community-reacts-to-george-floyds-death-19cu30aj)
![](https://cdn.hackernoon.com/drafts/tncs30gs.png)
The killing by Minnesota police of George Floyd grabbed the media's attention recently. Nobody can be indifferent to this heinous crime, and the JS community has also reacted to the incident.

### [273. How React Testing Library Can Improve Your Mental Health [Part 1]](https://hackernoon.com/how-react-testing-library-can-improve-your-mental-health-part-1-rzo31s7)
![](https://cdn.hackernoon.com/images/rZ3rn8qcvagyoGK9VRZZGonZwLN2-ss5c35ou.jpeg)
I know one person who likes writing tests, and it is not me! I like adding code-coverage to my code and you'll see why.

### [274. How to add Video Call and Voice Call Functionality in a Full Stack Whatsapp Clone](https://hackernoon.com/how-to-add-video-call-and-voice-call-functionality-in-a-full-stack-whatsapp-clone)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-9x92x6i.jpeg)
This blog post demonstrates how to integrate Zegocloud's services for Video Call and Voice Call functionality into a Full Stack WhatsApp Clone.

### [275. How To Create Your React Application From Scratch](https://hackernoon.com/how-to-create-react-application-from-scratch-yj153ump)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FlJUPjZZxshbXDpBJ1ODjDpSLsfJ3-d9333yxy.jpeg?alt=media&token=8ff27fba-2444-433e-ace4-b401e68d2b9d)
In this article, you are going to build your first React application. React is the most popular front-end framework and it’s for good reasons. One reason is that React will only update the parts of your website that got changed.

### [276. The Top React Datagrids](https://hackernoon.com/the-top-react-datagrids)
![](https://cdn.hackernoon.com/images/bJmCjBFKDCdFyOp2WyArQwy7BiF3-ml034pl.png)
Explore the top React Datagrids and their notable features for your applications in this review of leading options.

### [277. 3 Most Common Ways to Connect your Node and React Applications](https://hackernoon.com/3-most-common-ways-to-connect-your-node-and-react-applications)
![](https://cdn.hackernoon.com/images/5L1PsURyndeLVm1wIoUdHEN6ZP12-f2039za.jpeg)
There are different ways to connect react frontend and NodeJS backend. In this blog, I am going to tell you three ways how you can connect backend and frontend.

### [278. How I build Coronavirus Tracking Application](https://hackernoon.com/how-i-build-coronavirus-tracking-application-t44g3yrg)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-pc82rgl.jpeg)
What is Coronavirus (COVID-19)?

Coronavirus (COVID-19) which is an infectious disease caused by respiratory illness and symptoms like flu, cough, fever, difficulty breathing, on December 31, 2019, the first case was recorded in Wuhan, China and later the virus got spread around the world and as of now, around 1 million+ confirmed cases are being recorded since then.

You can protect yourself from this virus by following basic precautions like washing your hand frequently, avoid touching your face, maintaining a distance of (1 meter or 3 feet) between people and most importantly if you are sick then immediately call for medical help at your nearest hospital.

### [279. 'DappBnB' — How to Create a Web3 Equivalent of AirBnB Using React, Solidity, and CometChat](https://hackernoon.com/dappbnb-how-to-create-a-web3-equivalent-of-airbnb-using-react-solidity-and-cometchat)
![](https://cdn.hackernoon.com/images/person-coding-in-react-clfi12e2p000201s6ghac65ku.png)
Are you looking to create a cutting-edge platform that leverages the power of web3 to transform the way people book and share accommodations?  

### [280. NPM ReactJS package for Microsoft Immersive Reader ](https://hackernoon.com/how-i-integrated-microsoft-immersive-reader-in-a-reactjs-website-rs1q3ezj)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F2demekdXeogsYiRsVCzMBnyEMZ52-4u1q3tx2.jpeg?alt=media&token=a00bc901-7e1e-47a8-ae3a-bab1ab91b937)
Immersive Reader is an Azure Cognitive Service for developers who want to embed inclusive capabilities into their apps for enhancing text reading and comprehension for users regardless of age or ability.  Students can color code and label words to indicate their part of speech, user read the text aloud feature, translate words and more.

### [281. How To Build a Simple Blog using Axios With React: Beginners Tutorial](https://hackernoon.com/build-a-simple-blog-using-axios-with-react-pz2r32ut)
![](https://cdn.hackernoon.com/images/qtze3zmr.jpg)
In this article, we are going to learn how to use Axios with React to make API requests and also how to handle the response.

### [282. Unveiling the Value of Reusable Components](https://hackernoon.com/unveiling-the-value-of-reusable-components)
![](https://cdn.hackernoon.com/images/yQlDE7WyH8agYkQFBq6KSDhPamH3-vrc4x1b.jpeg)
Maximizing savings through reusable software components.

### [283. 4 Reasons Why You Should Use Gatsby JS for Your Website](https://hackernoon.com/reasons-you-should-use-gatsby-js-for-your-website-t85k3wc5)
![](https://cdn.hackernoon.com/images/7m1031ml.jpg)
Gatsby JS is a static site generator that is used to create high performance websites. Built on top of React, it weaves together some of the better parts of GraphQL, react-router and webpack for a brilliant developer experience. This means a much faster site, taking a lot less time to build! Perfect for users, business and developers.

### [284. React Application Architecture: Code splitting [Part 2]](https://hackernoon.com/react-application-architecture-code-splitting-part-2-pmb35ii)
![](https://cdn.hackernoon.com/images/XGMWMOKYU7e8wnkoEaWrmT8amnP2-gv1783fg0.jpeg)
In the previous part we have learned about the components and how it affects our React app architecture. 

### [285. Elevating Frontend Development: The Crucial Role of Testing in Web Dev](https://hackernoon.com/elevating-frontend-development-the-crucial-role-of-testing-in-web-dev)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-df83xo9.jpeg)
In web development, this involves checking that web pages look and function correctly in different browsers and devices.

### [286. The Best React Component Libraries to Make Your Life Easier](https://hackernoon.com/the-best-react-component-libraries-to-make-your-life-easier)
![](https://cdn.hackernoon.com/images/yEPQ6i4CCAdpczrPlRcHgxdggFC2-j403636.jpeg)
React is an open-source JavaScript library that helps build the user interface for web and mobile apps.

### [287. ✨ How To Build Your UI Components with React Portals Super Easy](https://hackernoon.com/how-to-build-your-ui-components-with-react-portals-super-easy-pn823ynm)
![](https://images.unsplash.com/photo-1560094824-13b9bc472f86?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Yo guys, I want to introduce react-cool-portal. It's a React.js hook for Portals. t helps you render children into a DOM node that exists outside the DOM hierarchy of the parent component. From now on you will never need to struggle with modals, dropdowns, tooltips etc. Check the features section out to learn more. Hope you guys 👍🏻 it.

### [288. Benefits of React-Native for Cross-Platform App Development](https://hackernoon.com/benefits-of-react-native-for-cross-platform-app-development-0gm30aa)
![](https://cdn.hackernoon.com/images/ro2832a9.jpg)
Did you know react native is the fifth most used frameworks among developers worldwide as of 2019 beginning? It has become a popular programming tool in the mobile app development industry since its launch in 2015, as per Statista.

### [289. React 18's Concurrent Rendering for Stress Testing: A 3D Rendering Case Study](https://hackernoon.com/react-18s-concurrent-rendering-for-stress-testing-a-3d-rendering-case-study)
![](https://cdn.hackernoon.com/images/XyqHIwK0xDMOGdIf5iTNW4CrLjb2-di93upu.png)
A deep dive into React 18's concurrent features and stress test it using 3D data visualization built with three.js.

### [290. Optimize Props References and Improve Rendering in React Native](https://hackernoon.com/optimize-props-references-and-improve-rendering-in-react-native-xm3331hn)
![](https://cdn.hackernoon.com/images/JrZTohlacQMMTRoGfsja72Q4MPg1-vh6k3efr.jpeg)
Rendering is the process of React asking your Components to describe what the section UI looks like, on the current combination of Props and State.

### [291. Building an uNFT Marketplace Using Next.js, Cosmic and Stripe ](https://hackernoon.com/building-an-unft-marketplace-using-nextjs-cosmic-and-stripe)
![](https://cdn.hackernoon.com/images/Jxe9yCMk4BW1cZd1hs3AlUhayZv1-tie3ssk.gif.webp)
 Build a uNFT marketplace using React.js Next.js Cosmic CMS and Stripe. You could build your own projects using these powerful tools

### [292. Deconstructing React 18 ](https://hackernoon.com/deconstructing-react-18)
![](https://cdn.hackernoon.com/images/uDPqwahUxKSKSQ17IYMKmh9T5uu1-pw93sia.jpeg)
React 18 is a major improvement to React’s rendering mechanisms. It focused on improved performance of user interfaces for a much better experience for the user

### [293. How to Build a Video Call App with ZEGOCLOUD and React](https://hackernoon.com/how-to-build-a-video-call-app-with-zegocloud-and-react)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-8a92ul9.jpeg)
In this blog post, I will show you how to create a video call app using ZEGOCLOUD and React. ZEGOCLOUD is a cloud-based video call platform.

### [294. An Essential Guide to Feature Toggles Using Next.JS and React](https://hackernoon.com/an-essential-guide-to-feature-toggles-using-nextjs-and-react-a22j37bk)
![](https://cdn.hackernoon.com/images/JnwMdaVZrzSOfLb9FHlT2x1vsd62-wkix352u.jpeg)
This post will show you how to build the Feature Toggle mechanism in your Next.JS application. We are going to use Next.JS, React, and TypeScript

### [295. How To Create Forms in React](https://hackernoon.com/how-to-create-forms-in-react-35o313i)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-rh16310s.jpeg)
Just like we use Forms in HTML, we can use the same thing to React. It’s quite different from other DOM elements but not too complex. 

### [296. Deploying a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, and Nest.js on Aptible](https://hackernoon.com/deploying-a-full-stack-amazon-clone-with-nextjs-tailwind-css-zustand-and-nestjs-on-aptible)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-d59318o.jpeg)
Learn how to deploy an Amazon Clone application on Aptible, a secure and scalable cloud infrastructure platform.

### [297. Enhancing Web Accessibility in React Applications](https://hackernoon.com/enhancing-web-accessibility-in-react-applications)
![](https://cdn.hackernoon.com/images/1LFWV1HmcxgIDvjV1Yqt5rcv93l2-mc931fr.jpeg)
In this article, we explore what web accessibility is, how it intersects with ReactJs, and the core principles of web accessibility.

### [298. Understand React.js in 1 Minute and 58 Seconds](https://hackernoon.com/understand-reactjs-in-1-minute-58-seconds)
![](https://cdn.hackernoon.com/images/9ersNfHQLZd57zIPNE2CnYPaUEA2-jdf3rg3.jpeg)
Understand React.js in 1 Minute 58 Seconds

### [299. How to Use i18nexus with your React App for Scalable and Automated Localization](https://hackernoon.com/how-to-use-i18nexus-with-your-react-app-for-scalable-and-automated-localization-htw3w0a)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FWGdo9nF6nET1ujDg7CIyENN2LiS2-dzlj3w56.png?alt=media&token=f7d814c8-e534-4458-b336-0bf8cbee7130)
We’re going to take a look at localizing a React app with react-i18next and i18nexus. i18next is one of the most popular JavaScript localization libraries around, but its power is truly unleashed when used with i18nexus and its awesome API for scalable translation management and Google Translate automation.

### [300. Website Builder Tool Quarkly Goes Into Open Beta](https://hackernoon.com/website-builder-tool-quarkly-goes-into-open-beta-lbg31ih)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FJBshzpA8zGSiRffpRm1SPbfzxvO2-9f244xko.jpeg?alt=media&token=0503eb31-c62e-4cf3-be8a-e4bc909742eb)
My name is Alex, and I’m a co-founder and lead developer at Quarkly.io. Quarkly is a project made by our small team of designers and developers, aimed at helping similar teams. Our goal with Quarkly is to make the life and workflow of designer-developer pairs easier, allowing them to work both independently and collaboratively, all in one environment.

### [301. Web Development Is Still The Wild Wild West in 2023](https://hackernoon.com/web-development-is-still-the-wild-wild-west-in-2023)
![](https://cdn.hackernoon.com/images/OtJzzAct4ogl0v25V43xSyGcJAt1-m993tc0.jpeg)
Web development is still (thankfully) a frontier, where there is little to no official regulation, certification or oversight. Will it always be the wild west?

### [302. React Application Development Tools: UI, Styling, State Management, Testing](https://hackernoon.com/react-application-development-tools-ui-styling-state-management-testing-8b2m3ykk)
![](https://cdn.hackernoon.com/drafts/97193y0a.png)
If you have chosen React for building a web app, you will still need additional technologies and frameworks to expand and grow your project, add functionality and integrations.

### [303. Your Guide To Learning Redux](https://hackernoon.com/your-guide-to-learning-redux-r37e35sd)
![](https://hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-ke8t37c2.jpeg)
What is Redux : A beginners guide. Redux is very important if you're using state in your web app. Especially if you're React Developer then you must learn Redux

### [304. How To Build a Table With Sticky Headers in Pure CSS](https://hackernoon.com/how-to-build-a-table-with-sticky-headers-in-pure-css-pc19313h)
![](https://cdn.hackernoon.com/images/4qzOWT5DeLPh3BnxwuF5cUyAwzs2-2kg31oz.png)
While creating user interfaces, we often encounter the problem that there is more data in our tables than can be fitted in the visible viewport. To achieve an excellent user experience on components like Gannt charts, data tables and spreadsheets, we often use the sticky CSS property on the header elements. This is a simple task when doing it only on one edge of the table.

### [305. Production Grade Deployment of a Full Stack Web App (React + Node) With Docker and EC2](https://hackernoon.com/production-grade-deployment-of-a-full-stack-web-app-react-node-with-docker-and-ec2)
![](https://cdn.hackernoon.com/images/laptop-screen-displaying-code-jwd1f490nm4rpx0sap465p12.png)
Deploy a secure React + Node app to AWS EC2 using Docker, Nginx, and HTTPS with this beginner-friendly step-by-step guide.

### [306. Increase Your Productivity With 14 React Component Libraries](https://hackernoon.com/increase-your-productivity-with-14-react-component-libraries)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-2v83rrt.jpeg)
In this article, I compiled a useful list of some of the most popular React component libraries. They are easy to get started with and have great docs.

### [307. Learn the Fundamentals of React JS: A Guide for Beginners](https://hackernoon.com/learn-the-fundamentals-of-react-js-a-guide-for-beginners)
![](https://cdn.hackernoon.com/images/MmqqCSNi0kSZbsltTFAwEGQLKzN2-wh93eb6.jpeg)
This guide explains the basic fundamentals of ReactJS such as how it works with JavaScript which many beginners may find helpful as they learn the language.

### [308. Using ReactGrid and Chart.js to Create a Financial Liquidity Planner ](https://hackernoon.com/using-reactgrid-and-chartjs-to-create-a-financial-liquidity-planner-pj2733ke)
![](https://cdn.hackernoon.com/images/4qzOWT5DeLPh3BnxwuF5cUyAwzs2-ssaj33g3.png)
We made ReactGrid to compose your view with arbitrary cell order. Today we present a few tips for implementing ReactGrid in your own React project.

### [309. Here's How I Built a Webflow Like UI Builder for Python](https://hackernoon.com/heres-how-i-built-a-webflow-like-ui-builder-for-python)
![](https://cdn.hackernoon.com/images/9N4ACnZ47AVK6fuKDziF6ZGm07i1-cg0360m.png)
Sharing my thought process and experience building a Drag and Drop UI builder for python

### [310. Flutter vs. React Native: What App Developers Should Know About Cross-Platform Mobile Development](https://hackernoon.com/flutter-vs-react-native-what-app-developers-should-know-about-cross-platform-mobile-development-1zak32n1)
![](https://cdn.hackernoon.com/drafts/xp1gm3ypo.png)
Bringing a spirit of novelty in the mobile development industry just recently, hybrid app development has become one of the most popular and fast-growing trends today. Now, it is considered as one of the most effective choices by many app developers and business owners. 

### [311. How to Build a Live Code Sharing Platform With Dyte and ReactJs](https://hackernoon.com/how-to-build-a-live-code-sharing-platform-with-dyte-and-reactjs)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-qg93qss.jpeg)
In this tutorial, we will create a “Live Code Sharing Platform” that allows users to share code and engage in video and audio calls.

### [312. Should You Add React to Existing Projects Or Websites?](https://hackernoon.com/should-you-add-react-to-existing-projects-or-websites)
![](https://cdn.hackernoon.com/images/0sm1KIKmbZhu9AD2GAr4cKywoN43-qud3nfj.jpeg)
React is the most popular JavaScript framework on the planet. You can use it to quickly create feature-rich web applications. 

### [313. Important Tips for Using React Query: Part 1](https://hackernoon.com/important-tips-for-using-react-query-part-1-o42y33d5)
![](https://cdn.hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-f31f28oa.jpeg)
I’ve been using React Query in real world applications for over 8 months now, and I want to share with you some of the things I found useful when using it

### [314. Here's Why You Need to Use a Front-end Framework](https://hackernoon.com/heres-why-you-need-to-use-a-front-end-framework)
![](https://cdn.hackernoon.com/images/gEL3g8oyQxgbmc8iSk3I4iUT8Ku1-byc3uv2.jpeg)
If you want to stick with using only the native web application languages, you can very well do so. However, using a front-end framework can make web...

### [315. Next.js v15 — What’s new under the hood](https://hackernoon.com/nextjs-v15-reflecting-on-previous-mistakes)
![](https://cdn.hackernoon.com/images/XjfpCHrOQzgWJFrC6eIzWzuyfxs2-roa3b7n.jpeg)
The new version is interesting not only for its new functionality, but also for the shift in priorities, the organization and reflection on mistake.

### [316. Checkers on React - Part 6 - Player](https://hackernoon.com/checkers-on-react-part-6-player)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-dn93s8c.jpeg)
It’s time to add Players and the ability to change the current player on every next turn.

### [317. Creating a React Application to Solving Every Sudoku Puzzle](https://hackernoon.com/creating-react-application-for-solving-every-sudoku-puzzle-26h316j)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FskBD6DsGFxbku964UUfxUaXqoFh2-xgb288m.jpeg?alt=media&token=66c1f4e0-d530-4115-99e9-48e483b17c84)
Peter Norvig, the legendary Google mogul and AI titan, wrote a python essay to solve every Sudoku puzzle 10 years ago. Back then, he may not have expected that his code will inspire so many other posts and to be ported to so many different languages. For JavaScript, the latest version of the solver that I found was einaregilsson/sudoku from 2014

### [318. Component-Driven Collaboration](https://hackernoon.com/component-driven-collaboration-762i3y4e)
![](https://cdn.hackernoon.com/drafts/1nw3ybs.png)
Component-Driven Collaboration (CDC) is a way to build frontend code, as a team, by delivering code updates as meaningful independent components. CDC can be contrasted by the "traditional" way of delivering updates with no clear borders, meaning or purpose.

### [319. Tina is not a CMS - It is Much More (feat. Hot Reloading for Editors)](https://hackernoon.com/announcing-tinacms-5w1w36h2)
![](https://cdn.hackernoon.com/images/6nk33ew.jpg)
We’re excited to announce TinaCMS: an open-source site editing toolkit for React-based sites (Gatsby and Next.js). See the announcement video at JAMstack Conf SF (the demo starts at 3:45).

### [320. How to Build a GatsbyJS Blog (Part 2): Layout and Pages](https://hackernoon.com/how-to-build-a-gatsbyjs-blog-part-2-layout-and-pages)
![](https://cdn.hackernoon.com/images/YhQrn2uriTN9SEA31DxtfMz7glu1-onb3s3f.jpeg)
In the second part of the "Building a GatsbyJS Blog" series, we will create a page layout and scaffold the main pages of the blog.

### [321. ReactJS: An Overview of Class Components and Functional Components with Hooks](https://hackernoon.com/reactjs-an-overview-of-class-components-and-functional-components-with-hooks-c53b3zgx)
![](https://cdn.hackernoon.com/images/jtb13vw1.jpg)
Hello Readers, CoolMonkTechie heartily welcomes you in this article.

### [322. Authentication: Create a Simple Rick and Morty Wiki Page](https://hackernoon.com/authentication-create-a-simple-rick-and-morty-wiki-page)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-al13oaa.jpeg)
Authentication is the most important part of any application. Learn more about it!

### [323. The Component Life Cycles of ReactJS](https://hackernoon.com/the-component-life-cycles-of-reactjs-511n3wjl)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMJpFVUEItkSdoh38rYo60VT7RfH3-zc1628t0.jpeg?alt=media&token=2acb1d9b-ce6c-4b3e-b337-225e7f309a9c)
Every component in React goes through a lifecycle of events. You can think is of going through a cycle of birth, growth, and death the same as the picture below.

### [324. Build a Toast Message Component via React and Styled Components with Ease](https://hackernoon.com/build-a-toast-message-component-via-react-and-styled-components-with-ease)
![](https://cdn.hackernoon.com/images/DCeD33KBsvfkcDAPAhEcQn47anx2-7q03sga.gif.webp)
Toast Notifications are yet another way to provide feedback to the user. They usually contain brief messages and sometimes get accompanied by CTAs as well.

### [325. TypeScript SDK Development: A 5-Year-Old Could Follow This Step-By-Step ~ Part 1: Our First MVP](https://hackernoon.com/typescript-sdk-development-a-5-year-old-could-follow-this-step-by-step-part-1-our-first-mvp)
![](https://cdn.hackernoon.com/images/jStFgqJ9QRdiGkR6khwJAgLD6Dl2-1e830p9.jpeg)
In this tutorial, we are going to build our first basic SDK to get a basic understanding. TypeScript SDK / Library Development Tutorial

### [326. How I Got Over My Fear of Webpack](https://hackernoon.com/how-i-got-over-my-fear-of-webpack-cx2836eb)
![](https://cdn.hackernoon.com/drafts/e6s3zn7.png)
And why you should too

### [327. How To Build Cool Horizontal Scroll Interaction Flow by Using React](https://hackernoon.com/build-cool-horizontal-scroll-interaction-in-react-oo1834pu)
![](https://cdn.hackernoon.com/images/qq1034kv.jpg)
In this tutorial, we’ll create a fun scroll animation in which items “flip” in the direction of the scroll. We’re going to use react-spring for animating and react-use-gesture to tie animation to the scroll events. The native onScroll event handler won't do in this case, because we'll need additional information about scrolling that native onScroll handler doesn't provide - scroll delta in pixels, and whether the scrolling is in progress or not.

### [328. A Glance Into Amplication: Easy NodeJS App Development](https://hackernoon.com/a-glance-into-amplication-easy-nodejs-app-development)
![](https://cdn.hackernoon.com/images/dggyuWeiI8UTajGn2FUnYNzWjCs2-yw93spd.jpeg)
According to the Amplication website's introduction, it's a tool for creating the structure you want in NodeJS apps. 

### [329. From Web2 to Web3: How I Embarked on a Thrilling Journey of Decentralized App Building!](https://hackernoon.com/from-web2-to-web3-how-i-embarked-on-a-thrilling-journey-of-decentralized-app-building)
![](https://cdn.hackernoon.com/images/77WjQmBCAIQ7dyhZ22Bkui5QTrb2-fi93und.jpeg)
Have you ever wondered what it's like to transition from the centralized world of Web2 to the decentralized world of Web3? 

### [330. How to Build a GatsbyJS Blog (Part 4): Layout and Featured Images](https://hackernoon.com/how-to-build-a-gatsbyjs-blog-part-4-layout-and-featured-images)
![](https://cdn.hackernoon.com/images/YhQrn2uriTN9SEA31DxtfMz7glu1-ndc3sih.jpeg)
In part 4 of our "Building a Gatsby Blog" series, we will promote engagement and design cohesion by adding images to our pages and blog posts.

### [331. The First Dedicated IDE for React Web Applications - ReacTide 3.0 Beta is Finally Here ](https://hackernoon.com/the-first-dedicated-ide-for-react-web-applications-is-finally-here-reactide-30-beta-zhez38de)
![](https://cdn.hackernoon.com/images/92j638bh.jpg)
In addition to the teams behind Netflix, eBay, Airbnb, Dropbox, Instagram, and Facebook, there are currently over 1.3 million websites and applications built on React, making it one of the most powerful and ubiquitous frameworks of all time.

### [332. My Experience with Creating Frontend and Backend Applications for My Startup](https://hackernoon.com/my-experience-with-creating-frontend-and-backend-applications-for-my-startup)
![](https://cdn.hackernoon.com/images/kPMWeqKHrERbWZ4wSgIwTb4IiRh1-id832io.jpeg)
In this article, I share my journey of developing both the backend and frontend of an application. I delve into the challenges encountered and overcoming them.

### [333. Utilize The Power of NFTs On Your Website](https://hackernoon.com/utilize-the-power-of-nfts-on-your-website)
![](https://cdn.hackernoon.com/images/f4lKkJkseeZDpW6hfd39kjY5Enx1-zj93gz1.jpeg)
Utilize The Power of NFTs On Your Website

### [334. Test-Driven Development in React: Building Reliable Applications from Scratch](https://hackernoon.com/test-driven-development-in-react-building-reliable-applications-from-scratch)
![](https://cdn.hackernoon.com/images/BUTKpbdTbNRmCTvmcJcWJp8NMoy2-5r92lve.jpeg)
Unlocking the Power of Test-Driven Development: Building Robust React Apps with Confidence

### [335. Building an Efficient Waitlist App with Next.js and Xata](https://hackernoon.com/building-an-efficient-waitlist-app-with-nextjs-and-xata)
![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-mj93mmn.jpeg)
A waitlist application is used by agencies, companies, marketing campaign websites, and many more to collect user data from a website.

### [336. The Simple React and Redux Implementation Tutorial](https://hackernoon.com/the-simple-react-and-redux-implementation-tutorial-wqx3unb)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FLppwspfnqfNlJXernlHBaU4zzgZ2-60133znl.webp?alt=media&token=9e7a0730-15fa-4177-9085-fcdb01aa3bb6)
Last month I started making some implementations of Redux in some React projects. In the beginning, it took me a while to understand how to set up everything. Because it is a little complex to set up. But it will help a lot to store the data of an app.

### [337. Short: The React Virtual DOM ](https://hackernoon.com/short-the-react-virtual-dom)
![](https://cdn.hackernoon.com/images/XWk05i8rnIh4jD7Lpxp4izORJrq2-8wa3r3w.jpeg)
Short refresher about the Virtual DOM used in React. What are the differences between the browser DOM and the virtual DOM?

### [338. How to Learn Web Development: HTML, CSS, MERN, and Python - 22 GitHub Repositories to Help You](https://hackernoon.com/how-to-learn-web-development-html-css-mern-and-python-22-github-repositories-to-help-you)
![](https://cdn.hackernoon.com/images/3fqF3O1TlWgiNvnKd6ig6aFrCtW2-4h02xpk.jpeg)
To help you on your learning path, I've compiled an ultimate guide to the best GitHub repositories for learning these technologies.

### [339. JavaScript Closures Explained to Kids](https://hackernoon.com/javascript-closures-explained-to-kids-n31r33d7)
![](https://cdn.hackernoon.com/images/CYFmHUGsNnfKEDXHiA6ryqY4Emq1-et1w37m8.jpeg)
How to explain JavaScript Closure to a 5 years old kid

### [340. Homebrew - Explained in Simple English](https://hackernoon.com/homebrew-explained-in-simple-english-751k3yks)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FZcvfyVxI3KNhEQxQ9H6wfvhdWlW2-p4463u1n.webp?alt=media&token=0b28fc29-f9ac-4f4a-9074-2cd6271a91e2)
So, there are tonnes of jargon, commands, processes that we follow blindly after surfing from the internet without knowing the actual reasons and under the hood processes, that just remain in our short term memory and get purged eventually, thus we don't feel comfortable using or even about discussing in a group about them. 

### [341. Relay or Redux? Choosing the Right State Management Solution](https://hackernoon.com/relay-or-redux-choosing-the-right-state-management-solution)
![](https://cdn.hackernoon.com/images/T2HgFV42ljgj7A0M8cb7Cegcy4o1-2g93kv4.jpeg)
In the rapidly evolving landscape of web development, understanding the differences between state management solutions is crucial. 

### [342. If You're Going to Use Next.js — At Least Use it Right](https://hackernoon.com/if-youre-going-to-use-nextjs-at-least-use-it-right)
![](https://cdn.hackernoon.com/images/Fo8N7AoLcxXrfgNlbc50iPWlErp1-kw130m6.png)
Learn how to properly leverage Next.js with a server-first mindset. Avoid common pitfalls like overusing use client, understand RSC, native fetch, and more.

### [343. Difference Between Real DOM and Virtual DOM: What You Need to Know](https://hackernoon.com/difference-between-real-dom-and-virtual-dom-what-you-need-to-know)
![](https://cdn.hackernoon.com/images/a-red-apple-next-to-a-blue-apple-smshrzvj02lyqzrwlvc935yh.png)
Understanding how the Virtual DOM works is essential for developers who want to make more informed decisions when creating or selecting frontend libraries

### [344. How You Can Build Electron Desktop Application Using React [Beginners]](https://hackernoon.com/how-to-build-electron-apps-with-react-6q6s3789)
![](https://cdn.hackernoon.com/images/dv54p379d.jpg)
Introduction

### [345. Nullish Coalescing and Optional Chaining Operators](https://hackernoon.com/nullish-coalescing-and-optional-chaining-operators-0po3tgf)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FtrOMnxo5DwV4FvAYLPyCZiQide92-9r53ywz.jpeg?alt=media&token=83daed8a-6c52-4511-888c-730574788be2)
Nullish Coalescing operator ( ?? )

### [346. Portals are lit 🔥 ](https://hackernoon.com/portals-are-lit-ep3d3zw9)
![](https://cdn.hackernoon.com/images/fs2183wcx.jpg)
Recently I was introduced to Reacts' createPortal API, which was nothing short of amazing.

### [347. Custom Hook in React for calling API — useApi](https://hackernoon.com/custom-hook-in-react-for-calling-api-useapi-tj1e3103)
![](https://cdn.hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-9u3z29vp.jpeg)
What is a React custom hook and how to build one to fetch data

### [348. Much Needed Google Chrome Updates Cause Websites Load Faster](https://hackernoon.com/much-needed-google-chrome-updates-cause-websites-load-faster)
![](https://cdn.hackernoon.com/images/bmBxAWmM4deEc5kuo2xk1JIWyeN2-lx0312w.png)
Oracle's latest trademark controversy, the new JavaScript temporal object receiving browser support, and some much needed updates to google chrome.

### [349. Philosophies I Learnt From 3 Different React Folder Structures](https://hackernoon.com/philosophies-i-learnt-from-3-different-react-folder-structures)
![](https://cdn.hackernoon.com/images/q6mx6E5l6TgXIk2JYkZfKEBcWnF2-4wa3c2d.png)
This article talks about the journey I have about react folder structure and the philosophies I think are important.

### [350. Designing a Pure Python Web Framework](https://hackernoon.com/designing-a-pure-python-web-framework)
![](https://cdn.hackernoon.com/images/0Np1JGEamwWg7c1MJViBUhCdsEf1-lp334pz.jpeg)
A look at how Reflex, the open-source framework empowering Python developers to build web apps faster, works under the hood.

### [351. How To Build Great React Components Easily And Effortlessly](https://hackernoon.com/how-to-build-great-react-components-easily-and-effortlessly-llr333h)
![](https://cdn.hackernoon.com/images/BUTKpbdTbNRmCTvmcJcWJp8NMoy2-f9y375h.jpeg)
React is such a powerful library, that everyone with knowledge of the basics can build a really good application. Managing state in react is built out of the box with React own state management APIs.

### [352. Debug Your React App, But Don't Die Trying: A How-To Guide](https://hackernoon.com/debug-your-react-app-but-dont-die-trying-a-how-to-guide-4t2g32sq)
![](https://cdn.hackernoon.com/images/VQee2H7b9MdqlHMpVjYYgK9YsSu2-v9e33xt.jpeg)
Debugging is a daily part of every developer's life. I usually go through a process when I encounter a bug that helps me move pretty quickly through issues.

### [353. What is 'this’ in JavaScript?](https://hackernoon.com/what-is-this-in-javascript-835o35kx)
![](https://cdn.hackernoon.com/images/Nv9z8Cle3QV673MG2frRypYu7br1-kw938rf.jpeg)
‘this’ is always been a pain in the a** for many JavaScript developers, but it’s time to say ‘I got this’.

### [354. Rethinking Components with React Hooks](https://hackernoon.com/rethinking-components-with-react-hooks-bdec3yi2)
![](https://cdn.hackernoon.com/drafts/pr17t3yk8.png)
React Hooks have been around since React 16.8 and remain as popular and in demand as ever. They have introduced a completely new way of handling components in React, which may lead you to reevaluate your approach to coding on a fundamental level. Having already been established as the most beloved front-end framework according to Stackoverflow popularity polls, React went above and beyond with the introduction of Hooks.

### [355. React vs. Vue vs. Angular: Which Framework is Best for Developers in 2025?](https://hackernoon.com/react-vs-vue-vs-angular-which-framework-is-best-for-developers-in-2025)
![](https://cdn.hackernoon.com/images/X7y6djS0q0heeEAghUKs3FNYjvz2-my03dxi.jpeg)
Compare React, Vue, and Angular in 2025. Discover how each framework fares on performance, learning, and community support for future-ready web development.

### [356. Building Robust Front-End Interfaces with State Machines in React](https://hackernoon.com/building-robust-front-end-interfaces-with-state-machines-in-react)
![](https://cdn.hackernoon.com/images/zz3g1E514SPvE9SAaiBerWs9THs2-yp837zv.jpeg)
Discover the power of state machines in React for building intuitive wizard interfaces. Learn how to design, implement, and adapt complex user flows with ease.

### [357. Beginners Guider To React Router](https://hackernoon.com/beginners-guider-to-react-router-dw1j3uuq)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FQBtyVu33XvUKiIPXPg1vvF6DSXu1-htad3u6p.jpeg?alt=media&token=f4faa8f0-bb1f-41e6-87fb-60208ea2ac2d)
Today I decided to write about the props history, match, and location that are included in each component that uses React Router. But first, to start warming up here is a simple definition of React Router:

### [358. React Native vs Flutter 2020: A Detailed Comparison](https://hackernoon.com/react-native-vs-flutter-2019-comparison-l23430da)
![](https://cdn.hackernoon.com/images/b82t3012.jpg)


### [359. React, JSX, ES Module Imports And Dynamic Imports In Browser Without Using Webpack](https://hackernoon.com/react-jsx-es-module-imports-dynamic-too-in-browser-without-webpack-kr1n36kb)
![](https://cdn.hackernoon.com/images/pm66324d.jpg)
Everything described in the article is highly experimental and I am cutting corners everywhere. By no means I recommend to use any of that in production :)

### [360. A Closer Look at Theme Redone - a WordPress Theme](https://hackernoon.com/a-closer-look-at-theme-redone-a-wordpress-theme)
![](https://cdn.hackernoon.com/images/IIYj9A0u8BaTH3XOzaGwOsiEeaU2-iig3108.jpeg)
Theme Redone is the new WordPress framework for creating custom WordPress Gutenberg websites by WebRedone.

### [361. How to Retrofit Tests Into a ReactJS Codebases Without Tests](https://hackernoon.com/how-to-retrofit-tests-into-a-reactjs-codebases-without-tests)
![](https://cdn.hackernoon.com/images/a-retro-puzzle-sketch-artstyle-w6kocgtbt5bbhyuki4w71sgm.png)
ReactJs patterns can be a source of mistakes when it comes to the structure of a components hierarchy. 

### [362. 5 Tips for a Novice React Developer](https://hackernoon.com/5-tips-for-a-novice-react-developer-9nq35vv)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-v51w3of7.jpeg)
There's a lot to learn when you're a new React Developer. These 5 Intro Tips will help you avoid simple mistakes many new developers make when starting out. 

### [363. Introducing the at() Method for JavaScript Arrays](https://hackernoon.com/introducing-the-at-method-for-javascript-arrays)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-vf93z4j.jpeg)
This article is about latest ecma script or ES22 update of at() method of array. at() method of array is used for getting the value based on index

### [364. Design Systems: A Front-End Engineer's Guide to Efficient Atomic Design](https://hackernoon.com/design-systems-a-front-end-engineers-guide-to-efficient-atomic-design)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-ne82pga.jpeg)
Learn about design systems, Atomic Design, and the importance of reusable components in adhering to the DRY principle.

### [365. The Axios Nightmare Is Over: Meet Axios-Fixed](https://hackernoon.com/the-axios-nightmare-is-over-meet-axios-fixed)
![](https://cdn.hackernoon.com/images/axios-was-compromised-why-developers-are-moving-to-axios-fixed-overnight-s0a5ugjcwa38f02i4q8bk04e.png)
Axios was compromised in a major supply chain attack affecting 100M+ installs. Learn what happened and how to migrate safely to axios-fixed in minutes.

### [366. The Biggest Features in ES2020/ES2021](https://hackernoon.com/es2020es2021)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-z803nmm.jpeg)
ES2020/ES2021, New ES2020/ES2021 features you might have missed

### [367. How to Publish React Components from any App](https://hackernoon.com/how-to-publish-react-components-from-any-app-hpj3u9r)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FSEsh1o9RwTXYhNjwNNQ7swZEOe33-ped3urq.webp?alt=media&token=ffb8b581-60f4-4b49-81c7-9827e534481f)
In this tutorial, I'll demonstrate how to publish React components from any application to Bit's registry. Components will be published as independent packages that later could be installed using NPM, Yarn or Bit. 

### [368. Implementing Secure Role-Based Access Control (RBAC) in a Next.js Application Using Permit.io](https://hackernoon.com/implementing-secure-role-based-access-control-rbac-in-a-nextjs-application-using-permitio)
![](https://cdn.hackernoon.com/images/Z7fkxfDpjOT4JTLVKWPSiyFHz1j1-5302q3g.png)
Learn how to implement secure, scalable Role-Based Access Control (RBAC) in a Next.js app with Permit.io, managing user permissions and enhancing app security.

### [369. How We Won Facebook Developer’s Circle Community Challenge 2019 [India Chapter]](https://hackernoon.com/inning-first-place-in-india-facebook-developers-circle-community-challenge-2019-sg2h32c8)
![](https://cdn.hackernoon.com/drafts/4y25325z.png)
It was around August 2019 when my friends and I attended our first Facebook Developer’s Circle Build Day in Chennai. We were third-year computer science undergraduates at Sri Sivasubramaniya Nadar College of Engineering (SSN), absolutely addicted to hackathons and building cool things that made a difference. 

### [370. How to Quickly Create a New Gutenberg Block — WordPress Development Tutorial](https://hackernoon.com/how-to-quickly-create-a-new-gutenberg-block-wordpress-development-tutorial)
![](https://cdn.hackernoon.com/images/p1qlvDkIbmPmWQzO2WIVuRZ6PHg1-2v92k1l.jpeg)
We look at developing new blocks using the Create Block tool generating all the necessary files & folders to get you started on Block development path quickly.

### [371. Cut Load Times in Half with These Next.js Tweaks](https://hackernoon.com/cut-load-times-in-half-with-these-nextjs-tweaks)
![](https://cdn.hackernoon.com/images/gDfaauvVjFfzLLeor0JAk1M6t702-pp036y4.png)
To enhance your Next.js application performance you should prevent typical mistakes while applying essential optimization techniques. Discover methods to reduce

### [372. Crafting Automation Magic: A Look Into Modern CV Development Techniques](https://hackernoon.com/crafting-automation-magic-a-look-into-modern-cv-development-techniques)
![](https://cdn.hackernoon.com/images/e62dXSoL6FdWx9wUA9Lka0OQw8A3-8ib31k6.jpeg)
Explore modern CV management through React, Gatsby, and Hygraph CRM integration. Dive into automation with react-pdf and redefine digital personal branding.

### [373. Why Do You Love Frontend Development in ReactJS? [Writing Prompt]](https://hackernoon.com/why-do-you-love-frontend-development-in-reactjs-writing-prompt)
![](https://cdn.hackernoon.com/images/VtoJ3xJJ7EOwWbJEq11aca6nNNh1-pl93nn2.jpeg)
Here are some writing prompts on web development using React.

### [374. How to Write End-to-End Tests for a React application with Cypress](https://hackernoon.com/how-to-write-end-to-end-tests-for-a-react-application-with-cypress-v6h63ybm)
![](https://cdn.hackernoon.com/images/9obq3yvk.jpg)
End to end testing is one of the testing methodologies which is supposed to check whether if an application works as expected or not, by testing the so called user flow.

### [375. Internationalization in CSS](https://hackernoon.com/internationalization-in-css)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-id03ngv.jpeg)
Internationalization In CSS

Prepare your designs for an international audience.

### [376. I spent all summer building a Chrome extension - Here's What I Built](https://hackernoon.com/how-i-ended-up-spending-all-summer-building-a-chrome-extension-zci53rrh)
![](https://cdn.hackernoon.com/drafts/7mgn3ruo.png)
This summer, I set off to build a productivity-based browser and ended up building a Chrome extension. Here’s how the process yielded a product that, while smaller than I initially wanted it to be, set me on the best path possible for future success:

### [377. This Is Why React Team's useEffect Strategy Shines (CodePen Examples Inside)](https://hackernoon.com/this-is-why-react-teams-useeffect-strategy-shines-codepen-examples-inside)
![](https://cdn.hackernoon.com/images/Bf6xbPmhtTcARlzNXM2oktEZuh22-pi92n6p.jpeg)
Explore how the useEffect hook affects React performance. Learn why it runs after rendering and how it can optimize your app.

### [378. Five Days into Vue.JS: My First Five(5) Takeaways](https://hackernoon.com/five-days-into-vuejs-my-first-five5-takeaways-0h1a3140)
![](https://cdn.hackernoon.com/images/PmhdhKuOvzZWYhwBT0rRpl24Z7i1-x1pu38lv.png)
Getting Started with VueJS from ReactJS background, Learning Vue, Vue Fundamentals, My takeaway from VueJS in a Wee

### [379. Using Tailwind Classes to Customize Algolia React Components](https://hackernoon.com/using-tailwind-classes-to-customize-algolia-react-components)
![](https://cdn.hackernoon.com/images/VoliPy4PhDefuF3Ry84BTJ9Bv8V2-efd3i83.jpeg)
Algolia provides a couple of pre-built themes for search experiences as well as the ability to create custom themes.

### [380. How to Use react-router-native-animate-stack Module](https://hackernoon.com/how-to-use-react-router-native-animate-stack-module-5e4r24n4)
![](https://cdn.hackernoon.com/images/y53x3y0x.gif)
React Router Native v5 with your desired customisation transition style! 

### [381. Mastering Modern UI Development with React and Tailwind CSS](https://hackernoon.com/mastering-modern-ui-development-with-react-and-tailwind-css)
![](https://cdn.hackernoon.com/images/HT6CQZaJUrNuIT41gYj8XNtrJAz2-4nb3iy9.webp)
Learn to build responsive and maintainable user interfaces with React and Tailwind CSS in this comprehensive guide.

### [382. 🔥here's How I Built a Stunning Chat App With React 🚀](https://hackernoon.com/heres-how-i-built-a-stunning-chat-app-with-react)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-iu036ec.jpeg)
Realtime Chat App built using React.js, Node.js, Socket.io, Express and MongoDB. This chat app is also responsive. 

### [383. React is Not Really Reactive. Let's Fix That With RxJS!](https://hackernoon.com/react-is-not-really-reactive-lets-fix-that-with-rxjs)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-tn02qdh.png)
Learn how RxJS make better React app for managing complex async data, API calls, and user events, making your apps more efficient and scalable.

### [384. How We Created Our Own ChatGPT](https://hackernoon.com/how-we-created-our-own-chatgpt)
![](https://cdn.hackernoon.com/images/T4VcvyZEUzNuKge7Cxo14hBZUMF3-ng93r2p.jpeg)
Our team decided to write our own chat for working with GPT4 from OpenAI and other ML/LLM models with the ability to customize for the company’s internal needs.

### [385. How to start with Create React App?](https://hackernoon.com/how-to-start-with-create-react-app)
![](https://cdn.hackernoon.com/images/07PslBywmoc0M3yGp1a5mxKeJxB2-s893oc8.jpeg)
Due to the numerous build tools, configuration files, and dependencies, developers frequently find it challenging to create React apps. React JavaScript library, which is a creation of Facebook, functions as a tool for designing user interface components. 

### [386. How to Use Redux in a Project](https://hackernoon.com/how-to-use-redux-in-a-project)
![](https://cdn.hackernoon.com/images/1W3dv3tgGtYsS9uFXn75FQWYeSE2-yb933n5.png)
Redux is JavaScript library which is use for centralized state management .

### [387. How Deemples CEO David Wong built the largest golf app in Malaysia ](https://hackernoon.com/how-deemples-ceo-david-wong-built-the-largest-golf-app-in-malaysia)
![](https://cdn.hackernoon.com/images/PIx5Mr9sM3bJgHs2OZL8fQ6HbKI2-5o4c35eh.jpeg)
Deemples was nominated as one of the best startups in Kuala Lumpur in Startups of the Year hosted by HackerNoon. Here's an interview with its CEO.

### [388. Using Next.js to Effectively Format a Page and Structure Its SEO](https://hackernoon.com/using-nextjs-to-effectively-format-a-page-and-structure-its-seo)
![](https://cdn.hackernoon.com/images/KqfopgYCVjenJNeh8DD99wUIl1C2-t593q4n.jpeg)
Organizing your Next.js application and using its components.

### [389. Navigate JavaScript ES6 Syntaxes for Efficient and Readable Code](https://hackernoon.com/navigate-javascript-es6-syntaxes-for-efficient-and-readable-code)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-7w830w8.jpeg)
Upgrade Your JavaScript Skills with These Essential ES6 Syntax

### [390. How to Render React Components: Comparing Loops and .map()](https://hackernoon.com/how-to-render-react-components-comparing-loops-and-map)
![](https://cdn.hackernoon.com/images/gRvABHmeEfVogoKhXnSbObdUGYc2-5y92kv5.jpeg)
Explore the benefits and trade-offs of rendering React components with for loops vs. .map(). Compare syntax, immutability, JSX integration, and more.

### [391. Hacking Dependency Free React State Management ](https://hackernoon.com/hacking-dependency-free-react-state-management)
![](https://cdn.hackernoon.com/images/CU9T26Y1hNgrvyNxGX0jRAJfpM12-9xd3pir.png)
How to create global state management in React applications without side dependencies and unnecessary rerendering

### [392. Localizing your React App with LinguiJS and Localazy](https://hackernoon.com/localizing-your-react-app-with-linguijs-and-localazy-cc1731an)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMoJkXw8yrXWtwstaEMp5yol53TD2-zc2k2wke.jpeg?alt=media&token=dae8310e-a4f4-46ae-b086-6a22b254c3ec)
Do you have an app that you use and you want to localize it? Localizing is very important to ensure that all people can use your app with ease. With Localazy and LinguiJS you can achieve it easily (and for free)!

### [393. You Don't Need NPM Libraries To Handle Mobile Events](https://hackernoon.com/you-dont-need-npm-libraries-to-handle-mobile-events)
![](https://cdn.hackernoon.com/images/JnwMdaVZrzSOfLb9FHlT2x1vsd62-nmb34h9.png)
A popular NPM library for handling mobile touch events called hammerjs is downloaded 1.4 M times per week but it wasn’t updated since the last 8 years.

### [394. Slow SPAs Kill Conversions—This Is Your Speed Optimization Survival Guide](https://hackernoon.com/slow-spas-kill-conversionsthis-is-your-speed-optimization-survival-guide)
![](https://cdn.hackernoon.com/images/TKnWB3c09OXhUXmmBkpKp8Hlvoq1-6d03ba0.jpeg)
SPA optimization techniques that reduce response times, improve UX, and keep your users coming back.

### [395. How to Integrate Next.js with Electron Using React Server Components](https://hackernoon.com/how-to-integrate-nextjs-with-electron-using-react-server-components)
![](https://cdn.hackernoon.com/images/bP5Aeu1uqdYhdXVQTdg5r4GGHpB2-a4034yv.jpeg)
Combining Next.js and Electron app to use React Server Components without opening ports or running HTTP server even on localhost.

### [396. The Noonification: The DevOps Paradox: A Shift Away From Ops  (8/3/2024)](https://hackernoon.com/8-3-2024-noonification)
![](https://cdn.hackernoon.com/images/noonification_996_j7ji1kun72u8nzcxpopxfeoy.png)
8/3/2024: Top 5 stories on the HackerNoon homepage!

### [397. Here's Everything We Learned From the React Native Summit](https://hackernoon.com/heres-everything-we-learned-from-the-react-native-summit)
![](https://cdn.hackernoon.com/images/bmBxAWmM4deEc5kuo2xk1JIWyeN2-m00327w.png)
Highlights from the deprecation of Create React App, exciting updates from the React Native Summit, and why ES Modules are becoming the standard in JavaScript.

### [398. Stay Up-to-Date: Migrating to React 18 with Confidence](https://hackernoon.com/stay-up-to-date-migrating-to-react-18-with-confidence)
![](https://cdn.hackernoon.com/images/usLqJmqUA2b5joa695sCkWq4hKD3-ui93ynu.jpeg)
The benefits of migrating to React 18 with confidence. Explore its powerful features, step-by-step migration guidance, and optimization strategies.

### [399. An Overview of the Most Popular JS Frameworks for 2020](https://hackernoon.com/an-overview-of-the-most-popular-js-frameworks-for-2020-a8dl36kc)
![](https://cdn.hackernoon.com/images/cbk332om.jpg)
JAVASCRIPT'S RICH AND FUNCTIONAL WORLD

### [400. Testing Apache Superset: Migrating from Enzyme to RTL for Improved Testing](https://hackernoon.com/testing-apache-superset-migrating-from-enzyme-to-rtl-for-improved-testing)
![](https://cdn.hackernoon.com/images/p78YqcSArmS6R4uiGKkhQ5CNJa22-rw93dvm.png)
How to convert Enzyme tests to React Testing Library and other useful RTL tips.

### [401. JavaScript vs. Deno, Vite 6, Astro 5, and More - This Week in JS](https://hackernoon.com/javascript-vs-deno-vite-6-astro-5-and-more-this-week-in-js)
![](https://cdn.hackernoon.com/images/bmBxAWmM4deEc5kuo2xk1JIWyeN2-d2031yl.png)
Today, we don’t just have new updates and tools, but a JavaScript controversy as well, that we have to talk about.

### [402. Building a Logo Creation App with Next.js, Shadcn/ui, and Lucide React](https://hackernoon.com/building-a-logo-creation-app-with-nextjs-shadcnui-and-lucide-react)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-lr9328v.png)
Learn how to build a customizable logo builder app with Next.js, shadcn/ui, html2canvas-pro, and Lucide Icons. Follow our step-by-step guide to create and perso

### [403. Stop Letting Search Hijack Your Pagination](https://hackernoon.com/stop-letting-search-hijack-your-pagination)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-010233i.jpeg)
When search or filters change, your pagination shouldn’t break. Learn a cleaner, cohesive React pattern that keeps page state inside the Pagination component.

### [404. Along Came HERN Stack](https://hackernoon.com/along-came-hern-stack-v8u33u0)
![](https://cdn.hackernoon.com/images/W8O8r27oUwUryhNHNMOvKfQBLNn2-0x2u33sl.jpeg)
The HERN stack stands for HarperDB, Express, React, and Node, the four technologies that make up this particular stack, and they’re all written using JavaScript

### [405. How to Write Tests for React - Part 2 [Beginner's Guide]](https://hackernoon.com/how-to-write-tests-for-react-part-2-beginners-guide-me1i3usd)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FqggWKTQRL1MKDrjhFkHv4BCtod43-49f3ywv.webp?alt=media&token=93745e8a-0fea-4ac8-aa3e-34b58444b916)
Writing React Test with React recommend libraries - Jest & Testing Library for React Intermediate users.

### [406. My Journey of Building a Project Time Tracker Management React App](https://hackernoon.com/my-journey-of-building-a-project-time-tracker-management-react-app)
![](https://cdn.hackernoon.com/images/RPhqHIsm5jbrE1zAw94eMi45iIX2-mg83wtp.jpeg)
it's about my portfolio project for ALX Africa Software Engineering program

### [407. Choosing the Right Data Handling Path in React: Controlled vs. Uncontrolled Components ](https://hackernoon.com/choosing-the-right-data-handling-path-in-react-controlled-vs-uncontrolled-components)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-yg93y0e.jpeg)
Explore the world of React component data handling with a focus on controlled and uncontrolled components.

### [408. You Can Apparently Make JavaScript Art Now](https://hackernoon.com/you-can-apparently-make-javascript-art-now)
![](https://cdn.hackernoon.com/images/bmBxAWmM4deEc5kuo2xk1JIWyeN2-2p0386u.png)
The P5.js creative coding library has reached a new version, solidifying its position as the premier tool for anyone wanting to blend art with code.

### [409. Advanced Testing Techniques in React: Enhancing Test Resilience and Efficiency ](https://hackernoon.com/advanced-testing-techniques-in-react-enhancing-test-resilience-and-efficiency)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-fv93x2l.jpeg)
Discover advanced testing strategies to improve the resilience and efficiency of your React tests.

### [410. IKODIX Helps to Create Admin Panel Fullstack Apps for Your Databases](https://hackernoon.com/ikodix-helps-to-create-admin-panel-fullstack-apps-for-your-databases)
![](https://cdn.hackernoon.com/images/y9OVFPjdpVUENC2T7pL1sZSvNIY2-mk2eg35ws.jpeg)
IKODIX is an online code generator for admin panel full-stack applications for any relational database. 

### [411. How to Install and Use React Image Upload](https://hackernoon.com/how-to-install-and-use-react-image-upload)
![](https://cdn.hackernoon.com/images/0sm1KIKmbZhu9AD2GAr4cKywoN43-6593og7.jpeg)


### [412. 7 Advantages of ReactJS Development](https://hackernoon.com/7-advantages-of-reactjs-development)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-1r03kvf.jpeg)
ReactJS is an open-source JavaScript package that is used to create rich and interactive user interfaces. 

### [413. This One Simple Change Makes Your Website More Accessible ](https://hackernoon.com/this-one-simple-change-makes-your-website-more-accessible)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-7p02sl4.jpeg)
Accessibility is a community-driven effort to make digital accessibility easier and typography is a part of this conversation. 

### [414. I Built an Open-Source Schema Visualization Tool for Mongoose/MongodDB Under 1000 Lines of Code](https://hackernoon.com/i-built-an-open-source-schema-visualization-tool-for-mongoosemongoddb-under-1000-lines-of-code)
![](https://cdn.hackernoon.com/images/sDATQ8jkcuSaZ8ZnpCerfWSeVhk2-8kb3073.jpeg)
This article is about an open-source tool that can create schema visualizations from Mongoose schema files.

### [415. Using the Shadow DOM to Isolate Styles on a DOM That Is Not Yours](https://hackernoon.com/using-the-shadow-dom-to-isolate-styles-on-a-dom-that-is-not-yours)
![](https://cdn.hackernoon.com/images/7OHSNWE6pKYVHaleLrssNcNVlPe2-xu037jq.jpeg)
Shadow DOM is perfect for when you need to embed a widget in a DOM you don't own or have access to. Here's how to use it.

### [416. How We Created Custom React Components for Any Front End](https://hackernoon.com/how-we-created-custom-react-components-for-any-front-end)
![](https://cdn.hackernoon.com/images/7OHSNWE6pKYVHaleLrssNcNVlPe2-uo735y2.jpeg)
We created a lightweight solution using React that has a global state and runs independently in the background.

### [417. Supercharge Your SEO Game: Powered By getStaticProps](https://hackernoon.com/supercharge-your-seo-game-powered-by-getstaticprops-dp1e43ytf)
![](https://cdn.hackernoon.com/drafts/1xbs3yz5.png)
This is mainly useful for websites that use React/NextJS with a CMS (Content Management System) integration. No matter, whether it's WordPress, Contentful, Prismic or any other CMS. This concept is highly relevant for companies that require non-engineers to update the content easily. Whether, it's a change in the content, A/B testing or conversion-rate-optimization related. There are many reasons why the content of a website gets updated quite often throughout the year. 

### [418. Handling Readable React Content States](https://hackernoon.com/handling-readable-react-content-states-g84135xv)
![](https://cdn.hackernoon.com/images/lTGvuBOCffXemOB6GWBup5ch7562-783q37ag.jpeg)
Content streams are crucial in React projects but decrease maintainability. This article covers the readability of 2 ways to handling content states in React.

### [419. A React HOC for AWS Cognito to Simplify User Authentication](https://hackernoon.com/a-react-hoc-for-aws-cognito-uv1kz398h)
![](https://cdn.hackernoon.com/images/uo1mk39os.jpg)
TL;DR: AWS Cognito offers robust handling of user Authentication flows, including via Social Providers such as Google and Facebook. Here we describe a Higher Order Component for your ReactJS Web App, and how to configure Cognito.

### [420. Omni-WorldBench Exposes the Biggest Blind Spot in AI World Modeling](https://hackernoon.com/omni-worldbench-exposes-the-biggest-blind-spot-in-ai-world-modeling)
![](https://cdn.hackernoon.com/images/1774461124860_b2vlhka8.png)
This is a Plain English Papers summary of a research paper called Omni-WorldBench: Towards a Comprehensive Interaction-Centric Evaluation for World Models [h...

### [421. Announcing Redux-Ruleset NPM Module](https://hackernoon.com/announcing-redux-ruleset-zkq365m)
![](https://cdn.hackernoon.com/images/1rp32sl.jpg)
Managing data-flows can be quite tricky in javascript. A pattern that really fascinated me over the last years is the flux architecture from facebook. Especially the redux implementation. But redux just tells you how to store your data and how to update the state. It’s really liberal in how to manage data-flows. So really awesome data-flow middleware libs where born like redux-saga and redux-observable.

### [422. Sooo! I Published My First Chrome Extension Font Tester - Here's How It Went.](https://hackernoon.com/sooo-i-published-my-first-chrome-extension-font-tester-heres-how-it-went)
![](https://cdn.hackernoon.com/images/9N4ACnZ47AVK6fuKDziF6ZGm07i1-q803zxm.png)
I built a Chrome extension to help me choose fonts; I now pass on the wisdom to anyone else looking to build extensions.

### [423. Installing Locally Is Easy Using the Makefile: An Apache Superset Guide](https://hackernoon.com/installing-locally-is-easy-using-the-makefile-an-apache-superset-guide)
![](https://cdn.hackernoon.com/images/p78YqcSArmS6R4uiGKkhQ5CNJa22-2b93hf2.png)
In this article, I'll guide you through a streamlined local installation of Apache Superset using the makefile.

### [424. My Journey Building an Open Source Project](https://hackernoon.com/my-journey-building-an-open-source-project)
![](https://cdn.hackernoon.com/images/8RnQ1oF39OYpmEH7Id1bSlmWcKr1-ega2v4f.jpeg)
Sidi details their open-source journey and where they are now.

### [425. The Chrome Debugger is easier to use than you might think](https://hackernoon.com/the-chrome-debugger-is-easier-to-use-than-you-might-think)
![](https://cdn.hackernoon.com/images/sRxI3vZiX2Qj4CDJaY5YTK4h9DB3-jq93ulg.jpeg)
Chrome Debugger is so much better than using console logs. It's easy to use, no configuration required and it just works.

### [426. React and the useRef Hook](https://hackernoon.com/react-and-the-useref-hook)
![](https://cdn.hackernoon.com/images/Qam0yHGLEIaMMqEaBuBm4zQZysQ2-6nd3bj3.jpeg)
Using React refs in reactjs.

### [427. My First React App, markView: An Interactive Markdown Previewer](https://hackernoon.com/my-first-react-app-markview-an-interactive-markdown-previewer-4h7033jm)
![](https://cdn.hackernoon.com/images/e178Xecok0TlGP5gaTutNkU1thY2-0q833x9.jpeg)
Here is mine documentation for markView: Interactive Markdown Previewer, my first React app. 

### [428. Create a Podcast Player with React and AG Grid](https://hackernoon.com/how-to-write-a-podcast-app-using-react-and-ag-grid)
![](https://cdn.hackernoon.com/images/HdcJmpjGyNcFVWOFhWg6Uj7vZfb2-4p037me.jpeg)
Detailed instructions on how to write a podcast player, reading RSS episode feeds and rendered in a sortable and filterable data grid.

### [429. I Had to Reverse-Engineer React, Shadow DOM, and CSP to Automate Safari Without Chrome](https://hackernoon.com/i-had-to-reverse-engineer-react-shadow-dom-and-csp-to-automate-safari-without-chrome)
![](https://cdn.hackernoon.com/images/a-developer-controlling-a-safari-browser-with-visible-layers-of-dom-shadow-roots-and-security-barriers-contrasted-against-a-missing-chrome-dev-tools-control-panel-cs520s6utgcnz6cslzkgreqh.png)
Learn how to automate Safari without Chrome DevTools Protocol by solving React state, Shadow DOM, and CSP challenges.

### [430. Webiny v5 Update: DynamoDB, VPC  Support, and Performance Improvements](https://hackernoon.com/webiny-v5-update-dynamodb-vpc-support-and-performance-improvements-5c5w33kn)
![](https://cdn.hackernoon.com/images/ZkfENnt2LdcfkiwMm6iukaGEHnB3-fda3fke.jpeg)
In the last 6 months, we put 100% of our focus on addressing this feedback and getting Webiny to the next level. Today we present the Webiny v5 release.

### [431. How to Use Reactjs to Create a Twitter “What’s Happening” Bar Form ](https://hackernoon.com/how-to-use-reactjs-to-create-a-twitter-whats-happening-bar-form-q12l337o)
![](https://cdn.hackernoon.com/images/yCWqKEvlXIPv9F19CSQUqiMUnsM2-9d1e33nw.jpeg)
Creating a Twitter What's Happening Bar Form in Reactjs including common actions such as: upload images, videos, gifs, and more.

### [432. Discover Why These 5 Libraries are Perfect for Your Next ReactJS Project](https://hackernoon.com/discover-why-these-5-libraries-are-perfect-for-your-next-reactjs-project)
![](https://cdn.hackernoon.com/images/QepJZAyLUDcMpCXcZjnWeHJM7ad2-km036mu.jpeg)
In this post, we will discuss 5 Reactjs libraries you can use in your next project. 

### [433. React Introduction](https://hackernoon.com/react-introduction-en1333bo)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-dsz33yw.jpeg)
React happens to be the most popular JavaScript framework sourced from Stack Overflow Developer Survey (2020). It is the best alternative to two other popular JavaScript frameworks, Angular and Vue. They all allow you to create fast apps in the browser.

### [434. The “Why” Behind React Suspense: Understanding the Original Vision](https://hackernoon.com/the-why-behind-react-suspense-understanding-the-original-vision)
![](https://cdn.hackernoon.com/images/zTu6NoN2srY9FEmjgrui0Dl7SM23-fc03b9d.png)
Learn what was the first vision of React suspense component and why it matters.

### [435. Hemingway's Lessons on Building Reusable React Components](https://hackernoon.com/hemingways-lessons-on-building-reusable-react-components)
![](https://cdn.hackernoon.com/images/3FnIKHGgbNVQq1IJMsgvsFiWteK2-od93jwp.jpeg)
What can we learn about coding and creating reusable components with react from one of the greatest novelists ever?

### [436. Guide to Concurrency in React 18: How and Why](https://hackernoon.com/guide-to-concurrency-in-react-18-how-and-why)
![](https://cdn.hackernoon.com/images/TU75aLEAtQahH1ixBhcEmzyyikA2-aob34lc.jpeg)
Guide to concurrency, CPU- and IO-bound components, and other interesting stuff. Finally, learn wtf deferred value is.

### [437. A Class on why classNames are Used in React but not Preact](https://hackernoon.com/why-you-have-to-use-classname-in-react-but-not-in-preact)
![](https://cdn.hackernoon.com/images/WYD1WTMtVHVE2b8k9DtCh2EGuNM2-db027dz.jpeg)
If you use JSX inside React you can't use standard HTML properties, like class. You have to camelCase HTML properties. But it's not the case with Preact!

### [438. This React Testing Method Relies on Context to Imitate Real-life Scenarios](https://hackernoon.com/this-react-testing-method-relies-on-context-to-imitate-real-life-scenarios)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-mp02sgi.jpeg)
In this post, I’ll walk through my thought process for testing React components that rely on context, using Testing Library.

### [439. Understanding React Rendering Without the Buzzwords](https://hackernoon.com/understanding-react-rendering-without-the-buzzwords)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-wr02vky.jpeg)
React is often praised for being “declarative,” “efficient,” and “component-based.” But those words don’t mean much when you’re stuck wondering why your compone

### [440. The Results Are In: How Did React Perform in 2019?](https://hackernoon.com/how-react-performed-in-2019-numbers-comparison-y04w2bqd)
![](https://images.unsplash.com/photo-1569748130764-3fed0c102c59?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
A fight that started years ago - fight for the crown of the most popular JavaScript framework, was intense in 2019. Furious opponents of the React weren’t sleeping during the year. Probably no one will argue that the three frameworks that were constantly “fighting”, were Vue.js, React and Angular. 

### [441. Do You Need to Give Up jQuery for React?](https://hackernoon.com/do-you-need-to-give-up-jquery-for-react)
![](https://cdn.hackernoon.com/images/8Ao169TQuSNSRJrN8ETJwU0y2iJ2-em0328g.jpeg)
As developers, we see that every technology has its pros and cons. It’s the same for jQuery and React so it is the best to make a decision based on what we want

### [442. 7 Top UI Component Libraries and Frameworks: ReactJS in 2022](https://hackernoon.com/7-best-ui-components-libraries-and-frameworks-for-reactjs-in-2022-2)
![](https://cdn.hackernoon.com/images/vGeVbE0sIyeHrci3rttzrLEiKP82-lcc3k8i.jpeg)
Check out the Best 7 UI components libraries and frameworks of the popular JS framework ReactJS you should follow in 2022 to build an application with better UI

### [443. How I Built an API to Verify Claims of Feat](https://hackernoon.com/how-i-built-an-api-to-verify-claims-of-feat-q2h31st)
![](https://cdn.hackernoon.com/images/dEr5DsADiKOXf3cSyYhd9dUYVNo1-1t4t34em.jpeg)
I'm breaking down the process of building an API to verify claims. A few weeks ago, I started working on a project that I submitted to the Lisk Builder Program.

### [444. Build an NFT Website Using The Flow Blockchain and Cadence [Part 2]](https://hackernoon.com/build-an-nft-website-using-the-flow-blockchain-and-cadence-part-2)
![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-xa93zc7.png)
With a collectibles portal on the Flow blockchain and deployed to the testnet we can now focus on creating the frontend using React.

### [445. A Very Early Introduction to Building your Own Web App With Code](https://hackernoon.com/a-very-early-introduction-to-building-your-own-web-app-with-code)
![](https://cdn.hackernoon.com/images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-aue3pzj.jpeg)
Here is a brief guide to getting started with coding and building your website online.

### [446. An Advanced Approach to Migrating From useState to useReducer](https://hackernoon.com/an-advanced-approach-to-migrating-from-usestate-to-usereducer)
![](https://cdn.hackernoon.com/images/p78YqcSArmS6R4uiGKkhQ5CNJa22-6ma3fuu.jpeg)
In this blog, we'll dive into a more complex example of how to manage state. Let's take a look at how we can make state management more scaleable.

### [447. How I Went From Knowing Nothing About Canvas to Hosting a Workshop ](https://hackernoon.com/how-i-went-from-knowing-nothing-about-canvas-to-hosting-a-workshop)
![](https://cdn.hackernoon.com/images/SoxeVNTzjxgjweBKR6O7GRg7WCi1-1e1384v.png)
Canvas often feels like a mystery box—we use tools built on top of it, but few of us truly understand how it works. 

### [448. Instead of Copy-Pasting That "Click Outside" Snippet, Here's a Better Alternative](https://hackernoon.com/instead-of-copy-pasting-that-click-outside-snippet-heres-a-better-alternative)
![](https://cdn.hackernoon.com/images/JA5IYEzAm5Nok0M7DPM0ZPvaLqM2-im83dvk.jpeg)
A tiny, zero-dependency React hook to detect clicks outside any element. Fully typed, SSR-safe, and works with Next.js. Under 400 bytes gzipped.

### [449. Noonies Nominee Alex Cloudstar on His Love for JavaScript](https://hackernoon.com/noonies-nominee-alex-cloudstar-on-his-love-for-javascript)
![](https://cdn.hackernoon.com/images/A7coZ0uhYMgPNXXtkg7aiDfCsxT2-4813b68.gif)
Alex Cloudstar has been nominated for a 2021 Noonies award for his work on React and Typescript.

### [450. React Hooks Are Powerful—But Here’s What They Won’t Fix](https://hackernoon.com/react-hooks-are-powerfulbut-heres-what-they-wont-fix)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-vp02vw9.jpeg)
Hooks are powerful—but they won’t fix bad design, unclear logic, or rushed decisions.

### [451. "Code over a tile"// React - from sass files to Styled-Components. [PART II]](https://hackernoon.com/code-over-a-tile-react-from-sass-files-to-styled-components-part-ii-qbfml31b0)
![](https://cdn.hackernoon.com/images/t68hx3qb2.jpg)
In Part I we saw how to move from sass to a Styled Component for a simple component. So this tutorial assume that you have already installed the styled component made your first try with it. Now we are going to increase the complexity of our controls in the chat app moving to styled components the messages in the chat window.

### [452. New Template Offers Minimal Setup to Get React Working ](https://hackernoon.com/new-template-offers-minimal-setup-to-get-react-working)
![](https://cdn.hackernoon.com/images/TqZEvjRDPjR7f5kVRi9AZma7pj12-p4035eb.jpeg)
The initialized project is designed for client-side applications exclusively. 

### [453. Sheriff Release v16 is Here With Support for Astro.js](https://hackernoon.com/sheriff-release-v16-is-here-with-support-for-astrojs)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-ru93lpg.jpeg)
Sheriff's latest release, version 16, integrates Astrojs Framework, Algolia DocSearch and eslint-plugin-fsecond

### [454. How to Build an Answer-to-Earn Platform with React, Solidity and CometChat](https://hackernoon.com/how-to-build-an-answer-to-earn-platform-with-react-solidity-and-cometchat)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-e993x0s.jpeg)
This tutorial combines blockchain technology, real-time communication, and user-generated content to create an interactive platform that rewards users for their

### [455. How to Share Serializable Data Between React Components in Next.js](https://hackernoon.com/how-to-share-serializable-data-between-react-components-in-nextjs)
![](https://cdn.hackernoon.com/images/ctaUGkjQdSR2jPBeTNFHo6C7nZk1-z282vh8.png)
This article demonstrates how you can share any serializable data between React components.

### [456. Reactime, Time Traveling State Debugger: Now Supporting Concurrent Mode, Routers, and more](https://hackernoon.com/time-traveling-state-debugger-reactime-now-supporting-concurrent-mode-routers-and-more-b1s36o2)
![](https://images.unsplash.com/photo-1524678714210-9917a6c619c2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Chrome dev tool for tracking and visualizing state changes in React applications

### [457. From Playful Ideas to Powerful Tools: Building with Passion for Construction](https://hackernoon.com/from-playful-ideas-to-powerful-tools-building-with-passion-for-construction)
![](https://cdn.hackernoon.com/images/N8o4JXz6IQW92auFcLHvjx85NPG3-a60375w.png)
Working in the construction sector means dealing with large volumes of data, making performance a key factor.

### [458. An Overview of Next.js Router ](https://hackernoon.com/an-overview-of-nextjs-router-2hz32d4)
![](https://cdn.hackernoon.com/images/2D17XW9VheScfPr4MNJNPZhFHT82-0aa3omy.jpeg)
These tips and tricks for you on the Next.js router help you make your DX better and code cleaner

### [459. The Quick and Dirty Guide to Testing React Hooks that use RxJS](https://hackernoon.com/quick-guide-to-testing-react-hooks-that-uses-rxjs-582lv35pa)
![](https://cdn.hackernoon.com/drafts/84on32p7.png)
RxJs is cool when you work with complex async operations. RxJS is designed for reactive programming using Observables. It converts your async operations to Observables.  With observables we can "watch" the data stream, passively listening for an event.

### [460. The Noonification: The Issue With Crypto Transactions Today (7/16/2023)](https://hackernoon.com/7-16-2023-noonification)
![](https://cdn.hackernoon.com/images/noonification_865_h4stjq3mshlcxmaps06zeu2f.png)
7/16/2023: Top 5 stories on the Hackernoon homepage!

### [461. 4 reasons to use React in your next Frontend Project](https://hackernoon.com/4-reasons-to-use-react-in-your-next-frontend-project)
![](https://cdn.hackernoon.com/images/WXXGGd4rPWYhtAZUmeftwq2hnlC2-yz436ey.jpeg)
With all its stardom and technical excellence, React will remain the superstar of web app development. However, one of the most significant aspects of using Rea

### [462. The Noonification: Introducing Drag Your GAN: Drag Objects to Create New Images (6/25/2023)](https://hackernoon.com/6-25-2023-noonification)
![](https://cdn.hackernoon.com/images/noonification_601_ilnibmbwhcgcpcczxjf504x9.png)
6/25/2023: Top 5 stories on the Hackernoon homepage!

### [463. Thrilled to be Recognized as the 2021 HackerNoon Contributor of the Year - React](https://hackernoon.com/thrilled-to-be-recognized-as-the-2021-hackernoon-contributor-of-the-year-react)
![](https://cdn.hackernoon.com/images/7FWGsynngiU89ohyitGw0qxV0L42-om930mp.png)
How does it feel to be a winner of Noonies 2021 as the React.js Contributor? Fantastic. Read how we intend to keep the title, our goals for 2022, and more.

### [464. The Noonification: Massa (7/30/2023)](https://hackernoon.com/7-30-2023-noonification)
![](https://cdn.hackernoon.com/images/noonification_994_ctqsw6nd94pxs51zmepe0r6v.png)
7/30/2023: Top 5 stories on the Hackernoon homepage!

### [465. Hooks Burnout: Why I Am Wishing for the Return of Class Components](https://hackernoon.com/hooks-burnout-why-i-am-wishing-for-the-return-of-class-components)
![](https://cdn.hackernoon.com/images/GQLr0iI89TScjg2dwBM40dsQQPV2-h893r40.jpeg)
Discover the challenges and frustrations of Hooks burnout in React development as a seasoned Front End Developer shares their concerns and seeks improvement. 

### [466. How to Handle REST API Requests in React](https://hackernoon.com/how-to-handle-rest-api-requests-in-react-pn3h3yoy)
![](https://cdn.hackernoon.com/drafts/jaboj3yhk.png)
REST APIs are commonly used in web development. They are programming interfaces that web apps use to 'talk' to each other. They are used to access features and data. 'REST' (Representational State Transfer) is a concept that defines the APIs properties. This article will focus on the use of web-based APIs to retrieve data from a database. 

### [467. Scalable Folder Structure in ReactJS](https://hackernoon.com/scalable-folder-structure-in-reactjs-tt2c3y26)
![](https://cdn.hackernoon.com/drafts/b22a3y5m.png)
Scalable folder structure plays a big role in project maintenance. We need an intuitive folder structure which other developers in the team will find it easy to locate and easy to relate, I call it as ELER.

### [468. The Noonification: Massa (7/7/2023)](https://hackernoon.com/7-7-2023-noonification)
![](https://cdn.hackernoon.com/images/noonification_949_h6tspjkdyxpovoz4r4jqudcz.png)
7/7/2023: Top 5 stories on the Hackernoon homepage!

### [469. Loading Components Conditionally on Mobiles, Tablets and Desktop in ReactJS](https://hackernoon.com/loading-components-conditionally-on-mobiles-tablets-and-desktop-in-reactjs-cwm38u7)
![](https://cdn.hackernoon.com/drafts/mu1ng38k5.png)
Sometimes we are given a screen or PSD which have different layouts for mobile and desktop or for that matter even tablets and we need to render the layout with respect to device resolution. We know that we have been doing this from ages using media queries in CSS, but when it comes to ReactJS just hiding the element won’t do better. Because the components are still getting initialized, the lifecycle methods are getting invoked, rendering/re-rendering is not stopping and what not. Below is the example to demonstrate this, although its quite obvious but just to make a point.