react.md

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

# [react](https://hackernoon.com/tagged/react)
### Let's learn about [React](https://hackernoon.com/tagged/react) via these 500 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. 5 Best JavaScript Frameworks in 2017](https://hackernoon.com/5-best-javascript-frameworks-in-2017-7a63b3870282)
![](https://cdn.hackernoon.com/drafts/pd2p3y41.png)
JavaScript popularity continues its rising. In 2016 we’ve witnessed such great changes, as AngularJS entire upgrade and introduction of Angular 2, ultimate dominating of jQuery that is applied on 96.5% of all JS sites, evolution of ECMAScript, two updates of Node.js in April and October accordingly, React finest hours, and even more. What to expect from 2017? — Here’s what we know so far: Angular 4 is expected in March 2017, ES2017 edition is planned for mid-2017, Bootstrap v4 release should be anticipated this year as well.

### [2. React Stateless Functional Components: Nine Wins You Might Have Overlooked](https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-4803bir.png)
React&nbsp;.14 introduced a simpler way to define components called stateless functional components. These components use plain JavaScript functions. Here’s the before and after in ES6:

### [3. 23 Best React UI Component Libraries And Frameworks](https://hackernoon.com/23-best-react-ui-component-libraries-and-frameworks-250a81b2ac42)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-dy03as0.jpeg)
<em>A curated summary of </em><a href="https://blog.bitsrc.io/11-react-component-libraries-you-should-know-178eb1dd6aa4" target="_blank"><strong><em>part 1</em></strong></a><em> and </em><a href="https://blog.bitsrc.io/best-react-ui-component-libraries-for-2018-part-2-d231dcb04c0a" target="_blank"><strong><em>part 2</em></strong></a><strong><em> </em></strong><em>of</em><strong><em> “</em></strong><em>Best </em><a href="https://hackernoon.com/tagged/react" target="_blank"><em>React</em></a><em> Component Libraries for 2019</em><strong><em>”</em></strong><em>.</em>

### [4. Angular vs React vs Vue: Which is the Best Choice for 2019?](https://hackernoon.com/angular-vs-react-vs-vue-which-is-the-best-choice-for-2019-16ce0deb3847)
![](https://cdn.hackernoon.com/images/7m4a23g7.jpg)


### [5. ReactJS vs Angular Comparison: Which is Better?](https://hackernoon.com/reactjs-vs-angular-comparison-which-is-better-805c0b8091b1)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-4n03bab.jpeg)
Choosing the right framework for a new JavaScript system, application or website is a top priority for any business. It can have a direct bearing on project’s durability and ability to fit in deadlines, further code maintainability, and scalability of your future app.

### [6. API testing with Jest](https://hackernoon.com/api-testing-with-jest-d1ab74005c0a)
![](https://cdn.hackernoon.com/images/djp30zm.jpg)


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

### [8. React Native: How to Setup Your First App](https://hackernoon.com/react-native-how-to-setup-your-first-app-a36c450a8a2f)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-2o03bh5.png)
<strong>PLEASE NOTE</strong>

### [9. How to Add Script Tags in React](https://hackernoon.com/how-to-add-script-tags-in-react)
![](https://cdn.hackernoon.com/images/dNNBDAvxyhdzfKhIWAuPr4PE1Zx1-wb93ldw.jpeg)
Adding a new script tag and directly appending it to the <head> element of the page is the easiest way to add <script> tags in the React app.

### [10. 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.

### [11. 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

### [12. Creating a Library of React Components using Create React App](https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-ae83xl7.jpeg)
UPDATE: You can use the npm package create-component-lib to automate all the steps described in this blog post.

### [13. Create React App is Dead! Here are Some Alternatives](https://hackernoon.com/create-react-app-is-dead-here-are-some-alternatives)
![](https://cdn.hackernoon.com/images/LeMjfcP9FWQwYDMppEvlEeeIomE2-id92ikt.jpeg)
CRA may be "dead", but there are many alternative tools available for building React applications that offer superior performance and faster development times. 

### [14. How to Handle Hover Events in React](https://hackernoon.com/how-to-handle-hover-events-in-react)
![](https://cdn.hackernoon.com/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-oy83wbp.jpeg)
In this guide, you will see how to handle hover events, one of the most common user interactions in web apps.

### [15. 3 Coding Interview Challenges for Mid-level React Developers](https://hackernoon.com/top-3-coding-challenges-for-mid-level-react-developers)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-n803oce.jpeg)
React interviews can be challenging. There are several concepts in React. Most React interviews have coding challenges. 

### [16. 110% Complete JWT Authentication with Django & React - 2020](https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-iejq34ta)
![](https://cdn.hackernoon.com/drafts/1gn2er5.png)
ReactJS is a fantastic frontend framework, and Django is a fantastic backend framework. However, as usual when dealing with anything of more than trivial complexity, it isn’t easy to get the two to place nicely together. It's not like taping a banana to a wall.

### [17. Preact vs. React: A Quick Comparison](https://hackernoon.com/major-differences-between-preact-and-react-which-one-should-you-use)
![](https://cdn.hackernoon.com/images/hQ098u52DzPm2Y4UITQcQXtLRAk2-ev93j9p.jpeg)
Should you choose React or Preact for software developments? It depends. Learn the difference between the JS libraries here.

### [18. How to Build a QR Code Generator in React](https://hackernoon.com/how-to-build-a-qr-code-generator-in-react)
![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-yk93x2w.jpeg)
The idea behind creating a quick response (QR) code generator is to translate data from images to text. A QR code is simply the representation of image data as text, and it has a lot of useful applications from restaurant menus and concert tickets, to online calendar invites, payments, and the list goes on. 

### [19. A Map To Modern JavaScript Development (2017)](https://hackernoon.com/a-map-to-modern-javascript-development-2017-16d9eb86309c)
![](https://cdn.hackernoon.com/images/a-beautifully-complex-map-kp0fc2tovdymniun2qhjq692.png)
So you’ve been doing REST APIs for the past 5 years. Or perhaps you’ve been optimizing searches for your company’s gigantic database. Maybe writing the embedded software for a microwave oven? It’s been a while since you were rocking some Prototype.js to do proper OOP in the browser. And now you’ve decided it’s time to get up to speed with your frontend skills. You take a look at the landscape and it looks like <a href="https://thefullfool.files.wordpress.com/2010/09/wheres-waldo1.jpg" target="_blank">this</a>.

### [20. 30 Next.js Interview Questions: Get Ready for Your Dream Job](https://hackernoon.com/30-nextjs-interview-questions-get-ready-for-your-dream-job)
![](https://cdn.hackernoon.com/images/UbCmlThZ9FNYM26PVdlVOybODPs1-vw93qxq.jpeg)
Ace Your Next.js Interview with these commonly asked Next.js interview questions and answers.

### [21. 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.

### [22. Effective Code Splitting in React: A Practical Guide](https://hackernoon.com/effective-code-splitting-in-react-a-practical-guide-2195359d5d49)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-es82rfa.jpeg)
Large bundle sizes and slow startup is a common problem faced by single-page applications (SPAs), since they typically download all the JavaScript required for every single page of the application right at the start, before rendering a single pixel.

### [23. From Zero to Web3 Hero: Building a Multichain Dapp from Scratch](https://hackernoon.com/from-zero-to-web3-hero-building-a-multichain-dapp-from-scratch)
![](https://cdn.hackernoon.com/images/YCxWeB1114PupVFVYclhZfpceCQ2-t2b3uwd.png)
What if we told you that a developer without blockchain knowledge can create a multichain dApp in a couple of minutes? Let’s explore how it's possible!

### [24. React forms with Formik and Unit Testing with react-testing-library](https://hackernoon.com/react-forms-with-formik-and-unit-testing-with-react-testing-library-j0b32c9)
![](https://cdn.hackernoon.com/images/qg2po3275.jpg)
Setup

### [25. Setting up a GraphQL Server and Client in Next.js](https://hackernoon.com/setting-up-a-graphql-server-and-client-in-nextjs)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-5nc3tdq.jpeg)
This tutorial will explore how to create a GraphQL server and client with Next.js to provide a more efficient and flexible development experience for our users.

### [26. 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.

### [27. Building React Forms with Formik, Yup, React-Bootstrap with a Minimal Amount of Pain and Suffering](https://hackernoon.com/building-react-forms-with-formik-yup-and-react-bootstrap-with-a-minimal-amount-of-pain-and-suffering-1sfk3xv8)
![](https://cdn.hackernoon.com/images/gzft3xdd.jpg)
A few days ago I applied for a front-end dev job and heard back from the company. They followed up with an email and wanted me to complete a React coding challenge on HackerRank as part of the interview process. The test consisted of only two question and pertained to React. 

### [28. 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.

### [29. 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.

### [30. 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

### [31. How I configure VSCode for Everything](https://hackernoon.com/how-i-configure-vscode-for-everything-7df65a316a52)
![](https://cdn-images-1.medium.com/max/2600/1*j-b1dZsAJGfhUEQVHu2Wpw.jpeg)
<a href="https://hackernoon.com/how-i-configure-vscode-for-everything-7df65a316a52?source=rss----3a8144eabfe3---4"></a>

### [32. Implement a Dynamic Breadcrumb in React/NextJS](https://hackernoon.com/implement-a-dynamic-breadcrumb-in-reactnextjs)
![](https://cdn.hackernoon.com/images/KLWopdD8nMNFrlEbvhSNqn6YAW72-oc02kdn.jpeg)


### [33. 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.

### [34. Mastering Higher Order Components (HOCs) in React](https://hackernoon.com/mastering-higher-order-components-hocs-in-react)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-7493xab.jpeg)
Discover how to supercharge your React applications with code reuse and maintainability.

### [35. Handling Loading Actions: The Proper Way in Redux](https://hackernoon.com/handling-loading-actions-the-proper-way-in-redux-t3k36e8)
![](https://cdn.hackernoon.com/images/pp6p36ml.jpg)
TLDR; Don’t put UI logic into reducers instead put it into a separate reducer.

### [36. How to Design a Splash Screen With Expo and React Native](https://hackernoon.com/how-to-design-a-splash-screen-with-expo-and-react-native)
![](https://cdn.hackernoon.com/images/iHKErLv7KAegkfw3m5jwsrsy3J63-3q4379a.jpeg)
You have made a great app and of course, why not publish it right? But then you open your expo app and see the default boring splash screen provided by Expo.

### [37. Create React Modal using reactjs-popup](https://hackernoon.com/create-react-modal-using-reactjs-popup-m24m231v1)
![](https://cdn.hackernoon.com/images/ng4o131me.jpg)
Nowadays, Modals are one of the most used components in React Application, having an easy way to create React Modals will help you sheep Modals related features fast in your upcoming React Applications.

### [38. 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

### [39. React vs. JavaScript: Why React Web Apps Are Better than Plain Websites](https://hackernoon.com/react-vs-javascript-why-react-web-apps-are-better-than-plain-websites)
![](https://cdn.hackernoon.com/images/FpKROxxtLBRmSsCCb4lxCS7LBVr2-s0037h6.jpeg)
With single-page apps taking over the world, this is the perfect time to know how React won the battle of React vs JavaScript and why you should care.

### [40. How to Import Icons From Figma in a Cool Way](https://hackernoon.com/how-to-import-icons-from-figma-in-a-cool-way)
![](https://cdn.hackernoon.com/images/94TjYOVR1JXms3w4UQBvIb761qF2-s753xdm.jpeg)
This guide shows how to easily import icons from Figma into a React/Vue project,

### [41. Using PrismJS as a Syntax Highlighter in React](https://hackernoon.com/using-prismjs-as-a-syntax-highlighter-in-react)
![](https://cdn.hackernoon.com/images/OJljH3PJ19XhnfrEjYPYRLg9Y2s2-pu136y8.jpeg)
PrismJS is a library written using JavaScript, which is used for syntax highlighting or code highlighting.

### [42. 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

### [43. How to Pass A Function via Props in React](https://hackernoon.com/how-to-pass-a-function-via-props-in-react)
![](https://cdn.hackernoon.com/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-mq83lgm.jpeg)
In this article, we’ll explore how to use props to pass a function from parent to child components. 

### [44. 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

### [45. Fetch Data From a JSON File With a React & Redux App](https://hackernoon.com/fetching-data-from-a-json-file-with-a-react-and-redux-app)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-eq143ow9.jpeg)
This guide explains how to use React and Redux to fetch data from JSON files in an easy and lightweight method through a real example and well explained steps. 

### [46. Optimize React Native Map in Your Applications [A How To Guide]](https://hackernoon.com/how-to-optimize-react-native-map-in-your-application-eeo3nib)
![](https://cdn.hackernoon.com/drafts/gv1333nh1.png)
Four ways to make your React Native map become a lot faster and more responsive.

### [47. I Developed A Visual Development Tool For Web Applications with React](https://hackernoon.com/i-developed-a-visual-development-tool-for-web-applications-with-react-gmbr3280)
![](https://cdn.hackernoon.com/drafts/apmk3220.png)
Hi, my name is Alex, I’m the author of Webcodesk. In this article, I want to tell you why I created Webcodesk and why I consider it a great tool to develop Web applications with React.

### [48. How to Build a Search Bar in React with React Hooks ](https://hackernoon.com/how-to-build-a-search-bar-in-react-with-react-hooks-o77l3yl7)
![](https://cdn.hackernoon.com/images/1zgb2asw.gif)
Below is a small gif of what we will be building. A simple search box that allows us search through a contact list. We would be using functional components rather than class based components to achieve this.

### [49. The 10 Best JavaScript Frameworks to Use in 2023](https://hackernoon.com/the-10-best-javascript-frameworks-to-use-in-2023)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-xr93nmn.jpeg)
In this blog post, we will explore the top 10 JavaScript frameworks to consider using in 2023, along with their pros and cons.

### [50. How To Use Debounce in Next.js](https://hackernoon.com/how-to-use-debounce-in-nextjs)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-rv93qqx.jpeg)
Understanding Debounce in Next.js


### [51. 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.

### [52. Building Real-time Apps with Next.js 13.4 Server Actions](https://hackernoon.com/building-real-time-applications-with-nextjs-134-server-actions-1-introduction)
![](https://cdn.hackernoon.com/images/rIVD9uGtDyTmdfox8lpMYgJi5AZ2-6693us3.jpeg)
With this article, learn to construct a real-time application, leveraging the power and finesse of Next.js 13.4 server actions.

### [53. How to Make a Silky Smooth Scroll in React](https://hackernoon.com/how-to-make-a-silky-smooth-scroll-in-react-5dj3xdl)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FAfhPK3r2CnS0HnAUc2Oiew1S9lr2-2m6p272t.jpeg?alt=media&token=943d6ccf-b897-4633-9aaa-6761a1225a34)
Have you ever been working on a project and wanted to scroll smoothly through your app?

### [54. VS Code Tutorial: How To Set Up A React.js Project With Next.js](https://hackernoon.com/vs-code-tutorial-how-to-set-up-a-reactjs-project-with-nextjs-312f350f)
![](https://cdn.hackernoon.com/images/FDUgRy4yNwdp4HN61oIOnBbaprl1-99gi34l9.jpeg)
Express.js framework provides inbuild APIs which are very useful to build fast and scalable applications efficiently with React.js.

### [55. 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

### [56. Using React Router v6 for Private and Public Routes with Access Validation](https://hackernoon.com/2-2-using-react-router-v6-for-private-and-public-routes-with-access-validation)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-ktb3wzl.jpeg)
In essence, React Router is a routing library designed for React-based web applications. Its main purpose is to facilitate navigation between components or view

### [57. How We Started Sharing Code Between Projects as a Team](https://hackernoon.com/how-we-started-sharing-components-as-a-team-d863657afaca)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-f403ath.png)
<em>The Story of how we share and sync our components and modules between projects as a team using a tool built for the job called </em><a href="https://bitsrc.io" target="_blank"><em>Bit</em></a><em>.</em>

### [58. [Launched] First Open Source Headless CMS Running on AWS Serverless To Cut Hosting Bill by 60%-80%](https://hackernoon.com/launched-first-open-source-headless-cms-running-on-aws-serverless-to-cut-hosting-bill-by-60percent-80percent-n1ct30ls)
![](https://cdn.hackernoon.com/images/n91j30i6.jpg)
So why you need another Headless CMS? For a change, with this one, you won't worry about scaling, installing, configuring and managing infrastructure. 

### [59. Next.Js 13 Parallel Routes: A Comprehensive Guide](https://hackernoon.com/nextjs-13-parallel-routes-a-comprehensive-guide)
![](https://cdn.hackernoon.com/images/eQHzh6rz7ETBHLjs0KzCl1Dooqp2-lr93wsw.jpeg)
Welcome to this comprehensive guide on parallel routes in Next.js.

### [60. Stop Using State for React Forms, There is a Much Better Way!](https://hackernoon.com/stop-using-state-for-react-forms-there-is-a-much-better-way)
![](https://cdn.hackernoon.com/images/7rdAduifQcWGRnhzEF317ht4Fbv2-rzc32zm.jpeg)
Learn how to optimize the performance of react forms by replacing useState with the native feature of JavaScript.

### [61. 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

### [62. 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.

### [63. How to Build an Ethereum Transaction App with React and Solidity: Part 2](https://hackernoon.com/how-to-build-an-ethereum-transaction-app-with-react-and-solidity-part-2)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-j2036jc.jpeg)
Following part one of this tutorial, we will be building the frontend side of this project.

### [64. Streaming in Next.js 15: WebSockets vs Server-Sent Events](https://hackernoon.com/streaming-in-nextjs-15-websockets-vs-server-sent-events)
![](https://cdn.hackernoon.com/images/cCF3vyfU64ajyP6O080VcMiZY0O2-h00300g.jpeg)
Next.js supports both WebSockets and Server-Sent Events (SSE), making it an excellent choice for building scalable real-time applications.

### [65. API Error Handling in React](https://hackernoon.com/api-error-handling-in-react)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-mo93snq.jpeg)
I will tell you what formats for common handlers exist and why it is better to agree on a single format with the backend than to fence a new solution every time

### [66. 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. 

### [67. How to Set A Default Checkbox Value in React](https://hackernoon.com/how-to-set-a-default-checkbox-value-in-react)
![](https://cdn.hackernoon.com/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-w283l44.jpeg)
In this guide, we will see how to make the checkbox checked (or unchecked) by default.

### [68. Top 3 Coding Challenges for Expert-Level React Developers](https://hackernoon.com/top-3-coding-challenges-for-expert-level-react-developers)
![](https://cdn.hackernoon.com/images/ARCWTrgYpoc531106B2eMedWoT42-h7037ob.jpeg)
If you need to prove that you're a React Expert to any prospective employers, the following React concepts are likely to be tested by them and are worth knowing

### [69. 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.

### [70. 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.

### [71. Building An Airbnb-Like Map in Next.js](https://hackernoon.com/building-an-airbnb-like-map-in-nextjs)
![](https://cdn.hackernoon.com/images/XyqHIwK0xDMOGdIf5iTNW4CrLjb2-yuh3veu.png)
We will be building a proof of concept to create customer Google Maps markers using any React component in a Next.js project using AirBnB as an example

### [72. Creating React components in Structor — React UI Builder.](https://hackernoon.com/creating-react-components-in-structor-react-ui-builder-f7c5026edfbd)
![](https://cdn.hackernoon.com/images/react-logo-and-a-wrench-enr26dprkw45dy1umpd2qhak.png)
Here we will run through a brief tutorial about how to create a React component using <a href="https://material-ui-1dab0.firebaseapp.com" target="_blank">Material UI</a> library.

### [73. 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.

### [74. How to Build a Shopping Cart with Next.js and Zustand: State Management with TypeScript](https://hackernoon.com/how-to-build-a-shopping-cart-with-nextjs-and-zustand-state-management-with-typescript)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-li93uaf.jpeg)
Learn how to manage a React global state with Zustand and TypeScript. Practical guide and code samples. Persist global state in localStorage.

### [75. React Native vs.Flutter vs. Ionic Which is Challenging Platform for Your App](https://hackernoon.com/react-native-vsflutter-vs-ionic-which-is-challenging-platform-for-your-app-623qp3yqm)
![](https://cdn.hackernoon.com/images/ri3pz3ypc.jpg)
Smartphone apps have changed the way we used our phones previously. With the growing use of smartphone & its high-end processors, the app also has to perform well to make it worthwhile. You probably have noticed that most of the high performing apps with impressive designs and animations are downloaded the most. It means that if your app is not performing well or it serves lousy user experience, you will be out of the race. It does not just end up losing your valuable customers but also affects your business & its value.


### [76. How to Build a Profitable NFT Marketplace with React, Solidity, and CometChat](https://hackernoon.com/how-to-build-a-profitable-nft-marketplace-with-react-solidity-and-cometchat)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-0293sfv.jpeg)
In this tutorial, you will learn how to create a profitable and well-designed NFT marketplace with chat functionality.

### [77. The 7 Deadly Sins of Using React](https://hackernoon.com/the-7-deadly-sins-of-using-react-fe832310483b)
![](https://hackernoon.com/hn-images/1*VQ7J57WuvEcVzC_zfM_0WQ.jpeg)
As I was wrapping up this post, my six-year-old daughter asked what I was doing. I told her I was writing about how sometimes people build software the wrong way. She gave me a confused look: “Why would anyone want to do that!?”

### [78. React useRef, forwardRef and Some Problems you May Run Into Working With Them](https://hackernoon.com/react-useref-forwardref-and-some-problems-that-you-can-face-working-with-them)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-em93ztx.jpeg)
What are useRef and forwarRef in react. When you should use them and when you should avoid using them. Problems, that could occur during useRef usage.

### [79. 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

### [80. It's Hard to Create a PWA With Next.js: But Why?](https://hackernoon.com/its-hard-to-create-a-pwa-with-nextjs-but-why)
![](https://cdn.hackernoon.com/images/wNuie4SqwWXAyHIBWtUTi45M94E2-m993sbk.jpeg)
Discover the challenges of creating PWAs with Next.js, the powerful next-pwa plugin, and the exciting future with the @imbios/next-pwa package.

### [81. React Native vs. Native App Development: Making the Right Choice](https://hackernoon.com/react-native-vs-native-app-development-making-the-right-choice)
![](https://cdn.hackernoon.com/images/EcXqeS9dlwaqAmJhccqLBiD5cfD3-esa3m40.png)
Discover the key differences between React Native and Native App Development. Make an informed choice for your app development project today!

### [82. How to Handle Asynchronous Data Requests Using Redux Toolkit](https://hackernoon.com/how-to-handle-asynchronous-data-requests-using-redux-toolkit)
![](https://cdn.hackernoon.com/images/uDPqwahUxKSKSQ17IYMKmh9T5uu1-q0e3vz1.jpeg)
Fetching data asynchronously with Redux Thunk was always too much of a hassle for developers until Redux Toolkit arrived with so many promising features.

### [83. Which Front-End Framework Is Better? A Comparison Between Angular and React](https://hackernoon.com/which-front-end-framework-is-better-a-comparison-between-angular-and-react)
![](https://cdn.hackernoon.com/images/Hcp7GOWt9sT1u05G6yNtUCn7pia2-omb3oy9.jpeg)
This article compares two powerful open-source front-end technologies, Angular and React. 

### [84. 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.

### [85. Winning "Contributor of the Year 2022 - React.js" is an Honor ](https://hackernoon.com/winning-contributor-of-the-year-2022-reactjs-is-an-honor)
![](https://cdn.hackernoon.com/images/hQ098u52DzPm2Y4UITQcQXtLRAk2-5193ra9.gif.webp)
Winning the title is a testament to the hard work and dedication I have put into learning and improving my skills as a React developer.

### [86. Top 5 React Interview Questions in 2022](https://hackernoon.com/top-5-react-interview-questions-in-2022)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-ok93q4o.jpeg)
ReactJS is the most popular choice, and this lesson on how to answer ReactJS interview questions will help you get the job. 

### [87. How to Add Custom Shortcuts and Code Snippets to VS Code](https://hackernoon.com/how-to-add-custom-shortcuts-and-code-snippets-to-vs-code)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-7ba3qpa.jpeg)
In this article, we'll learn how to create custom VS Code shortcuts and code snippets.

### [88. A Review of Udacity’s React Nano Degree](https://hackernoon.com/a-review-of-udacitys-react-nano-degree-1085273f1a73)
![](https://cdn.hackernoon.com/images/a-college-degree-cyww3v7n9g0rp6jvqc3p1ub1.png)
Yesterday, I finished my 2nd Nano Degree. As a typical Millennial, I have been having a quarter life crisis every two years starting in my 20s. This led me down the path of my first career change from a (wannabe) Actuary to a Data Analyst in 2015, and my first foray into online education which was, you guessed it, the Data Analyst Nano Degree.

### [89. Opinionated or Not: Choosing the Right Framework for the Job](https://hackernoon.com/opinionated-or-not-choosing-the-right-framework-for-the-job-6x1u2ga0)
![](https://cdn.hackernoon.com/images/jqi2giw.jpg)
There’s a foundational question that every project starts with: accept the freedom to roll your own solutions along with the burdens that go with it, or take the chance to use sensible defaults that allow you to move quickly, but hide a multitude of decisions and set you on a prescriptive path.

### [90. Virtual DOM, Reconciliation And Diffing Algorithm Explained Simply](https://hackernoon.com/virtual-dom-reconciliation-and-diffing-algorithm-explained-simply-ycn34gr)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-0v3a33up.jpeg)
Ever wondered what makes react so fast ? Here's a detailed explanation why react is fast and what is virtual DOM.

### [91. 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.

### [92. 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.

### [93. Node.js Tutorial: How to Build a Video Streaming Application in 10 Minutes](https://hackernoon.com/nodejs-tutorial-how-to-build-a-video-streaming-application-in-10-minutes)
![](https://cdn.hackernoon.com/images/AjW2GKacl2guqCy2y7pi5AGU8U02-gl92hzr.jpeg)
hi folks, in this blog we will build a Node.js video streaming application in like 10 minutes.


### [94. How to Create Toast Notifications in React Applications](https://hackernoon.com/how-to-create-toast-notifications-in-react-applications)
![](https://cdn.hackernoon.com/images/ykJxkPDADpgkWhi5rN6fOrTcA5A2-hl93q96.jpeg)
In this article I will show you how to use Tailwind to add some stylish design elements.


### [95. 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.

### [96. Understanding Session Management Using React Router V6](https://hackernoon.com/understanding-session-management-using-react-router-v6)
![](https://cdn.hackernoon.com/images/CU9T26Y1hNgrvyNxGX0jRAJfpM12-ny934jq.jpeg)
Detailed approach for building architecture in React application with session management using React Router v6.

### [97. Set Up Airbnb’s Linter (React + Node)](https://hackernoon.com/a-simple-linter-setup-finally-d908877fa09)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-1i83e1d.jpeg)
A linter flags anything in your code that breaks its pre-defined rules (“style guide”). Each style guide has different opinions about what constitutes “good” JavaScript code. This post uses <a href="https://github.com/airbnb/javascript" target="_blank">Airbnb</a>’s style guide; <a href="https://google.github.io/styleguide/jsguide.html" target="_blank">Google</a>’s is also popular.

### [98. 16 JavaScript Protips [2020 Edition]](https://hackernoon.com/16-javascript-protips-2020-edition-n7et32dd)
![](https://cdn.hackernoon.com/drafts/q1n3yqk.png)
When I began learning JavaScript, I made a list of every time-saving trick that I found in other people’s code, on code challenge websites, and anywhere other than the tutorials I was using.

### [99. 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. 

### [100. Remix Framework Review](https://hackernoon.com/remix-framework-review)
![](https://cdn.hackernoon.com/images/HMfDlkGVkoMk0WzhOX2zil9gTLj1-ta93zk2.jpeg)
Edge SSR, nested routes, and no client-side state differentiate Remix from Next.js, Gatsby but not best suited for realtime apps and sharing data across routes.

### [101. 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.  

### [102. Cache API Calls in JavaScript by Memoizing Promises](https://hackernoon.com/cache-api-calls-in-javascript-by-memoizing-promises)
![](https://cdn.hackernoon.com/images/LS4jODyL80XxRQqlj5xuTxfWPNt1-a793tb5.jpeg)
Cache API Calls in JavaScript by Memoizing Promises. Store promises in a map with unique key, if the same API is called with the same params, serve from cache.

### [103. How to Deploy a React App to GitHub Pages](https://hackernoon.com/how-to-deploy-a-react-app-to-github-pages)
![](https://cdn.hackernoon.com/images/2uyRlK7jQqPB28hc8qCDMtKbd2N2-w803a5x.png)
This article outlines how to smoothly deploy a React App through Github while avoiding common problems that such a process is likely to cause for you.

### [104. Top 7 Best Frontend Development Frameworks and When To Use Them](https://hackernoon.com/top-7-best-frontend-development-frameworks-and-when-to-use-them-4v3a3wwa)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FHrzvBX6xNSVZBKImURJl23sRwcQ2-bhu3wfv.jpeg?alt=media&token=88946c73-ead8-442d-8946-3b35bae519bd)
For the past few years, Frontend developers have shown partiality towards React, with Vue.js and Angular tagging behind closely. Comparative interest in Vue has held back a bit due to the long-awaited and somewhat delayed Vue 3.0 release. Similarly, the interest in Angular has decreased due to the long delay in shipping Ivy (its frontend renderer).

### [105. Using ChatGPT to Code an Entire Portfolio Website](https://hackernoon.com/using-chatgpt-to-code-an-entire-portfolio-website)
![](https://cdn.hackernoon.com/images/UPj89hwu6vfiCaqSkcDwX8zhXPO2-ugm2h07.png)
Using ChatGPT to create a custom portfolio website in record time! I discuss ChatGPT's strengths, weaknesses, and tip and tricks to use while coding. 

### [106. A Step-by-Step Guide to Building a Simple Next.js 13 Blog](https://hackernoon.com/a-step-by-step-guide-to-building-a-simple-nextjs-13-blog)
![](https://cdn.hackernoon.com/images/rIVD9uGtDyTmdfox8lpMYgJi5AZ2-wv93vgf.jpeg)
Building a simple blog with Next.js 13

### [107. When and How to Use useMemo in React](https://hackernoon.com/when-and-how-to-use-usememo-in-react)
![](https://cdn.hackernoon.com/images/D59iQWrw9NWwRKT3HJ1zyatfnf02-yc93plg.jpeg)
In this article, you will be able to learn what useMemo it and how to use it effectively

### [108. Integrating a Contact Form with EmailJS in React](https://hackernoon.com/integrating-a-contact-form-with-emailjs-in-react)
![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-frg307w.jpeg)
In this tutorial, you’ll learn how to connect a front-end library, React, with EmailJS to receive user messages on your website or mobile applications

### [109. An Intro to the Astro Framework: Benefits and Drawbacks](https://hackernoon.com/an-intro-to-the-astro-framework-benefits-and-drawbacks)
![](https://cdn.hackernoon.com/images/TlU0qyilehYV4XrjqgkglSwSK413-bre3s2x.jpeg)
Astro is a new framework, should it be one you should experiment with? Find out the features, benefits, and drawbacks that this new framework has. 

### [110. Redux Form made easy](https://hackernoon.com/redux-form-made-easy-345060c6a700)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-kt035ez.jpeg)
Learn how to write a generic component that holds the redux-form complexity, knows to get just a JSON that describes the fields, and render a matching redux-form. creating a forms was never so easy and clean.

### [111. React Project Structure: Best Practices](https://hackernoon.com/react-project-structure-best-practices-kh20323x)
![](https://cdn.hackernoon.com/images/YuHQ8Lhn2IT1way5nhFige44Oky1-tn1w296v.jpeg)
A more standard way of structuring React applications which scales across frameworks and projects.

### [112. 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.

### [113. Alternatives to Create React App](https://hackernoon.com/alternatives-to-create-react-app)
![](https://cdn.hackernoon.com/images/dNNBDAvxyhdzfKhIWAuPr4PE1Zx1-h193lfe.jpeg)
I see a lot of discussion around CRA being outdated and we should replace it with Vite. This blog discusses CRA's problems and alternatives we can use. 

### [114. 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.

### [115. How To Customize an OpenAI Chatbot With Embedding](https://hackernoon.com/how-to-customize-an-openai-chatbot-with-embedding)
![](https://cdn.hackernoon.com/images/gEL3g8oyQxgbmc8iSk3I4iUT8Ku1-vm93ued.jpeg)
Learn how to leverage embeddings to have an OpenAI chatbot, built with React and Node.js, respond correctly to specific contextual prompts.

### [116. React Hooks: Performance Pitfalls And How To Easily Avoid Them](https://hackernoon.com/adventuring-into-react-hooks-performance-practices-rly36xq)
![](https://cdn.hackernoon.com/drafts/1ry33627.png)
From version 16.8.0, React introduced us to a way to use state and other React features without writing a class — React Hooks.

### [117. 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. 

### [118. 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)

### [119. 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

### [120. Improving Formik Performance when it's Slow (Material UI)](https://hackernoon.com/improving-formik-performance-when-its-slow-material-ui)
![](https://cdn.hackernoon.com/images/2CnaTwkypCg3LK5uANIw5XkUw453-xo0374j.jpeg)
Fix Formik slow performance. Increase Formik performance when using input fields. Happens when you use CSS-In-JS based UI libraries as they keep re-rendering.

### [121. The Lazy Programmer's Guide to Maintaining a Personal Website](https://hackernoon.com/the-lazy-programmers-guide-to-maintaining-a-personal-website)
![](https://cdn.hackernoon.com/images/amVQ5swmF5en0QHSH8PsvbTZv6r1-1u92ov0.jpeg)
A guide for how to build and maintain a personal developer website with minimal effort in 10 easy steps.

### [122. How to Build a React Component Library From Scratch](https://hackernoon.com/building-a-react-component-library-from-scratch)
![](https://cdn.hackernoon.com/images/UZsiGCDKLlXnEsYH3wk6XxwvRz82-lpg2fod.jpeg)
A component library is one of the coolest things a web developer can make, but if you don't know how to make one, let me guide you a bit.

### [123. 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!

### [124. 110% Complete JWT Authentication with Django & React - 2020](https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-tiq3bhj)
![](https://cdn.hackernoon.com/drafts/1gn2er5.png)
ReactJS is a fantastic frontend framework, and Django is a fantastic backend framework. However, as usual when dealing with anything of more than trivial complexity, it isn’t easy to get the two to place nicely together. It's not like taping a banana to a wall.

### [125. How to Use a Hook in a Class Component](https://hackernoon.com/how-to-use-a-hook-in-a-class-component)
![](https://cdn.hackernoon.com/images/too6UlyK1RTQqOrRsiS7PVQp20d2-0p93krf.jpeg)
Did you know that you can use hooks in class components?

OK, I'm lying, kind of. You can't use a hook directly in a class component, but you can use a hook in 

### [126. 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.

### [127. How To Get Key Clicked Element in React](https://hackernoon.com/how-to-get-key-clicked-element-in-react)
![](https://cdn.hackernoon.com/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-kl831o6.jpeg)
Often same components are rendered multiple times, and we need the key attribute to uniquely identify every instance.

### [128. Breaking the Monolith: A Comprehensive Guide to Code Splitting Techniques](https://hackernoon.com/breaking-the-monolith-a-comprehensive-guide-to-code-splitting-techniques)
![](https://cdn.hackernoon.com/images/xc4tHTeTFVT2acicoza639IgwXu1-b493sob.jpeg)
Discover how to elevate your codebase by mastering code splitting techniques. Make your project stand out with efficient and scalable front-end architecture

### [129. 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.

### [130. 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.

### [131. 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.

### [132. Maximize Your React Skills: Build a To-Do List App from Start to Finish (with TypeScript + Vite)](https://hackernoon.com/maximize-your-react-skills-build-a-to-do-list-app-from-start-to-finish-with-typescript-vite)
![](https://cdn.hackernoon.com/images/42fVSCMQWfSi7dcFWQN3DtjfjLC2-1lg3opf.jpeg)
Master the basics of building an app with React and TS. Learn how to use state, props, and data flow to create a fully functional app.

### [133. Next.js Internationalization (i18n) Tutorial](https://hackernoon.com/nextjs-internationalization-i18n-tutorial)
![](https://cdn.hackernoon.com/images/hyY3E09nDoaA2wQ9A4LkEFWLtB03-ve92i2n.jpeg)
How to set up a multi-language Next.js project with built-in support for internationalized routing and react-intl library.

### [134. Sharing code between React and React Native using SDK](https://hackernoon.com/share-code-between-react-and-react-native-using-sdk-85c2dab552f8)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-dc93ptv.jpeg)
<strong>React</strong> is one of the biggest JavaScript libraries for building user interfaces provided by Facebook and <strong>React-Native</strong> framework lets you to build native mobile apps which uses the same design as React library. One of the amazing fact about React-Native is that it’s not only about building Native IOS/Android apps but we can also build web applications using the same code and share more than <strong><em>50%</em></strong> codes between React-Native(Mobile) and React(Web) because we are using React and JavaScript in both cases.

### [135. How To Use SASS In Your Create-React-App](https://hackernoon.com/how-to-use-sass-in-your-create-react-app-oh2x3ywb)
![](https://cdn.hackernoon.com/images/4p5zj2a9d.jpg)
Create-react-app is facebook's attempt at setting up a developer to get started building react apps very quickly. It is a boilerplate that comes pre-configured with a wide array of tools and technologies that ensure a smooth running react application. However, create-react-app does not come with Sass preprocessing by default. To add sass preprocessing, we would need to add an extra dependency to our list of dependencies  known as node-sass.

### [136. How To Cache Images in an Expo Managed React Native App ](https://hackernoon.com/how-to-cache-images-in-an-expo-managed-react-native-app-5q9m3z6s)
![](https://cdn.hackernoon.com/drafts/8b4j3yau.png)
Caching images in React Native can be easy, even if you are using Expo's managed workflow. The problem many devs run into is that React Native only supports caching images on IOS out of the box.

### [137. How to Create Multilingual React Apps with react-i18next](https://hackernoon.com/how-to-create-multilingual-react-apps-with-react-i18next)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-q2a3x9x.jpeg)
This step-by-step guide covers setting up i18next, translating components, and switching between languages for a multilingual user experience.

### [138. Svelte: Communication Between Components](https://hackernoon.com/svelte-communication-between-components-193i32l5)
![](https://images.unsplash.com/photo-1453738773917-9c3eff1db985?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
In this mini-tutorial we are going to see two different ways of communication between components in Svelte 3: a callback passed as prop and event dispatcher.

### [139. How to Implement One Tap Google Sign-In With Ruby on Rails](https://hackernoon.com/how-to-implement-social-auth-with-google-in-ruby-on-rails)
![](https://cdn.hackernoon.com/images/ifDiukLaCGVkd6C6aAyQ93quDOc2-vzd3rns.jpeg)
In this blog post, we will discuss how to integrate Google Identity Services into any of your front-end applications.

### [140. 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)


### [141. Creating React Dashboard Ultimate Guide Part 1: Overview and Analytics Backend](https://hackernoon.com/react-dashboard-ultimate-guide-part-1-overview-and-analytics-backend-tnr3tre)
![](https://cdn.hackernoon.com/images/kegn3tsa.jpg)
Below you can see the demo of the final application. Online demo is available here.

### [142. Popular React Framework Choices to Develop React Apps in 2023 ](https://hackernoon.com/popular-react-framework-choices-to-develop-react-apps-in-2023)
![](https://cdn.hackernoon.com/images/RT2ZZ2gRKKPgRAa51dzntTBUQYw1-pva3y9e.jpeg)
A review of popular React Frameworks that can be used to develop React Applications.

### [143. Create a Full Autocomplete Search Application with Elasticsearch, Kibana, NestJS and React](https://hackernoon.com/create-a-full-autocomplete-search-application-with-elasticsearch-kibana-nestjs-and-react)
![](https://cdn.hackernoon.com/images/JaI04JxjP5WiiJKlOeLrImL5dAw2-yh93n66.jpeg)
In this article, I will be walking you through how to set up elasticsearch on your PC.

### [144. 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.

### [145. 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:

### [146. React 19: New Tools To Work With Forms](https://hackernoon.com/react-19-new-tools-to-work-with-forms)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-bw1236h.jpeg)
Discover how React 19's new hooks—useActionState, useFormStatus, and useOptimistic—simplify form handling with less boilerplate and cleaner code. 

### [147. 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.

### [148. 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.

### [149. Using React to Take Advantage of Markdown and Adding Functionalities to Code Blocks](https://hackernoon.com/using-react-to-take-advantage-of-markdown-and-adding-functionalities-to-code-blocks)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-ji93ryp.jpeg)
Build a tutorial blog with React and Markdown. Enhance your blog's user experience with syntax highlighting, dark mode and copy to clipboard functionality.

### [150. Next.js and SignalR: Effortless Socket Integration and Troubleshooting](https://hackernoon.com/nextjs-and-signalr-effortless-socket-integration-and-troubleshooting)
![](https://cdn.hackernoon.com/images/IDrwnuUpw3ciQtHAlLVk7zUZSpN2-1293xep.jpeg)
Next.js and SignalR integration. Next.js and SignalR troubleshooting

### [151. 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.

### [152. How to Create Custom Flash Messages in React [Part 1]](https://hackernoon.com/how-to-create-custom-flash-messages-in-react-part-1-zx3e3whx)
![](https://cdn.hackernoon.com/drafts/x6ai2g89.png)
In the first part of this tutorial we are going to build a flash message step-by-step with React and Material UI.

### [153. Inserting 'User Profile Info' into your React Navbar](https://hackernoon.com/inserting-user-profile-info-into-your-react-navbar)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-en92b9j.jpeg)
This article shows you how to insert the profile information of any user into the react navigation bar, so as to make it sign-in aware.

### [154. Exploring Render Props Vs. React Hooks In 2020](https://hackernoon.com/exploring-render-props-vs-react-hooks-in-2020-xg1b3uko)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FFR3b4D5w75cFHqJ6I8m3arHmR8t1-pg4u3eml.jpeg?alt=media&token=d5084d20-9c70-413f-9bff-21b512dfa23b)
Who said render props are obsolete? The good old pattern is still valid for the common use case where hooks may not always be the right choice.

### [155. How to Build a Pokédex App with React and a Slash GraphQL Backend](https://hackernoon.com/how-to-build-a-pokedex-app-with-react-and-a-slash-graphql-backend-8t3i3t0j)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FD7Hn3CmOHedLjdaXSIpRfZ5ezZG3-4w523uoj.jpeg?alt=media&token=e4e9fa05-35be-4a5b-b426-d55fac9e81fe)
In this article, we're going to walk through some of the basic setup for Slash GraphQL and then take a look at how I built a Pokémon Pokédex app with React and Slash GraphQL in just a few hours!

### [156. 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.

### [157. React Image Reordering Grid Drag and Drop (Desktop and Mobile)](https://hackernoon.com/react-image-reordering-grid-drag-and-drop-desktop-and-mobile)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-yz92ghp.jpeg)
Full story of my implementation of the DnD feature on mobile devices with examples on codesandbox.

### [158. Setting Up a Backend for React App in 15 Minutes](https://hackernoon.com/setting-up-a-backend-for-react-app-in-15-minutes-yg1n3wmd)
![](https://cdn.hackernoon.com/drafts/262kq3wnk.png)
Recently I have introduced Directual on Hackernoon (see Low-code for hackers). Now I would like to continue with absolutely practical post. First, I will show the general scheme of combining Directual and React, and then you will find the live-demo of building an app from scratch to production-ready Docker-container.

### [159. Takeaways on Building a React Based App with Electron](https://hackernoon.com/publishing-a-react-based-app-with-electron-and-nodejs-f5ec44169366)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-e503adx.png)
Earlier this year, <a href="https://getstream.io" target="_blank">Stream</a> launched <a href="https://getstream.io/winds" target="_blank">Winds 2.0</a>, an open-source and native application for macOS, Windows, and Linux, which provides an entirely new way to consume RSS feeds and Podcasts. It was our first time building a native application, so we chose to go with <a href="https://electronjs.org/" target="_blank">Electron</a>, a framework for creating cross-platform applications.

### [160. React Hook to Measure an Element's Size and Handle Responsive Components](https://hackernoon.com/react-hook-to-measure-an-elements-size-and-handle-responsive-components-ge3l3vj9)
![](https://images.unsplash.com/photo-1531171673193-06ab3c43e4a5?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
react-cool-dimensions is a React hook that measure an element's size and handle responsive components with highly-performant way, using ResizeObserver. Try it you will ❤️ it!

### [161. Building User Interfaces with React [A How-To Guide]](https://hackernoon.com/building-user-interfaces-with-react-a-how-to-guide-m37i30gc)
![](https://cdn.hackernoon.com/drafts/pj2c3024.jpeg)
Building user interfaces is also now possible using a JavaScript library named React. It is a tool that we can use to build UI components. It is especially for creating single-page applications.

### [162. How we built an account creation popup for Google and Outlook OAuth](https://hackernoon.com/how-we-use-a-popup-for-google-and-outlook-oauth-5d8c03652171)
![](https://cdn.hackernoon.com/drafts/peq3xg8.png)
At Leave Me Alone we use Google and Microsoft OAuth for user sign in. To do this we redirect the user to the relevant login page, the user input their details, and is then directed back to our site and logged in. An unfortunate result of this is that our analytics report a great deal of referral traffic coming from “accounts.google.com” and “login.microsoft.com”. 

### [163. How to Set up ReCAPTCHA in Your React Application](https://hackernoon.com/how-to-set-up-recaptcha-in-your-react-application)
![](https://cdn.hackernoon.com/images/fJowWHavL0XT8jKc2lCn9VB199e2-7we20og.jpeg)
reCAPTCHA is a tool that can protect your applications from fraudulent actions.

### [164. 2019 in Frontend Development: JS, TS, React, Vue & More](https://hackernoon.com/a-recap-of-frontend-development-in-2019-n91o3bum)
![](https://cdn.hackernoon.com/images/txr3bsx.jpg)
Originally published on gitconnected.com

### [165. 12 Fun Challenges to Learn React Native](https://hackernoon.com/12-fun-challenges-to-learn-react-native-1m4g3egq)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FQYEGAV74JcR17hx9Oej6aJp5WKd2-8h8j3xlt.png?alt=media&token=45522113-c934-44c5-9b01-ca57ba38aea5)
So you want to learn React Native? Here's 12 exercises to that will help you do that.

### [166. Building An Infinite Scroll Using React Hooks](https://hackernoon.com/builing-an-infinite-scroll-using-react-hooks-pe113urj)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F3nhao37bBEfHA9RTQ0WNVWfXPD02-53x3uuo.jpeg?alt=media&token=cff83a2b-e1af-4849-85b7-1e6bd2efc91d)
There are a lot of React pre-made components out there that promise infinite scroll functionality. The problem with that is that sometimes they are not tailored to fit your specific needs, especially if you are using the newly featured React-Hooks to create functional components all across your application. These pre-made components work well with class components, but they have not been updated to work with the state-of-the-art functional hook-components.

### [167. 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.

### [168. How to Create an Instant Search Input with Debounce in React.js](https://hackernoon.com/how-to-create-an-instant-search-input-with-debounce-in-reactjs)
![](https://cdn.hackernoon.com/images/GyReioOm4SYrQtHDFZYR7Ot7i3w1-r003dd6.gif.webp)
I recently built an anime app that fetches details about animes from an external API. The project had an input field where you could type in the name of an anime to search for. The text typed in the input field was then used to query the API for animes matching the input. The input field was to use “instant search” mechanism. This meant that users where not required to hit enter or press a button for the search to occur. To prevent making a call to the API on every keystroke, I had to debounce the queries made to the API.

### [169. Build a To-Do App with React In Rails 6 (Tutorial)](https://hackernoon.com/build-a-to-do-app-with-react-in-rails-6-tutorial-pu2d3uta)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FzYMfBKTIcNUVO4vjV4Zj6GuuDxV2-wkdv3uth.jpeg?alt=media&token=4f61491c-2b06-447a-b500-d00e276bf605)
Hello everyone. Today, we will be building a todo app to showcase how to use React with Rails 6. This tutorial will be as in-depth as possible and will focus on performing CRUD operations. Our Todo app will support seeing a list of your todo, creating a today, making a todo as done, and deleting a todo. We will be leveraging react to build a reactive app and use material UI for the design.

### [170. 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.

### [171. 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.

### [172. Reactstrap vs React-Bootstrap](https://hackernoon.com/reactstrap-vs-react-bootstrap)
![](https://cdn.hackernoon.com/images/sbgi9B9mbOS13gkvZQDT3qlvZAR2-t093owm.jpeg)
People aren’t clear about React-Bootstrap vs Reactstrap. If you want to know, here are some helpful explanations.

### [173. How to Create a React Animated "Like" Heart ❤️ in Seconds](https://hackernoon.com/how-to-create-a-react-animated-like-heart-in-seconds-ts1g371m)
![](https://cdn.hackernoon.com/images/tRxiCl2rZwfH05Gq3drx5CjaYlH2-hne39ph.gif)
To create an animated heart ❤️ use:  react-animated-heart.

### [174. Next.js vs React: Who Wins the Battle?](https://hackernoon.com/nextjs-vs-react-who-wins-the-battle)
![](https://cdn.hackernoon.com/images/7DtulTMuZUNhuHGe0I2LlQhRAdu1-yza3pzb.jpeg)
There are two popular options for creating web applications with React: Next.js and React Router. Both have their pros and cons, but which one.

### [175. 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

### [176. Bridging Design and Development: Creating an Open-Source Portfolio Website Template for Designers](https://hackernoon.com/bridging-design-and-development-creating-an-open-source-portfolio-website-template-for-designers)
![](https://cdn.hackernoon.com/images/ZxYrjLtEfXcqbau0aq9QJo7Kb162-yj0341n.png)
Bridging Design and Development: Creating an open-source portfolio website template for designers. Easy customization, visual focus, and one-click deployment.

### [177. 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

### [178. How to Add  Notifications to your React Navigation bar](https://hackernoon.com/how-to-add-notifications-to-your-react-navigation-bar)
![](https://cdn.hackernoon.com/images/ZuuM3fSjXmf2oETrekt5pezKail2-y0h3qsn.jpeg)


### [179. 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)


### [180. How to Build a Smooth Authentication Flow System with Firebase](https://hackernoon.com/how-to-build-a-smooth-authentication-flow-system-with-firebase)
![](https://cdn.hackernoon.com/images/uDPqwahUxKSKSQ17IYMKmh9T5uu1-1493t83.jpeg)
This tutorial involves going through a step-by-step guide on how to set up the Firebase authentication service, and then a walk-through of how to implement it.

### [181. How To Publish Your Expo Application To The App Stores Using Release Channels](https://hackernoon.com/how-to-publish-your-expo-application-to-the-app-stores-using-release-channels-un7a32ms)
![](https://images.unsplash.com/photo-1556711240-9d578614d08e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
There is no more need to create and upload a new version each time. This allows you to avoid going through the App Store's long and painful review process all over again.

### [182. Building a Classic Web3 NFT Minting Dapp With React and Solidity: Part 2](https://hackernoon.com/building-a-classic-web3-nft-minting-dapp-with-react-and-solidity-part-2)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-6693n31.jpeg)
In PART ONE of this tutorial, we coded the smart contract part of this application with Solidity, now it's time we merge it up with ReactJs.

### [183. 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?

### [184. React Tutorial: How To Build a Virtualized List with Infinite Scroll and a Hook](https://hackernoon.com/react-tutorial-how-to-build-a-virtualized-list-with-infinite-scroll-and-a-hook-3x1w3611)
![](https://cdn.hackernoon.com/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg)
When rendering a large set of data (e.g. list, table, etc.) in React, we all face performance/memory troubles. However, we can use the technique of DOM recycling to solve the troubles.

### [185. Introducing Tailwind CSS: Pros and Cons of Tailwind](https://hackernoon.com/introducing-tailwind-css-pros-and-cons-of-tailwind-hd2k3zt2)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FNDIHgstQxNhYNQKgsXo6NLuPg9m1-wm2d3xqe.jpeg?alt=media&token=81bddab1-f820-4d74-8b7a-67978082e561)
As you might notice, Tailwind CSS has become popular among the developer community. I'm a big Tailwind fan and recently, I've built several React projects with Tailwind CSS. In this article, I'll describe why Tailwind CSS has brought so much value to the front-end development community.

### [186. Tutorial: Building A Hangman Game With React Hooks](https://hackernoon.com/tutorial-building-a-hangman-game-with-react-hooks-c22c354a)
![](https://cdn.hackernoon.com/images/ZwjO7PEdYqYaLstPk7RrFT7qwdn1-wf2v37z4.jpeg)
In this tutorial, we’ll build an interactive hangman game using React hooks. Hangman is a classic game in which the player guesses a word one letter at a time.

### [187. React Native Vs Ionic Vs Xamarin [A Comparison]](https://hackernoon.com/react-native-vs-ionic-vs-xamarin-an-elaborative-takeaway-q64tl324i)
![](https://cdn.hackernoon.com/drafts/0m4ti32vk.png)
It is not wrong if we say that we are living on our mobile phone screens and our world has been succumbed within mobile phone applications. There is a huge development market for smart phone application development. There have been popular mobile applications generating revenue cycles that are hard to ignore. Some of the popular mobile phone applications in the running are: Facebook, Instagram, Pinterest, Snapchat, etc.

### [188. No Mac, No Problem: How to Write Native iOS Apps, Sans Apple](https://hackernoon.com/no-mac-no-problem-how-to-write-native-ios-apps-sans-apple-tma73wqf)
![](https://cdn.hackernoon.com/drafts/8s823z26.png)
Photo by Thomas William on Unsplash

### [189. Build a Simple Todo App with React Native and TypeScript](https://hackernoon.com/build-a-simple-todo-app-with-react-native-and-typescript)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-lf93yuq.jpeg)
How To Setup React Native and Create a Simple ToDo App

### [190. Is Angular Still Worth Learning in 2022? Extended Edition](https://hackernoon.com/is-angular-still-worth-learning-in-2022-extended-edition)
![](https://cdn.hackernoon.com/images/3fOe72NVq2e9NcncXonHTIZgl8x2-ij137ci.jpeg)
A fresh perspective on if Angular is dying or if it's still worth learning in 2022!

### [191. How to Integrate React and AngularJS via Webpack Module Federation](https://hackernoon.com/how-to-integrate-react-and-angularjs-via-webpack-module-federation)
![](https://cdn.hackernoon.com/images/qGiS8EEpW3RAc4RCe4FOZyoNK362-ts834iw.jpeg)
A practical guide on integrating React with AngularJS. It covers how to use Module Federation for loading React components within AngularJS

### [192. Optimizing SEO in Next.js: Techniques for Better Search Engine Visibility](https://hackernoon.com/optimizing-seo-in-nextjs-techniques-for-better-search-engine-visibility)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-5i92u5z.jpeg)
In this blog post, we will explore advanced techniques for optimizing SEO in Next.js to enhance search engine visibility and attract more organic traffic.

### [193. 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.

### [194. 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

### [195. Avoid XSS and CSRF Attacks in JWT (React + Golang): A Tutorial](https://hackernoon.com/avoid-xss-and-csrf-attacks-in-jwt-react-golang-a-tutorial)
![](https://cdn.hackernoon.com/images/xeYS5eO5c4fc3DiCZf6JyqMMQFz1-t993i1e.jpeg)
Avoid XSS and CSRF attack in JWT with Golang and React for backend and frontend respectively.

### [196. React: Everything You Need to Know in 5 Minutes](https://hackernoon.com/react-everything-you-need-to-know-in-5-minutes)
![](https://cdn.hackernoon.com/images/MIq3LAf1OoPW35o7MBmd2s51rcB3-wda3st1.jpeg)
Can you learn React in five minutes? Well, it depends on what you mean by “learn React”. In this blog post you will “learn the basics of React” in five minutes!

### [197. Level Up Your Front-End Game with These 8 Side-Project Ideas 🥇](https://hackernoon.com/level-up-your-front-end-game-with-these-8-side-project-ideas)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-m26135bo.jpeg)
Over the span of a year, I created 8 web app and game clones. I decided to share them, so the community can get some inspiration to build as well.

### [198. Choosing the Best JS Framework: Insights From Building the Same App 6 Times](https://hackernoon.com/choosing-the-best-js-framework-insights-from-building-the-same-app-6-times)
![](https://cdn.hackernoon.com/images/app-development-clj2n37uh000001s63lfm5ysa.png)
I never know which frontend framework is my favorite. So, I put them all to the test by building a simple to-do app with 6 different frameworks. 

### [199. How to Embed AngularJS and React Like a Pro](https://hackernoon.com/how-to-embed-angularjs-and-react-like-a-pro-5y1c31on)
![](https://cdn.hackernoon.com/images/u3PwjTbcjTYeKEwwfOj8yq9247G2-sz1s3159.jpeg)
Much time has passed since the birth of AngularJS. In fact, AngularJS is already outdated, and given how fast front-end technologies grow, its value will depreciate further as new frameworks gain popularity and conquer the open-source community.

### [200. 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.

### [201. A Guide to Building an Image Generator with React and OpenAI](https://hackernoon.com/a-guide-to-building-an-image-generator-with-react-and-openai)
![](https://cdn.hackernoon.com/images/GFxWNaVUGadCuz5svjQlUTu1iz12-9pd36hu.jpeg)
This guide has discussed the steps involved in building an image generator with React and OpenAI. 

### [202. Integrate Face Recognition in Your Web Application in 5 Minutes](https://hackernoon.com/integrate-face-recognition-in-your-web-application-in-5-minutes)
![](https://cdn.hackernoon.com/images/TuZs7lYkToZkOwnvwaCU8cXCSGJ2-j293o93.png)
In this blog, I will be introducing you to Faceio’s face recognition authentication and I will be building a simple app to showcase the way to integrate it.

### [203. Building a Stateful Bottom Sheet Component in React](https://hackernoon.com/building-a-stateful-bottom-sheet-component-in-react)
![](https://cdn.hackernoon.com/images/yQlDE7WyH8agYkQFBq6KSDhPamH3-nx94uy5.jpeg)
Building a Stateful Bottom Sheet Component in React

### [204. 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.

### [205. Creating a Forum CMS with React.js and Ruby on Rails](https://hackernoon.com/creating-a-forum-cms-with-reactjs-and-ruby-on-rails-oz4t35ql)
![](https://cdn.hackernoon.com/images/e5H9wnltdwTDfp73cAjTvX0eyez1-hx203954.jpeg)
In this project, we will be using React.js, Ruby on Rails, React-Quill, and Cloudinary to build a forum whose content is manageable by the site's users.

### [206. 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!

### [207. Create a Gradient Border With TailwindCSS and React](https://hackernoon.com/create-a-gradient-border-blog-postcard-using-tailwind-css-and-nextjs-a-how-to-guide)
![](https://cdn.hackernoon.com/images/Y0kXG115Z7VorP4rguIGxwn3FoD3-fz2376t.jpeg)
This blog post is a small tutorial in which I show you how you can create a gradient border blog card using Tailwind CSS.

### [208. 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.

### [209. How <Suspense /> and Components Streaming works in Next.js](https://hackernoon.com/how-lesssuspense-greater-and-components-streaming-works-in-nextjs)
![](https://cdn.hackernoon.com/images/Y26OVi0lSWPunl54mcBvdXRVdlX2-q193y2h.jpeg)
Dive into Next.js's <Suspense />, exploring component streaming and chunked encoding. Learn how it optimizes content delivery for a seamless user experience.

### [210. How to Give Your React Navbar Search Functionality](https://hackernoon.com/how-to-give-your-react-navbar-search-functionality)
![](https://cdn.hackernoon.com/images/ZuuM3fSjXmf2oETrekt5pezKail2-hm93qji.jpeg)
This article shows you how to configure the search input. How to show / hide it, change the caption, add an icon, handle callback and how to style it;

### [211. Create a Ruby on Rails (Rails-Postgresql-React) App using Docker Compose](https://hackernoon.com/create-a-ruby-on-rails-rails-postgresql-react-app-using-docker-compose)
![](https://cdn.hackernoon.com/images/1T3oCWdeB5Ngves2c7TUliJbvAL2-6d229lp.jpeg)
How to create a Ruby on Rails application with Postgresql and React with Docker Compose

### [212. Bootstrap Vs. Material UI For React Based Project](https://hackernoon.com/bootstrap-vs-material-ui-for-react-based-project-i92k3uyi)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FVoLzrWnqALUBiqBNBl46VipwZuk2-ty1o28rc.jpeg?alt=media&token=97b4cef2-a80b-42be-bcb6-2506c4bbf9b6)
Do you enjoy building fast and professional looking pages using React and Bootstrap? What if I tell you that there is a more efficient way (and in my opinion, that looks more professional) to build websites.

### [213. How We Built A Rich Text Editor in React with SlateJS](https://hackernoon.com/how-we-built-a-rich-text-editor-in-react-with-slatejs-ni153z3b)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FQNyLqFXGvYRXJI4JG991mDDnbcC2-5v643toq.jpeg?alt=media&token=25ec3223-aad1-492e-bdb9-35bb53581517)
Building an awesome editor for your React-based web application is by no means easy. But with SlateJS things get much easier. Even with the help of Slate, building a full-featured editor is way more work than we can cover in one blog post, so this post will give you the big picture and subsequent posts will dive into the dirty details.

### [214. 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.

### [215. The RTK Query, API Splitting Approach, and the Nuances of "Making Life Simpler"](https://hackernoon.com/the-rtk-query-api-splitting-approach-and-the-nuances-of-making-life-simpler)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-qk13o9y.jpeg)
RTK Query is definitely a cool library however it’s sadly not applicable to all of the use cases possible with an API. 

### [216. How to Setup Webpack and Babel 7 for React](https://hackernoon.com/how-to-setup-webpack-and-babel-7-for-react-6xpy3615)
![](https://cdn.hackernoon.com/images/e6l36x2.jpg)
All of us have used CRA(create-react-app) when we worked with React. Its an awesome tool. It gives us just to focus on React by letting take care of the configuration. Today we are going to learn how to setup Webpack and Babel for our React app.

### [217. I'm Done Typing npm: A Zsh Function for JavaScript Package Managers](https://hackernoon.com/im-done-typing-npm-a-zsh-function-for-javascript-package-managers)
![](https://cdn.hackernoon.com/images/NaU3BOE6YnOtNpCIV9kfvX1BqL03-27a3b1x.jpeg)
Use zsh functions to create command line alias that determines local package manager and runs the corrrect comamnd: bun, pnpm, npm, or yarn.

### [218. React-Native Background Location Module For Android](https://hackernoon.com/react-native-background-location-module-for-android-p3ey36hj)
![](https://images.unsplash.com/photo-1548345680-f5475ea5df84?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
This post will cover a topic that has been key in many applications and will focus on a solution working fully on the background and the most interesting part of all: working from Android 4.4 (SDK 19) to the most recent version at the time of writing which is Android Oreo (SDK 27).

### [219. 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. 

### [220. Deploy a React App to Heroku with Bitbucket pipelines](https://hackernoon.com/deploy-a-react-app-to-heroku-with-bitbucket-pipelines-3de3uac)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FrZXnnoiU31XKlWHDg0i8isa9kQs1-fy8m2a53.png?alt=media&token=756f7379-7e0a-475a-83ca-4b39ba17f1d6)
Hello world!

### [221. React: Redux Reducer With Object](https://hackernoon.com/react-redux-reducer-with-object)
![](https://cdn.hackernoon.com/images/bJhO5rQ8YEXR3EYepSwWj0CImyZ2-ni93rlt.jpeg)
Many developers using React use Redux for state management. React Redux lets them use object notation to check action types for the code they are writing.

### [222. How to Build a Blockchain Voting System with React, Solidity, and CometChat](https://hackernoon.com/how-to-build-a-blockchain-voting-system-with-react-solidity-and-cometchat)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-5h93sb8.jpeg)
Now, it's time for you to learn the ultimate trick in building a decentralized voting system.

### [223. 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.

### [224. You Might Not Need Controlled Components - A React Story](https://hackernoon.com/you-might-not-need-controlled-components-fy1g360o)
![](https://cdn.hackernoon.com/drafts/8y1t136om.png)
If you'll go to the official React website it says that the recommended way to use inputs is to control them via React state. It also mentions that in some cases you can go with an uncontrolled option but do not say what are these cases explicitly. Let’s try to dive into it and see the pros and cons of this approach.

### [225. 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. 

### [226. Building a Classic Web3 NFT Minting Dapp with React and Solidity: Part 1](https://hackernoon.com/building-a-classic-web3-nft-minting-dapp-with-react-and-solidity-part-1)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-f793kza.jpeg)
In this tutorial, you will learn the following; How to set up an Error-free Web3 project, How to code an NFT minting smart contract, How to code the frontend...

### [227. React cloneElement: A Better Way to Build a Component API Props in ES6 Javascript and Typescript](https://hackernoon.com/react-cloneelement-a-better-way-to-build-a-component-api-props-in-es6-javascript-and-typescript-z33c358m)
![](https://cdn.hackernoon.com/images/y8NSqnPTU9c56fOn4s37aT39glf2-0upj3z1b.png)
Using the React cloneElement is a better way to build a component API props in ES6 Javascript, and Typescript. Here's a tutorial on how to do so.

### [228. Hooked on React Hooks — useState](https://hackernoon.com/hooked-on-react-hooks-usestate-53d771214d80)
![](https://cdn.hackernoon.com/drafts/0n1130jf.png)
Hooked on React Hooks — useStateSo what’s all the rage with React hooks? I’ve been exploring it for the past few months and lets just say I really believe that this is what React has needed to surmount its position as the top front end framework.

### [229. Understanding the Complexities of Next.js v13](https://hackernoon.com/understanding-the-complexities-of-nextjs-v13)
![](https://cdn.hackernoon.com/images/uDPqwahUxKSKSQ17IYMKmh9T5uu1-jjh3te3.jpeg)
Next.js v13 was released by Vercel at the Next.js conference in October 2022, bringing many new features and improvements.

### [230. 10 Reasons Why Front End Development Is a Great Career Choice](https://hackernoon.com/10-reasons-why-front-end-development-is-a-great-career-choice)
![](https://cdn.hackernoon.com/images/7DtulTMuZUNhuHGe0I2LlQhRAdu1-ki93qk8.jpeg)
As the world becomes increasingly digitized, the demand for front-end developers is only going to increase.

### [231. Understanding React (Routing) with your Angular Knowledge](https://hackernoon.com/understanding-react-routing-with-your-angular-knowledge-j318s3qaw)
![](https://cdn.hackernoon.com/images/dbo3qw4.jpg)
Welcome to my React learning guide if you’re an Angular developer. On this series, I’ll provide you all the steps to develop the “Getting Started with Angular: Your First App” using React.

### [232. React Native Basics: Implementing Infinite Scroll](https://hackernoon.com/react-native-basics-implementing-infinite-scroll-hs143ur5)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FnZZAge5jGDSVNRKSJYG0ppDmWdu1-yr773uk6.jpeg?alt=media&token=122ed4ab-2dc9-4b43-a42e-941d14a9c16a)
React Native is without any doubt a strong and powerful solution. It opens the world of cross-platform app development for a much wider audience of software engineers who aren’t familiar with native technologies. But it might at the same time be quite difficult to implement complex things when you’ve just started learning. In this short tutorial, I want to give a step-by-step guide on how to implement one of them — infinite scroll.

### [233. The Easiest Way to Create Your First NPM Package](https://hackernoon.com/the-easiest-way-to-create-your-first-npm-package)
![](https://cdn.hackernoon.com/images/uKHFuSMAOXQpD3Hj26VzTmLymjn1-7ub3zhn.jpeg)
A fast and easy way to create an NPM package from start to finish

### [234. 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.

### [235. Build a Mobile App Using React Native and the Salesforce Mobile SDK ](https://hackernoon.com/build-a-mobile-app-using-react-native-and-the-salesforce-mobile-sdk)
![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-9i93knh.jpeg)
Check out how easy it is to start building a custom React Native application that leverages the Salesforce platform and the Salesforce Mobile SDK.

### [236. Frontend Dev: How to Build a Predictive Machine Learning Site With React and Python (Part 3)](https://hackernoon.com/frontend-dev-how-to-build-a-predictive-machine-learning-site-with-react-and-python-part-3)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-s1134pz.jpeg)
We will be building a machine learning React frontend that will predict whether a candidate will or will not be hired based on his or her credentials.

### [237. My Top 10 JavaScript Articles from 2019](https://hackernoon.com/my-top-10-javascript-articles-from-2019-we463yfk)
![](https://cdn.hackernoon.com/images/3gda3y76.jpg)
JavaScript has come a long way since its humble beginnings as a clunky, exclusively front-end scripting language. We saw some big developments in the JavaScript landscape during 2019, including the widespread adoption of React hooks and functional programming concepts, steady conversion to TypeScript, and continued domination of React in the front-end framework ecosystem.

### [238. 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,

### [239. Concurrent React Mode: Using Suspense and useTransition to Build A Better UX](https://hackernoon.com/concurrent-react-using-suspense-and-usetransition-to-build-better-ux-cman2cdd)
![](https://images.unsplash.com/photo-1518932945647-7a1c969f8be2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
The React JS dev team announced some exciting changes several months ago - React would be getting a "Concurrent Mode". Essentially this would allow React to perform multiple UI renders concurrently. Of course, JavaScript is single threaded and true concurrency is an illusion, but the new features will allow web apps (and Native Apps once these features hit React Native) to be much more responsive and snappy than they are now with less effort and custom code from the developer to make this happen.

### [240. 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.

### [241. How to Steal Secrets from Developers Using Websockets](https://hackernoon.com/how-to-steal-secrets-from-developers-using-websockets-dw3p3zgk)
![](https://cdn.hackernoon.com/images/1k532bry.jpg)
This is a story of a convoluted, not-very-useful method for extracting codez from unwitting JavaScript developers working on top secret projects.

### [242. How to Host a React Web App on AWS S3](https://hackernoon.com/aws-s3-hosting-a-react-web-app-on-aws-s3-kik3z4z)
![](https://cdn.hackernoon.com/images/jsty3zaf.jpg)
In this tutorial, we will go through the steps required to configure an S3 bucket to host a React.js web application

### [243. 5 Essential AWS Services for Web Development](https://hackernoon.com/5-essential-aws-services-for-web-development-ke2a31l1)
![](https://cdn.hackernoon.com/images/ZkfENnt2LdcfkiwMm6iukaGEHnB3-944u36yq.jpeg)
If you're getting started with AWS and you're interested to build your web applications using AWS services, then you're in the right place.

### [244. 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.

### [245. 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.

### [246. How I Started to Build React Components for Email Templates](https://hackernoon.com/how-i-started-to-build-react-components-for-email-templates)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-h5036fm.jpeg)
Let me share a story about building React Components for emails and the email generator that I created.

### [247. Boosting Website Performance: Leveraging Webpack for File Compression and Optimization](https://hackernoon.com/boosting-website-performance-leveraging-webpack-for-file-compression-and-optimization)
![](https://cdn.hackernoon.com/images/bKYjS2C6Rxcv14egxakvrg8O65x1-4ja3v29.jpeg)
File compression is a powerful optimization tool that reduces data size and leads to faster page loading times.

### [248. Performance Optimization of the Feed with Hundreds of Charts](https://hackernoon.com/performance-optimization-of-the-feed-with-hundreds-of-charts)
![](https://cdn.hackernoon.com/images/zUe8sFM0dqeu1BbbVYzVvIhD5vw1-mrh31ph.png)
Performance optimization of the feed with hundreds of charts using various techniques: pagination, lazy loading and server-side rendering

### [249. How 'displayName' Helps In Testing React Using Styled Components](https://hackernoon.com/how-displayname-helps-in-testing-react-using-styled-components-ouad24al)
![](https://cdn.hackernoon.com/images/o88r3y38.jpg)
How to get rid of the weird styled component names in test snapshots

### [250. It’s 2023, But We Still Need to Talk About Nested Styles in CSS](https://hackernoon.com/its-2023-but-we-still-need-to-talk-about-nested-styles-in-css)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-tna3m4d.jpeg)
Why don't I need to use nested css styles in my product and why is it a bad practice.

### [251. Adding a Back Button to your React Navbar](https://hackernoon.com/adding-a-back-button-to-your-react-navbar)
![](https://cdn.hackernoon.com/images/ZuuM3fSjXmf2oETrekt5pezKail2-jf93qmz.jpeg)
By default, the menu button is shown and the back button is not shown.

### [252. React.js "Lifting State Up" Explained](https://hackernoon.com/reactjs-lifting-state-up-explained)
![](https://cdn.hackernoon.com/images/SGrnT9L5mpeKZhlFAfb9cI7mTyG3-y46b299v.jpeg)
Lifting state up in React is a key feature that most React.js beginners struggle with. Here's how to use it.

### [253. 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.

### [254. How to Set Up End to End Tests with WebdriverIO on Github Action ?](https://hackernoon.com/how-to-set-up-end-to-end-tests-with-webdriverio-on-github-action)
![](https://cdn.hackernoon.com/images/5HhSAg08cMdhtoVJP3GS9OlNMRu1-mb29397m.jpeg)
For some time now I've been playing with github actions to see if I can easily reproduce behaviors I apply in my current CI tool. I wanted to parallelize tasks

### [255. Moving From React-Redux to @reduxjs/toolkit](https://hackernoon.com/moving-from-react-redux-to-reduxjstoolkit-55133u3c)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FfdZjxTAugIR20dO8BMICQg2rb9H2-6xb3uoj.webp?alt=media&token=7569de93-3d5e-4496-8e5c-d246259f8ca3)
I’ve been working with react-redux, and I’m loving it, working with react is awesome, but it can get confusing really fast, so when I was introduced to redux I just instantly loved it. The thing is… when I created an application using yarn create ract-app --template redux, the app had a different syntax than the one I was taught in all the tutorials I saw on youtube, so I started playing around with the default application, and the way they do things there is cleaner and more straight forward. After a quick google search, I realized the default app uses the @redux/toolkit and I wanted to talk about it because it’s pretty great, so…

### [256. 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...

### [257. How to Generate TypeScript Type Definitions and Code from GraphQL](https://hackernoon.com/how-to-generate-typescript-type-definitions-and-code-from-graphql)
![](https://cdn.hackernoon.com/images/MIq3LAf1OoPW35o7MBmd2s51rcB3-cz0378l.jpeg)
Using GraphQL together with TypeScript can have huge advantages, as you can use your GraphQL schema to create TypeScript type definitions on the fly!

### [258. Gatsby Won Against Next.js in this Heads Up Competition](https://hackernoon.com/gatsby-won-against-nextjs-in-this-heads-up-competition-xa7p3ysc)
![](https://cdn.hackernoon.com/images/t71b2e95.gif)
A comparison of static site generators and how server-side rendering hurt performance

### [259. The Best 10 React Development Tools](https://hackernoon.com/the-10-best-react-development-tools)
![](https://cdn.hackernoon.com/images/4sYzMFfsifXntKzPUjgUipJUb1K2-e81377f.jpeg)
In this article, we will talk about the top 10 React development tools in depth.

### [260. How to Build a Glorious Web3.0 DAO with React, Solidity, and CometChat](https://hackernoon.com/how-to-build-a-glorious-web30-dao-with-react-solidity-and-cometchat)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-ln93r29.jpeg)
In this tutorial, you will learn step-by-step how to implement a decentralized autonomous organization (DAO) with anonymous chat features.

### [261. Review of 12 Online Code Editors for Web Developers](https://hackernoon.com/review-of-12-online-code-editors-for-web-developers-xq83336g)
![](https://cdn.hackernoon.com/images/vs58yHu80FMCBlLC590ASRmc8Hl1-wq1233xt.jpeg)
Some online code editors have basic features similar to text editors while others complete Integrated Development Environments (IDEs). We review both.

### [262. React Developers Love Preact, Here's Why](https://hackernoon.com/why-react-developers-love-preact)
![](https://cdn.hackernoon.com/images/Bf6xbPmhtTcARlzNXM2oktEZuh22-pb92n73.jpeg)
Discover the power of Preact, a lightweight alternative to React, and unlock a new level of performance for your web applications. 

### [263. How To Handle Form and Validation with React?](https://hackernoon.com/how-to-handle-form-and-validation-with-react-9v143yfs)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FZhjIbvXP3nepA31GUobJFO0r40C3-aok2con.png?alt=media&token=8198199e-5bf5-44dc-b0a6-5caa159f6ddf)
Overview

### [264. 302 Stories To Learn About Front End Development](https://hackernoon.com/302-stories-to-learn-about-front-end-development)
![](https://cdn.hackernoon.com/images/github/front-end-development-735.png)
Learn everything you need to know about Front End Development via these 302 free HackerNoon stories.

### [265. 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.

### [266. Getting Started with React Server Components: A Step-by-Step Tutorial](https://hackernoon.com/getting-started-with-react-server-components-a-step-by-step-tutorial)
![](https://cdn.hackernoon.com/images/server-dominating-browser-app-vwxprqjxpd9yweh29tgedg0x.png)
React Server Components are a new feature that lets you build apps that combining the interactivity of client-side apps with the performance of server rendering

### [267. Enzyme Is Dead — Here's How You Can Migrate](https://hackernoon.com/enzyme-is-dead-heres-how-you-can-migrate)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-1z92h8u.jpeg)
Enzyme is dead and will no longer release official adapters compatible with future versions of React.

### [268. The Best Complex Frontend Architecture: What You Need to Know About Feature-Sliced Design](https://hackernoon.com/the-best-complex-frontend-architecture-what-you-need-to-know-about-feature-sliced-design)
![](https://cdn.hackernoon.com/images/9XknCnZTKoYkhLw6ANWS7J1i9RQ2-lv833hd.jpeg)
This article discusses the Feature-Sliced Design architecture, as in my opinion, it is the best for complex frontend projects among the available options.

### [269. Writing an Event Bus for React](https://hackernoon.com/writing-an-event-bus-for-react)
![](https://cdn.hackernoon.com/images/XyqHIwK0xDMOGdIf5iTNW4CrLjb2-kg93vru.png)
Event Bus is great for lightweight event systems. We'll discover its use case in React and build an Event Bus from scratch with TypeScript.

### [270. Simple Breadcrumbs in React with Reach-Router [Tutorial]](https://hackernoon.com/simple-breadcrumbs-in-react-with-reach-router-tutorial-x0y3u60)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F2CnaTwkypCg3LK5uANIw5XkUw453-wp5928xg.png?alt=media&token=c514e694-d5fc-4b33-9a71-a24e55d73b69)
One of the things that you end up developing in one point or in the other is a breadcrumbs navigation system. I've seen some posts across the web touting how to achieve it in React and Reach Router by providing complex looping mechanisms. In this post, I show you a simpler, non loop way that displays breadcrumbs in Reach-Router. 

### [271. 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.

### [272. How to Setup Tailwind CSS Framework with React](https://hackernoon.com/how-to-setup-tailwind-css-framework-with-react-f61p3u91)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2Fda7H4NzOhAdhje46xkTgaLorF5m2-gp1724nt.jpeg?alt=media&token=09c42820-35d2-41f0-8a6a-deac388059d6)
Tailwindcss provides a modern spin on writing css. And unlike bootstrap, it allows us write css without predefined classes i.e we can create our own custom styles without external opinions on how things should look.

### [273. Top 5 Interview Questions For Junior React Developers in 2022.](https://hackernoon.com/top-5-interview-questions-for-junior-react-developers-in-2022)
![](https://cdn.hackernoon.com/images/ARCWTrgYpoc531106B2eMedWoT42-wl93jz9.jpeg)
Junior React developers trying to get a job are likely to come across these five interview questions  when trying to get a job in the industry as a grad.

### [274. How Pagination Works in GraphQL](https://hackernoon.com/how-pagination-works-in-graphql)
![](https://cdn.hackernoon.com/images/MIq3LAf1OoPW35o7MBmd2s51rcB3-6ia3t6s.jpeg)
In this post, we'll compare different pagination methods in GraphQL and learn how to configure a REST directive to perform cursor-based pagination with StepZen

### [275. Handling Client Side Routing When Hosting Your React.js Project on AWS S3](https://hackernoon.com/handling-client-side-routing-when-hosting-your-reactjs-project-on-aws-s3-da6j3veq)
![](https://cdn.hackernoon.com/images/q91wg3yw4.jpg)
As a recent Bootcamp grad I wanted to put my new React skills to work and tie in my older skills with AWS. I built out my new portfolio site, using React, and I thought to myself, “can I host this in an S3 bucket?” The first task is deploying to S3, which was pretty straightforward and there are many good resources that you can find with a little googling, like this one, stepping through how to do that. 

### [276. 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.

### [277. 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 .

### [278. 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? 

### [279. How to Build an Ethereum Transaction App with React and Solidity: Part 1](https://hackernoon.com/build-your-own-ethereum-transaction-app-with-react-and-solidity-part-1)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-66039eh.jpeg)
This tutorial will teach you how to build a decentralized blockchain application from the ground up that will interact with a ReactJs frontend.

### [280. How to Build a Web3 Game eShop with React, Solidity, and CometChat](https://hackernoon.com/how-to-build-a-web3-game-eshop-with-react-solidity-and-cometchat)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-fx93ru8.jpeg)
Web3 development is officially the new way to build web applications, and if you are not there yet, you need to catch up. The way to master building web3...

### [281. Introducing An Open Source Backend Server for Mobile & Web Developers](https://hackernoon.com/introducing-appwrite-an-open-source-backend-server-for-mobile-and-web-developers-jkrw31jq)
![](https://cdn.hackernoon.com/images/9o1nh317j.jpg)
Appwrite is a new open-source, end to end backend server for frontend and mobile developers that allows you to build apps a lot faster. Appwrite goal is to abstract and simplify common development tasks behind REST APIs and tools, to help developers build advanced apps way faster.

### [282. How To Deploy React on AWS using NGINX](https://hackernoon.com/how-to-deploy-react-on-aws-using-nginx-km1u35hp)
![](https://cdn.hackernoon.com/images/JnwMdaVZrzSOfLb9FHlT2x1vsd62-eo7q3y8v.jpeg)
This post will help you to learn how to deploy your React applications to production. We are going to use Docker and NGINX to secure API keys and proxy requests

### [283. Creating a SPA that behaves as MPA with React](https://hackernoon.com/creating-a-spa-that-behaves-as-mpa-with-react-dqp3ybu)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FVoLzrWnqALUBiqBNBl46VipwZuk2-hg3q28u6.png?alt=media&token=c1d7691e-1cc3-4f01-95ad-1e492342c3fc)
Take advantage of React virtual DOM and create a single page application that behaves as a multiple page application. React Router DOM is a great tool to make this possible; in this article, I will explain how to use it.

### [284. Exploring Cross-Site Scripting (XSS): Risks, Vulnerabilities, and Prevention Measures](https://hackernoon.com/exploring-cross-site-scripting-xss-risks-vulnerabilities-and-prevention-measures)
![](https://cdn.hackernoon.com/images/tWWaDZTMIINIOJvLi1j2zZT6SPn2-ft93ppe.jpeg)
Cross-site scripting (XSS) is a common web security issue that can expose your web application and its users to various attacks. In this article, you will learn

### [285. The Most In-demand Web Technologies of 2022](https://hackernoon.com/the-most-in-demand-web-technologies-of-2022)
![](https://cdn.hackernoon.com/images/ZHAz9wv9l3eZzNLiVyAUACoJBo03-0ui309m.jpeg)
If you want to join the Freelancing market, a good first step would be to actually understand what the market is looking for; what technologies are popular...

### [286. Why Rust is Meant to Replace C](https://hackernoon.com/why-rust-is-meant-to-replace-c-xf8l3yei)
![](https://cdn.hackernoon.com/drafts/6iu63y8i.png)
The Rust programming language is an ambitious project of the Mozilla Foundation – a language that claims to be the next step in evolution of C and C++. Over the years of existence of these languages some of their basic flaws still haven’t been fixed, like segmentation errors, manual memory control, risks of memory leaks and unpredictable compiler behavior. Rust was created to solve these problems while improving security and performance along the way.

### [287. Designer to Developer Handoff: How to Build a React Component from a Figma Design File](https://hackernoon.com/designer-to-developer-handoff-how-to-build-a-react-component-from-a-design-file)
![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-u7r313r.jpeg)
AWS Amplify allows you to build an application from Figma and import the components into React. With the help of Amplify, the tool creates reusable components

### [288. Integrating Redux to your React App [A Step by Step Guide]](https://hackernoon.com/integrating-redux-to-your-react-app-a-step-by-step-guide-x02z32jb)
![](https://cdn.hackernoon.com/drafts/vz3qu3y8i.png)
My first approach to React was enough to fall in love with this framework: it's easy to work with, has a simple syntax, and it's so fast that you can build a simple application in less than a day.

### [289. Heatmap Visualization With Deck.gl ](https://hackernoon.com/heatmap-visualization-with-deckgl)
![](https://cdn.hackernoon.com/images/lmcwhIPXHyPIgqoOoDrA9xd8umf1-67b3p4n.jpeg)
Heatmaps are a very popular type of geo data visualization that are commonly used to display large amounts of location-based data.

### [290. 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.

### [291. 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.

### [292. 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.

### [293. Model Development: Build a Predictive Machine Learning Site With React and Python (Part 1)](https://hackernoon.com/model-development-build-a-predictive-machine-learning-site-with-react-and-python-part-1)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-gf03onv.jpeg)
We will be building a machine learning model that will predict whether a candidate will or will not be hired based on his or her credentials.

### [294. How to Create Your Own AI Resume Builder Using Next.js, OpenAI & CopilotKit](https://hackernoon.com/how-to-create-your-own-ai-resume-builder-using-nextjs-openai-and-copilotkit)
![](https://cdn.hackernoon.com/images/pZ43KOCYxoaqpmhumYqQN2DvtIf2-hba3gbb.jpeg)
In this article, you will learn how to build an AI-powered resume builder application using Nextjs, CopilotKit & OpenAI.

### [295. Frontend Testing for Busy Engineers: A Guide](https://hackernoon.com/frontend-testing-for-busy-engineers-a-guide)
![](https://cdn.hackernoon.com/images/zUe8sFM0dqeu1BbbVYzVvIhD5vw1-133366x.jpeg)
Learn effective frontend testing strategies to ensure application reliability, prioritize critical scenarios, and balance effort with quality.

### [296. 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.

### [297. GraphQL Subscriptions: Using SSE/Fetch over Websockets](https://hackernoon.com/graphql-subscriptions-using-ssefetch-over-websockets)
![](https://cdn.hackernoon.com/images/IRj9IIbyAHeTBUUb5MBZl3ThjTj2-bja3kq6.jpeg)
 "WebSockets should be deprecated for GraphQL Subscriptions. Instead, we're proposing to use Server Sent Events."


### [298. Beginners Guide to Get Started with Unit Testing in React Native](https://hackernoon.com/beginners-guide-to-get-started-with-unit-testing-in-react-native-8y2r3wwv)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FxKFspjTmcyXnrFi8RYanyuQuZJ73-mp2x3eka.jpeg?alt=media&token=10d0fbb8-9a14-4df5-a345-86251721b2eb)


### [299. Reducing Bugs in React Codebase by understanding anti-patterns](https://hackernoon.com/reducing-bugs-in-react-codebase-by-understanding-anti-patterns)
![](https://cdn.hackernoon.com/images/3IsSQpnu88cRkat5gOsYPSwjrNj1-5se3nsu.jpeg)
This article is a deep dive into some of the unexpected behaviors in a React codebase and the anti-patterns that cause them. 

### [300. 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.

### [301. React vs Angular: Why Is React So Much More Popular](https://hackernoon.com/react-vs-angular-why-is-react-so-much-more-popular)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-2n93pf6.jpeg)
In this blog, we will give you a clear idea of which one is better -  React vs Angular and help you make the final decision.

### [302. Does Expo Support React Native Web?](https://hackernoon.com/does-expo-support-react-native-web-r21bc309m)
![](https://cdn.hackernoon.com/drafts/xa1cw305h.png)
Short answer: Yes, expo supports react NATIVE web since SDK version 33.

### [303. How to Build an Awesome Web3 Crowd-Funding Platform with React, Solidity, and CometChat](https://hackernoon.com/how-to-build-an-awesome-web3-crowd-funding-platform-with-react-solidity-and-cometchat)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-ym93sko.jpeg)
How do you develop a smart contract for your Dapp? How do you best design the Dapp interface? How do you connect the front end to the backend smart contract?

### [304. ReactJS Tutorial: Embed Your YouTube and Medium RSS Feeds Into Your Website](https://hackernoon.com/reactjs-tutorial-embed-your-youtube-and-medium-rss-feeds-into-your-website-9u6o37ge)
![](https://cdn.hackernoon.com/images/HLsUedb7H2OG9SNmac9r2Md0Q773-mn3d39uu.jpeg)
How to Embed Medium and YouTube RSS Feed in Your React Application.

### [305. Creating Stunning 3D Charts With Highcharts And React.](https://hackernoon.com/creating-stunning-3d-charts-with-highcharts-and-react)
![](https://cdn.hackernoon.com/images/lmcwhIPXHyPIgqoOoDrA9xd8umf1-rnd3sfd.jpeg)
Unlock the power of data storytelling with Highcharts & React, crafting vibrant 3D visualizations for dynamic web apps.

### [306. Data Visualization Using Chart.js and Gatsby](https://hackernoon.com/data-visualization-using-chartjs-and-gatsby)
![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-ua23ii8.jpeg)
Data visualization helps you transform your unorganized data in an organized and valuable way that conveys the right message to your audience without words.

### [307. How to Pass Components Via Props in React](https://hackernoon.com/how-to-pass-components-via-props-in-react)
![](https://cdn.hackernoon.com/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-zb83xgp.jpeg)
Advanced React techniques like passing components as props for enhanced reusability and building dynamic interfaces effortlessly

### [308. Implement Dark Mode in Your React Apps Using SCSS [A Step By Step Guide]](https://hackernoon.com/implement-dark-mode-in-your-react-apps-using-scss-a-step-by-step-guide-u6fd329h)
![](https://cdn.hackernoon.com/images/iv14u2al5.jpg)
Implementing dark mode is as simple as calling a toggle on your classes.

### [309. How to Upload A CSV File In Python](https://hackernoon.com/how-to-upload-a-csv-file-in-python)
![](https://cdn.hackernoon.com/images/0sm1KIKmbZhu9AD2GAr4cKywoN43-f493nwb.jpeg)
This tutorial will walk you through different ways to import a CSV file into Python. Finally, we’ll explore how to upload a CSV file in python with the Filestac

### [310. Make a Choice Between React, Angular, and Vue to Create Web Apps](https://hackernoon.com/make-a-choice-between-react-angular-and-vue-to-create-web-apps-rqe4m2dms)
![](https://cdn.hackernoon.com/drafts/d29o42d2r.png)
As market trends begin to shift towards front-end development, it’s easy to question which JavaScript framework is in demand. Is it React, Angular or Vue? It’s a kind of game that makes you confused about which one you should pick up for your next web development project. It is even more confusing when you are just entering the trade game. A lot of startups and entrepreneurs don’t even realize which one is the right front-end framework for their web project.  

### [311. How To Improve React App Performance with SSR and Rust [Part II: Rust Web Server]](https://hackernoon.com/how-to-improve-react-app-performance-with-ssr-and-rust-part-ii-rust-web-server-vb1a373h)
![](https://cdn.hackernoon.com/images/3i1836rl.jpg)
Continue creating boosted Server Side Rendering implementation. In the first part we prepared ReactJS Application with SSR script that lets choose the best technologies for our Web Server.

### [312. 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?

### [313. npkill — The solution to deleting node_modules easily, with style](https://hackernoon.com/npkill-the-solution-to-deleting-node_modules-easily-with-style-q8a4308e)
![](https://cdn.hackernoon.com/images/mr14r300k.jpg)
Introduction

### [314. What is the "this" Parameter In JavaScript](https://hackernoon.com/what-is-the-this-parameter-in-javascript)
![](https://cdn.hackernoon.com/images/MM8znQHHo5PO8CucT9ftiFOGCOD2-np93ne2.jpeg)
The "this" parameter in JavaScript is like that oddly concealed obstacle on a path that keeps tripping people. 

### [315. 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

### [316. Maintaining Large React Applications](https://hackernoon.com/maintaining-large-react-applications-2cca618f221a)
![](https://cdn.hackernoon.com/images/1*CGZBmJuxbLBu2Q-XIimiWg.gif)
Part 1 — Keeping dependencies 

### [317. Build a Solana Crowdfunding App using React](https://hackernoon.com/build-a-solana-crowdfunding-app-using-react)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-qc93plt.jpeg)
A step-by-step guide to building a Solana Crowdfunding App using React and TypeScript.

### [318. 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.

### [319. How I Lost $1000 On One Pixel](https://hackernoon.com/how-i-lost-$1000-on-one-pixel)
![](https://cdn.hackernoon.com/images/qHMZ8kVymOZI7HXE58IAYCn1UW23-8293pcs.jpeg)
This is the story how a customer made me loose $1000 on moving stuff by 1px. It transformed my career and I never asked to bet back the money. It also told me s

### [320. 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?

### [321. How Atoms Fixed Flux](https://hackernoon.com/how-atoms-fixed-flux)
![](https://cdn.hackernoon.com/images/dgMWclIH0hOQrGwUJQcwZOCc97j1-r2d3pzt.jpeg)
The Flux architecture echoes throughout modern React state managers. Atomic libraries fulfill the original vision of Flux better than Flux ever could.

### [322. How to Integrate the Paytm Payment Gateway in Your React Native Apps](https://hackernoon.com/how-to-integrate-the-paytm-payment-gateway-in-your-react-native-apps)
![](https://cdn.hackernoon.com/images/F6gvkieDEJMJM2OCYAgi8dwAoeE3-nocg39ar.jpeg)
A step-by-step guide to integrating the paytm payment gateway in React Native Apps.

### [323. Authentication Using the Auth0 to a React Application](https://hackernoon.com/authentication-using-the-auth0-to-an-react-application)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-jl92jth.jpeg)
Application example built with React with authentication using the Auth0 service.

### [324. 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.

### [325. How To Create A User Portal On Airtable With Sync Inc And React](https://hackernoon.com/how-to-create-a-user-portal-on-airtable-with-sync-inc-and-react-nd1c35h9)
![](https://cdn.hackernoon.com/images/nUXzVZ9txdgpJy0AIouC9R4THH13-5w9r327s.png)
In this tutorial, you’ll see how to build a scalable, secure, and flexible client portal on Airtable using Sync Inc, Cotter, and Next.js.

### [326. Top 15 React Interview Questions & Answers You Need To Know in 2022](https://hackernoon.com/top-15-react-interview-questions-and-answers-you-need-to-know-in-2022)
![](https://cdn.hackernoon.com/images/7DtulTMuZUNhuHGe0I2LlQhRAdu1-wl93pht.jpeg)
In this article, we'll go over some of the most common React interview questions and how to answer them.

### [327. How To Simplify Your Application State Management](https://hackernoon.com/how-to-simplify-your-application-state-management-as6n3wz8)
![](https://cdn.hackernoon.com/images/sv5x3wol.gif)
The Introduction

### [328. How to Transition from Full-Stack Developer to Web3 Pioneer in 2022](https://hackernoon.com/how-to-transition-from-full-stack-developer-to-web3-pioneer-in-2022)
![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-de93ih7.jpeg)
Looking to dive into Web3 development? Here is an intro and quick example of how full-stack developers can get started in the decentralized web.

### [329. Infinite Scrolling vs Pagination: Making the Right Choice for React Apps](https://hackernoon.com/infinite-scrolling-vs-pagination-making-the-right-choice-for-react-apps)
![](https://cdn.hackernoon.com/images/vcNYDkWp01cxcapxGeAByVkmA6j1-kj837ri.jpeg)
Though infinite scrolling & pagination offer viable options for handling large datasets in React applications, check here what suites you best.

### [330. How to Learn Enough React to be Dangerous](https://hackernoon.com/how-to-learn-enough-react-to-be-dangerous)
![](https://cdn.hackernoon.com/images/aMtiSULDw4Tkj5LGaCQak8Pcy4D2-i0038fs.jpeg)
Most of React courses are outdated. Best up to date resources to learn React in 2021 NetNinja Codeevolution.
Focus on Hooks and functional components

### [331. How to Develop a Signup system with React, Redux, and Rails](https://hackernoon.com/how-to-develop-a-signup-system-with-react-redux-and-rails-1g1k32nh)
![](https://cdn.hackernoon.com/drafts/457xp3yhk.png)
I have always been fascinated with one’s ability to create or recreate. Software development for gives me a way to translate my imaginations into useful tangible things. The feeling I get after going through challenges to figure out how to put my ideas together, is incomparable. Full-stack development is the combination of both front-end technologies and back-end technologies to create a fully functional application. In this tutorial, we are going to combine front-end technology called React and Redux with a back-end technology called Rails to create a simple sign-up system.

### [332. 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:

### [333. How to Use React to Replace useEffect](https://hackernoon.com/how-to-use-react-to-replace-useeffect)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-75a3syg.jpeg)
useEffect is a hook that allows us to perform side effects in function components. It combines componentDidMount, componentDidUpdate, and componentWillUnmount 

### [334. How to Create Your First React Profile Page!](https://hackernoon.com/how-to-create-your-first-react-profile-page)
![](https://cdn.hackernoon.com/images/X2VpP4YrC8b6gvjvq2TCepEGRtQ2-ema339a.gif.webp)
Creating a profile page in React is not only essential but also super fun! It lets your users view and manage their personal info in style.

### [335. Checkers on React - Part 2 - Creating the Gameboard](https://hackernoon.com/checkers-on-react-part-2-creating-the-gameboard)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-p093psu.jpeg)
In this tutorial, we will start with creating the game board.

### [336. 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! 

### [337. Reactive Programming](https://hackernoon.com/reactive-programming)
![](https://hackernoon.imgix.net/hn-images/1*U1dLLKv5ivCsAc1vUxIU5w.png)
Mostly Front-end developers who are listening <strong>Reactive </strong>word first time they confuse it with <strong>React </strong>library. Actually it’s completely different.

### [338. How to Use Ink-ui to Build Beautiful CLI Tools Like OpenAI’s Codex](https://hackernoon.com/how-to-use-ink-ui-to-build-beautiful-cli-tools-like-openais-codex)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-n302uz4.jpeg)
The React invasion continues: Terminals aren’t safe anymore! How to use ink.js to build beautiful CLI tools your users will love.

### [339. React Component Testing Guide: Jest and RTL](https://hackernoon.com/react-component-testing-guide-jest-and-rtl-rx2533uz)
![](https://hackernoon.com/images/DHOqXwtCIKY1Gm9k9zgzeImIqrk2-gx5733db.jpeg)
This guide takes you through the basics of creating tests for React components using Jest and React Testing Library.

### [340. 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.

### [341. Best Tools For Building Your First MERN Application](https://hackernoon.com/best-tools-for-building-your-first-mern-application)
![](https://hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-7np28iz.jpeg)
Top tools to use when building your next awesome web application using the MERN stack

### [342. Building a React App with Rails API](https://hackernoon.com/building-a-react-app-with-rails-api-nv7537w1)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-pn1d376v.jpeg)
In this article, I will try to go through some important points of how to set up and build a Rails API with react as front-end.

### [343. Fetch Data From an API in React.js Using React Hooks ](https://hackernoon.com/fetch-data-from-an-api-in-reactjs-using-react-hooks)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-da13oxf.jpeg)
Create a web page that takes a city name as input and provides weather data about the city.

### [344. Using Cypress and Jenkins for React E2E Testing](https://hackernoon.com/using-cypress-and-jenkins-for-react-e2e-testing)
![](https://cdn.hackernoon.com/images/niWRiBq2IZav07eFxPUSfD39Cbw2-km03oh3.jpeg)
Learn React E2E Testing with Cypress and Jenkins.

### [345. 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

### [346. 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.

### [347. An Overview of Server Side and Isomorphic Async Rendering](https://hackernoon.com/an-overview-of-server-side-and-isomorphic-async-rendering-hr743bsa)
![](images/gg1g3ad4.jpg)
This article is aimed at developers who are interested in Server Side Rendering (SSR) but don’t know where to start or developers who are familiar with SSR but want more info on using async code splitting with SSR. If you are interested in optimizations to achieve faster page load times and smoother UX experiences, this is for you too.

### [348. The Best Front-End Frameworks for UI/UX: Future-Proof Careers ](https://hackernoon.com/the-best-front-end-frameworks-for-uiux-future-proof-careers)
![](https://cdn.hackernoon.com/images/RnMZwfsSDPZG9OBXlKwd37WEDsH3-kc93obp.jpeg)
The Best Front-end frameworks are future-proof and supply the best design solution to the UI experts. There are diverse options in the market for C++ and Java

### [349. Embed an In-browser Code Preview into Your React Application with Sandpack](https://hackernoon.com/embed-an-in-browser-code-preview-into-your-react-application-with-sandpack)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-6903nvp.jpeg)
Sandpack is a react library that helps you to add a live, in-browser coding environment to your react application easily.

### [350. How to Deploy Modern Apps with AWS Amplify](https://hackernoon.com/how-to-deploy-modern-apps-with-aws-amplify)
![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-ep1d30hg.jpeg)
Deploying a web app to AWS Amplify provides a way to host your frontend web app on the internet using its services for free which provisions a URL you can share

### [351. How to Get Your Personal Website to the Next Level ](https://hackernoon.com/how-to-get-your-personal-website-to-the-next-level)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-ond3wqx.jpeg)
The portfolio, in a sense, is a longer version of a Resume. In modern times, it’s important to showcase your work by uploading your portfolio to a website.

### [352. 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.

### [353. Set up WebSocket for Your ReactJS-app in 5 Minutes!](https://hackernoon.com/set-up-websocket-for-your-reactjs-app-in-5-minutes)
![](https://cdn.hackernoon.com/images/I6nNkFp9hdhaD3Qt79hfQAUDV2k1-lfh4rcg.jpeg)
Make the most out of your ReactJS app with the help of WebSocket on no-code Directual! An easy way to make a chat app, get notifications, and much more.

### [354. 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 

### [355. Do NOT Leave GraphQL Exposed Online](https://hackernoon.com/do-not-leave-graphql-exposed-online)
![](https://cdn.hackernoon.com/images/IRj9IIbyAHeTBUUb5MBZl3ThjTj2-et02fnc.jpeg)
In this post, I’d like to share my unpopular opinion on what GraphQL is really meant to be.

### [356. 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.

### [357. 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.

### [358. MAPSTATETOPROPS & MAPDISPATCHTOPROPS: The Bad Boys of React-Redux](https://hackernoon.com/mapstatetoprops-and-mapdispatchtoprops-the-bad-boys-of-react-redux-46ig37i3)
![](https://cdn.hackernoon.com/images/lz1cf2chf.jpg)
INTRODUCTION

### [359. Choosing Between React, Gatsby, Next.js For Your Frontend](https://hackernoon.com/choosing-between-react-gatsby-nextjs-for-your-frontend)
![](https://cdn.hackernoon.com/images/ZHAz9wv9l3eZzNLiVyAUACoJBo03-ja930rz.jpeg)
 React, Gatsby, Next.js. Which of the three should you choose for your frontend web development and what should you understand before you make the decision?

### [360. Adding a 'Sign In' Button to your React Navbar](https://hackernoon.com/adding-a-sign-in-button-to-your-react-navbar)
![](https://cdn.hackernoon.com/images/ZuuM3fSjXmf2oETrekt5pezKail2-2c93q57.jpeg)
This article shows you how to implement the sign in button in the react navigation bar.

### [361. How to Transport Your Components Anywhere With React Portals](https://hackernoon.com/how-to-transport-your-components-anywhere-with-react-portals)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-mb93pph.jpeg)
To solve this problem, we can teleport the modal out of its own component and into another part of our template using createPortal.

### [362. Angular vs React vs Vue: The Most Versatile Programming Language for 2020](https://hackernoon.com/angular-vs-react-vs-vue-the-most-versatile-programming-language-for-2020-j3bh339m)
![](https://cdn.hackernoon.com/drafts/1a1dx36nx.png)
Front end development has never been so popular earlier than now.  The powerful comeback of javascript has gained an enormous advantage and the single age applications easily replaced the old traditional web apps. The apps are now more powerful with the more focus over the first gate for your app, called the user interface. 

### [363. 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.

### [364. Filtering And Processing Data With useFilter Hook In React](https://hackernoon.com/filtering-and-processing-data-with-usefilter-hook-in-react-1d1834hc)
![](https://cdn.hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-kk1k29ew.jpeg)
A React hook to filter large amount of data using  Web Worker.

### [365. 10 Cool Data Table Libraries with Advanced Features](https://hackernoon.com/10-cool-data-table-libraries-with-advanced-features-nb4e35l2)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-yh1k35i8.jpeg)
JavaScript is on the list of requirements for a position as a web developer in any IT company at the moment. It is hard to imagine building modern web applications without JavaScript. This programming language provides IT specialists with an effective and relatively easy way to create interactive applications able to comply with the tastes of any picky customer. The choice of the JS libraries and frameworks adds dedicated followers to this language. 

### [366. Optimizing State Management in React Applications: From Small to Large-Scale](https://hackernoon.com/optimizing-state-management-in-react-applications-from-small-to-large-scale)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-1793ymm.jpeg)
Learn techniques for handling state effectively in large-scale React applications. 

### [367. Announcing Winds 2.0 — an Electron App with Support for RSS & Podcasts](https://hackernoon.com/announcing-winds-2-0-an-electron-app-with-support-for-rss-podcasts-d13dbe812477)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-qw8381u.gif.webp)
<strong>UPDATE</strong>: <a href="https://medium.com/@nparsons08/winds-2-0-public-beta-f0d27634ef91" target="_blank">https://medium.com/@nparsons08/winds-2-0-public-beta-f0d27634ef91</a>

### [368. How to Create a React Project From Scratch With TypeScript and Vite](https://hackernoon.com/how-to-create-a-react-project-from-scratch-with-typescript-and-vite)
![](https://cdn.hackernoon.com/images/creating-a-project-from-nothing-clhl4kzyp000001s6bbi6gdyu.png)
A step by step guide  on how to create a React project from scratch, with TypeScript and Vite

### [369. How to Build a Live Video Streaming App Using the Agora React Native SDK](https://hackernoon.com/how-to-build-a-live-video-streaming-app-using-the-agora-react-native-sdk)
![](https://cdn.hackernoon.com/images/vWYxlvCtYLdrvKGaEfm2hYijrQL2-5wc3hoh.png)
In this article, we will create a live broadcasting app that can accommodate numerous broadcasters and entertain thousands of users using the Agora Video SDK.

### [370. Adding the Material UI CSS framework to a React Application](https://hackernoon.com/adding-the-material-ui-css-framework-to-a-react-application)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-2092hoh.jpeg)
Application example built with React and adding the Material UI CSS framework using the @mui/material library.

### [371. Enhance Your Photos with the CSS Contrast, Brightness, Saturation, and Sepia Functions](https://hackernoon.com/enhance-your-photos-with-the-css-contrast-brightness-saturation-and-sepia-functions)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-t6g3s5m.jpeg)
Create custom Instagram filters using React and CSS. Adjust contrast, brightness, saturation, apply the sepia effect or convert images to grayscale.

### [372. How to Build a Web 3.0 App Using React, Solidity, Ethers.js, Hardhat, and Metamask](https://hackernoon.com/how-to-build-a-web-30-app-using-react-solidity-ethersjs-hardhat-and-metamask)
![](https://cdn.hackernoon.com/images/MPQxyfch0lZHKZM3k3hMies8Fpv1-4593muh.jpeg)
In this article, we will create a simple full-stack application using React, Hardhat, Solidity, Ethers.js, and Metamask that can be used as a boilerplate.

### [373. The New Next.js and SWR Clients: What You Need to Know](https://hackernoon.com/the-new-nextjs-and-swr-clients-what-you-need-to-know)
![](https://cdn.hackernoon.com/images/eQHzh6rz7ETBHLjs0KzCl1Dooqp2-yf93os5.jpeg)
So that's it, we are now using SWR as our default data fetching library, giving you all the benefits, like optimistic updates while consuming WunderGraph APIs. 

### [374. How I Remade 2048 Using React](https://hackernoon.com/how-i-remade-2048-using-react-viw37rc)
![](https://cdn.hackernoon.com/images/JnwMdaVZrzSOfLb9FHlT2x1vsd62-i3ej35y1.jpeg)
Today you will learn how to build your own clone of the 2048 game in React.

### [375. Memoization in React: Powerful Tool or Hidden Pitfall?](https://hackernoon.com/memoization-in-react-powerful-tool-or-hidden-pitfall)
![](https://cdn.hackernoon.com/images/7XhQwEsk1Eg58rZqKidDiZMpsI93-e193679.png)
Discover how overusing memoization in React apps can lead to performance issues. Learn where it fails and how to avoid these hidden traps in your development.

### [376. 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.

### [377. Canvas And React: A Simple Guide To Data Charts](https://hackernoon.com/canvas-and-react-a-simple-guide-to-data-charts)
![](https://cdn.hackernoon.com/images/lmcwhIPXHyPIgqoOoDrA9xd8umf1-lec3x6m.jpeg)
The power of canvas. Make your data visualizations flexible and performant. 

### [378. 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.

### [379. Top 7 Dark-Themed Admin Templates For Your Next Project](https://hackernoon.com/top-7-dark-themed-admin-templates-for-your-next-project-we193u6i)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMJpFVUEItkSdoh38rYo60VT7RfH3-kko4vgi.jpeg?alt=media&token=6238f933-67ce-4a47-a801-b8a63c70b02c)
If you don’t have any definite preferences in design, you should try dark colors, because dark themes look so stylish and become more and more popular. That is why we decided to find the most amazing React, Angular and Vue admin templates with dark themes. If you ever googled admin templates then you probably know that there are tons of them and that is fine to be on the fence about which one to choose. If you are not sure whether to use admin dashboards templates or not you can read the article about the benefits of admin templates. The incorrect choice of an admin template may lead to a giant waste of time and money – so it’s the decision you should think about for a while. 

### [380. How to Refactor Your React Application And Connect with Redux](https://hackernoon.com/how-to-refactor-your-react-application-and-connect-with-redux-fu203ugh)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FLJ9Zfx9Luld4QRV8mU0yiqcsw532-fi163uou.jpeg?alt=media&token=daa3cfd1-7bfe-4546-b8f2-08e156f46e5c)
Introduction

### [381. Adding Auth Flow Using SuperTokens into a React and Hasura GraphQL App](https://hackernoon.com/adding-auth-flow-using-supertokens-into-a-react-and-hasura-graphql-app)
![](https://cdn.hackernoon.com/images/tVmgy1BFDcZK1c7Ty90Zue1TAN93-ida2kpw.jpeg)


### [382. 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

### [383. How To Create React Apps From Scratch: [Part 1 - Setting Up]](https://hackernoon.com/how-to-create-react-apps-from-scratch-part-1-setting-up-medr33z6)
![](https://cdn.hackernoon.com/images/6d1i33v9.jpg)
Since React is currently one of the most in-demand front-end technology, I have decided to start a course series that intends to show you how to create the React js app from scratch to finish. 

### [384. 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.

### [385. Playwright and Chrome Browser Testing in Heroku: A Beginner's Guide](https://hackernoon.com/playwright-and-chrome-browser-testing-in-heroku-a-beginners-guide)
![](https://cdn.hackernoon.com/images/3msc2eMd3GQDyk2Wgg5I2BP5BHb2-9z724gc.jpeg)
This blog will show you how to run automated end-to-end Playwright tests for your React app with Headless Chrome on Heroku.

### [386. 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.

### [387. 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.

### [388. Bootstrap 5 Basics](https://hackernoon.com/bootstrap-5-basics-85113ujs)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FZcvfyVxI3KNhEQxQ9H6wfvhdWlW2-7tc03ucq.webp?alt=media&token=253f09c5-bb89-40c4-8078-9d4514666a3b)
The world’s most popular open-source framework used by developers with HTML, CSS, and JavaScript is ready to roll out the new release - Bootstrap 5  anytime soon!

### [389. How CORS (Cross-Origin Resource Sharing) Works?](https://hackernoon.com/how-cors-cross-origin-resource-sharing-works-292z32g0)
![](https://images.unsplash.com/photo-1496123989857-a6b172164681?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
If you are a web developer, you must have seen the ‘CORS’ error appearing often on your screen when you try to call the API. But, Why does it happen?

### [390. Managing Multi-Environment Configurations For React Applications with Tanzu](https://hackernoon.com/managing-multi-environment-configurations-for-react-applications-with-tanzu-2j2631do)
![](https://cdn.hackernoon.com/images/82dYFuavVVh4WYKNKyjj4OBt0cf1-ln1431eb.jpeg)
CRA allows you to easily build apps as static/minified files. Because everything is static, adding dynamism can be a challenge. This post addresses that!

### [391. More Features of the RTK Query](https://hackernoon.com/more-features-of-the-rtk-query)
![](https://cdn.hackernoon.com/images/ZXvwWhuaiAY0BoWkm8U7fJ1XTLI2-wy93n7v.jpeg)
Previously I wrote about RTK, this story will cover other details of its use.

### [392. How Redux Observable Made Ajax Calls Great Again](https://hackernoon.com/how-redux-observable-made-ajax-calls-great-again-1p583y3h)
![](https://cdn.hackernoon.com/drafts/p02cz32dy.png)
I am building my own SaaS application using React library for the user interface. What I like about react you don’t have to use it in a SPA (single page application).

### [393. 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.

### [394. 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.

### [395. Premium Chat Module For Your React Native App](https://hackernoon.com/premium-chat-module-for-your-react-native-app-cv2n3uus)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMJpFVUEItkSdoh38rYo60VT7RfH3-s33328zt.png?alt=media&token=33f316df-135d-4d78-aafc-09c626f5d641)
At Instamobile, we’re building a ton of complex features to save time and energy for React Native developers across the world. One of these complex features is the chat functionality, which is a must have in almost all mobile apps nowadays. In this tutorial, we’ll learn how to add a React Native Chat into any mobile app with only a few lines of code.

### [396. The Most Definitive React Hooks Cheat Sheet for 2020](https://hackernoon.com/the-most-definitive-react-hooks-cheat-sheet-for-2020-19ed33on)
![](https://cdn.hackernoon.com/images/xll33oz.jpg)
With the introduction of React hooks since the 16.8 version, we have changed the way we write React application. Indeed, we can now leverage React features, such as state and side effects, within function components. 

### [397. Localizing Your React-Native App [A How-To Guide]](https://hackernoon.com/localizing-your-react-native-app-a-how-to-guide-mm2o3y8t)
![](https://cdn.hackernoon.com/images/8vpb3wde.jpg)
Localization means adapting your app’s translations to suite your customers’ specific country or region. Supporting multiple languages (including RTL) is a critical feature for any successful mobile app, since it opens up the user base to a much larger pool of people, and also improves the user experience tremendously.

### [398. How We Built Our Software Documentation On Docusaurus](https://hackernoon.com/how-we-built-our-software-documentation-on-docusaurus)
![](https://cdn.hackernoon.com/images/7OHSNWE6pKYVHaleLrssNcNVlPe2-7293ln4.jpeg)
To cover our bases, we needed to improve and expand our documentation and this time, we wanted to make it scalable with Docusaurus.

### [399. A Guide to Embedding and Playing YouTube Videos in React Native Apps](https://hackernoon.com/a-guide-to-embedding-and-playing-youtube-videos-in-react-native-apps-ef4y3308)
![](https://cdn.hackernoon.com/images/TIJzydIu3tguQ0D6uODERgXfGTW2-vqc3o9s.jpeg)
Embedding and playing YouTube videos in your React Native app is seamless and a more affordable way of displaying videos in your app

### [400. React useState() Made Easy for Beginners](https://hackernoon.com/react-usestate-made-easy-for-beginners)
![](https://cdn.hackernoon.com/images/FpKROxxtLBRmSsCCb4lxCS7LBVr2-3j93toq.jpeg)
A beginner's guide to React useState(), simplified and made easy.

### [401. Automating Your Job Application with ChatGPT](https://hackernoon.com/automating-your-job-application-with-chatgpt)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-d793mjz.jpeg)
How to Automate Job Application with ChatGPT in 3 Steps

### [402. 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. 

### [403. Scalability: the Lost Level of React State Management](https://hackernoon.com/scalability-the-lost-level-of-react-state-management)
![](https://cdn.hackernoon.com/images/dgMWclIH0hOQrGwUJQcwZOCc97j1-qva3p6x.jpeg)
Apps grow. The React world often recommends half-baked solutions for state management. Prefer tools that scale well instead.

### [404. Advanced Tricks in React Native Programming for Mobile Development](https://hackernoon.com/advanced-tricks-in-react-native-programming-for-mobile-development)
![](https://cdn.hackernoon.com/images/rqSZjnOmxMTt3bDGw2yUD21lTzj2-km83x0f.jpeg)
Discover lesser-known React Native tricks & advanced techniques to elevate app development. Unleash its full potential in mobile innovation!

### [405. A New Two Repo Approach to React Native Development That Will Help You Boost Team Efficiency](https://hackernoon.com/a-new-two-repo-approach-to-react-native-development-that-will-help-you-boost-team-efficiency)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-2aa3qpt.jpeg)
Develop React Native code without building the native binaries, or work on the native parts without the business logic in JS? You can have both, here's how!

### [406. Top 12+ React Boilerplates and Starter Kits for 2024](https://hackernoon.com/top-12-react-boilerplates-and-starter-kits-for-2024)
![](https://cdn.hackernoon.com/images/SFsbtjO6xoXZQmI9d6SeRPSFgnH2-ix837g4.jpeg)
What criteria do you use when choosing a React boilerplate?  We made a comparison of boilerplates by features and analyzed each of them

### [407. Creating New Gatsby Theme with Typescript, MDX, and Theme-UI](https://hackernoon.com/creating-new-gatsby-theme-with-typescript-mdx-and-theme-ui-tz1c3u3u)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FHPI5sRRfsdZQD9DuckEymhfLoM32-ke3528ip.jpeg?alt=media&token=aa04a73a-279f-4cc0-8176-cdc24c3c0c1d)
Gatsby Themes provide a powerful way to share an opinionated set of configurations across multiple Gatsby sites. The features built into your Gatsby Theme will be abstracted out of your site and packaged as a dependency, providing an efficient way to develop similar Gatsby sites.

### [408. I Created a React Utility Component for Animations With Tailwind and CSS: AnimateIn](https://hackernoon.com/i-created-a-react-utility-component-for-animations-with-tailwind-and-css-animatein)
![](https://cdn.hackernoon.com/images/LuN3UOtBADcZwhrhLneCTnjGXw43-qia31bq.jpeg)
<AnimateIn/> is a reusable React component that I’ve made to drop in whenever I want to quickly add some animation effects to my projects.

### [409. 50+ GitHub Repositories Every Front-End Developer Needs](https://hackernoon.com/50-github-repositories-every-front-end-developer-needs)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-aj93qau.jpeg)
50+ Github Repositories Every Front-end Developer Needs

### [410. The 9 Mistakes JavaScript Developers Make the Most](https://hackernoon.com/the-9-mistakes-javascript-developers-make-the-most)
![](https://cdn.hackernoon.com/images/ZXvwWhuaiAY0BoWkm8U7fJ1XTLI2-4f93sgn.jpeg)
In this article, we'll take a look at some of the most common JavaScript mistakes and how to avoid them.

### [411. Why You Should Choose Angular or Vue over React for Your New Web Application](https://hackernoon.com/why-you-should-choose-angular-or-vue-over-react-for-your-new-web-application)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-gl82qas.jpeg)
An article that describes the advantages of the front-end frameworks Angular and Vue over the front-end React library.

### [412. 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.

### [413. 10 Things Every Beginner Should Know When Learning Javascript And React](https://hackernoon.com/10-things-every-beginner-should-know-when-learning-javascript-and-react-c46c3w4y)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-5882roz.jpeg)
React is build on top of pure Javascript for the most part.  Here you will learn about 10 Javascript concepts that will help you write better React code.

### [414. Supercharge Your JavaScript Dockerfile for High-Performance Production Deployments.](https://hackernoon.com/supercharge-your-javascript-dockerfile-for-high-performance-production-deployments)
![](https://cdn.hackernoon.com/images/bKYjS2C6Rxcv14egxakvrg8O65x1-bma3p6k.jpeg)
A step-by-step guide on writing a Dockerfile for a NestJS project.

### [415. Adding GIFs to Your React Native Application Using Giphy API](https://hackernoon.com/adding-gifs-to-your-react-native-application-using-giphy-api-ai1w3u2l)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMJpFVUEItkSdoh38rYo60VT7RfH3-v8v28wl.png?alt=media&token=8d813df6-bb05-4684-95c0-fea6a3668e9f)
Giphy is the largest library providing one of the most popular forms of media widely used for chatting –  GIFs or Graphics Interchange Format and stickers. The most popular social media apps such as WhatsApp, Instagram, Slack, Skype and Twitter (to mention a few) use Giphy’s technology to provide GIF content and Stickers for their chat users to improve the chatting experience. 

### [416. Reasons to Write Code On Paper](https://hackernoon.com/reasons-to-write-code-on-paper-57q3tpj)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FhHXqnCUCd5UEYXq3ifLsdK87mrj2-cn8p3xy5.jpeg?alt=media&token=a494e835-c768-40e8-b771-1525802843ea)
Half and a year ago I rewrote the JavaScript encyclopedia starting from "Advanced working with functions" until the end,  and oh boy, the result was amazing. From start I easily wrote the JavaScript class for the Webpack plugin, that was a joy. 

### [417. How to Connect React, Highcharts And Cube.js](https://hackernoon.com/how-to-connect-react-highcharts-and-cubejs-6o2f3ubd)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FPxbF3GXSRSaxPzgsZ8BLVt4y7WJ2-ft4t3etc.jpeg?alt=media&token=c75b0829-a44e-429a-a866-4a2666783d05)
Started as a simple charting tool for monitoring a snow depth near the owner’s country house in Norway, Highcharts quickly became one of the most popular visualization libraries. It provides a lot of great built-in interactive features and is easy to use.In this tutorial we are going to build a simple e-commerce dashboard with Cube.js and Highcharts. We’ll use the main Highcharts library, as well as Maps, Stock, and Solid Gauge modules.

### [418. 7 jQuery-Free Admin Dashboard Templates Built with React, Vue or Angular](https://hackernoon.com/7-jquery-free-admin-dashboard-templates-built-with-react-vue-or-angular-6f38353m)
![](https://cdn.hackernoon.com/images/HrzvBX6xNSVZBKImURJl23sRwcQ2-wy3335uw.jpeg)
Recently we decided to make our templates jQuery-free. Please enjoy this list of admin dashboard templates without jQuery dependencies.

### [419. 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.

### [420. Maps on the Web Using React and Mapbox](https://hackernoon.com/maps-on-the-web-using-react-and-mapbox)
![](https://cdn.hackernoon.com/images/qGiS8EEpW3RAc4RCe4FOZyoNK362-bmg34ff.jpeg)
I will illustrate how to use Mapbox with React and explain how these technologies work together.

### [421. React Native ECharts VS Victory Native VS React Native Chart Kit: Which Solution is Better?](https://hackernoon.com/react-native-echarts-vs-victory-native-vs-react-native-chart-kit-which-solution-is-better)
![](https://cdn.hackernoon.com/images/vJcrvKCc3hh6oCV6ujhOFQ6v9dN2-p093rdh.jpeg)
In this article, we will compare three popular chart libraries in the React Native community: React Native ECharts, Victory Native, and React Native Chart Kit.

### [422. Styled Components:  The Essentials to Get Started](https://hackernoon.com/styled-components-essentials-to-get-you-started-g117t3fqr)
![](https://cdn.hackernoon.com/drafts/qi11n3fq4.png)
Photo by Hello I’m Nik 🇬🇧 on Unsplash

### [423.  How To Debug React Native Debugger](https://hackernoon.com/how-to-debug-react-native-debugger-rw1p3tzb)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F7hNScric1WcTcZqxOlzpN8s54n43-uu573xnj.jpeg?alt=media&token=98d3b936-23fd-4bc2-bd68-01efcb3ebc11)
React Native Debugger is a powerful tool that helps developers debug React Native applications more quickly. It provides a suite of impressive features, such as UI inspector, redux inspector, breakpoints and networking inspector. In this article, we are going to learn how to install and use the React Native Debugger, which will boost your development productivity by an order of magnitude.

### [424. How I Use AI in Frontend Development](https://hackernoon.com/how-i-use-ai-in-frontend-development)
![](https://cdn.hackernoon.com/images/kPMWeqKHrERbWZ4wSgIwTb4IiRh1-ixg31iy.png)
In this article, I want to tell you what AI tools I use in the development of my Web projects to simplify my work.

### [425. How To Build WordPress App with React Native Part #5: Home Screen](https://hackernoon.com/build-wordpress-app-with-react-native-5-home-screen-hobf32tq)
![](https://cdn.hackernoon.com/images/dt2832iu.jpg)
This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the React Native App Templates from instamobile

### [426. The Tech Stack of a Solo-Developer to build a SaaS With React and AWS](https://hackernoon.com/the-tech-stack-of-a-solo-developer-to-build-a-saas-with-react-and-aws)
![](https://cdn.hackernoon.com/images/Z7ZkCzqpkBdXJ4DMKYwft6zCe9q1-ga873568.jpeg)
My stack to build a SaaS with Next JS and serverless backend. A full-stack react SaaS boilerplate template to kickstart any project.

### [427. Over 40, With no Technical Background, This is How I Learned a Frontend Framework in 2 Weeks](https://hackernoon.com/over-40-with-no-technical-background-this-is-how-i-learned-a-frontend-framework-in-2-weeks)
![](https://cdn.hackernoon.com/images/dH5TBmoEbZTGp8KEaGc3Ga3ntjC2-4993tuv.jpeg)
Over 40, with no technical background, this is how I learned a Frontend Framework in 2 weeks.

### [428. 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.

### [429. In North Korea, Front End Devs Face Platform Inconsistencies That You Might Not Know Even Existed](https://hackernoon.com/dealing-with-platform-inconsistencies-as-a-north-korean-front-end-developer-frdm3rp6)
![](https://cdn.hackernoon.com/images/036od3rfp.jpg)
You’re a North Korean engineer who’s been selected to develop a new government project. It’s an HTML form, which North Korean political leaders will fill in for [REDACTED] purposes.

### [430. Angular v14's New Features](https://hackernoon.com/angular-v14s-new-features)
![](https://cdn.hackernoon.com/images/ARCWTrgYpoc531106B2eMedWoT42-w193mzb.jpeg)
Angular v14 is available. Here are the new features and improvements from this new version such as streamlined page titles, ng modules and new commands.

### [431. Intro to React CSS Modules](https://hackernoon.com/intro-to-react-css-modules-9w8c3yn8)
![](https://cdn.hackernoon.com/images/0xcso3yec.jpg)
CSS Modules helps you create independent and customized cascading style sheets for any .js file rendering HTML in your React application.

### [432. Building a Documentation Website for Your Open-source Project Using Docusaurus​](https://hackernoon.com/building-a-documentation-website-for-your-open-source-project-using-docusaurus)
![](https://cdn.hackernoon.com/images/vJcrvKCc3hh6oCV6ujhOFQ6v9dN2-nq93p9e.jpeg)
If you're interested in building a documentation website for your open-source project, this guide can be a great reference.

### [433. Hooked on React's Array Destructuring Pattern](https://hackernoon.com/hooked-on-reacts-array-destructuring-pattern-ed32y3smn)
![](https://cdn.hackernoon.com/drafts/r839b3sw8.png)
The other day I was reading up on the legendary React God Dan Ambrov’s great but very un-TLDR post on useEffect.

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

### [435. 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.

### [436. Making a React Chat App Using Socket.io](https://hackernoon.com/making-a-react-chat-app-using-socketio)
![](https://cdn.hackernoon.com/images/9ln0OHvfuhgKBqQIuNFg8jiCzrI2-28a37gg.jpeg)
How to build your own chat with React? Create a powerful chat application in 5 simple steps with the help of web application generator.


### [437. Building a Full Stack NFT Minting DApp Using Hardhat, Ethers.js, Next.js, and TailwindCSS](https://hackernoon.com/building-a-full-stack-nft-minting-dapp-using-hardhat-ethersjs-nextjs-and-tailwindcss)
![](https://cdn.hackernoon.com/images/azoUWx83HEPfNN4mzBevmiiqamD3-9b92fhm.jpeg)
Building a Full Stack NFT minting Dapp using Hardhat, ethers.js, Next.js, and TailwindCSS

### [438. How to Build a Slack Clone with React, Firebase, and CometChat](https://hackernoon.com/how-to-build-a-slack-clone-with-react-firebase-and-cometchat-3r3037kq)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-pvbo331k.jpeg)
In this tutorial, we will be combining the full power of React, Firebase, and CometChat to build a slack clone that will leave you mind-blown.

### [439. A Quick Guide To The render() Method in React](https://hackernoon.com/a-quick-guide-to-the-render-method-in-react)
![](https://cdn.hackernoon.com/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-vv83lv8.jpeg)
In this guide, we’ll try to shed light on what render() is, what it does, and why it’s so important for development process with React.

### [440. 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.

### [441. Build an AI Chatbot Faster Than Your Morning Coffee Run With This Guide](https://hackernoon.com/build-an-ai-chatbot-faster-than-your-morning-coffee-run-with-this-guide)
![](https://cdn.hackernoon.com/images/m6OvIAdfE8XXYN2x7hNbCvMdhAk2-kl133ii.jpeg)
Learn how to build an AI-powered chatbot using React, Vite, and Cohere's API. 

### [442. Free Tools That Will Help You Grow As A Front-End Developer In 2021](https://hackernoon.com/free-tools-that-will-help-you-grow-as-a-front-end-developer-in-2021-ssx334e)
![](https://hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-i6l330n.jpeg)
You only need this post to become a Front-end Developer because this post has nearly unlimited amount of every type of resources covering everything you....

### [443. 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.

### [444. 10 Useful JavaScript Functions to Learn](https://hackernoon.com/10-useful-javascript-functions-to-learn)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-s6s3o8z.jpeg)
Read about the 10 must-know JavaScript array functions.

### [445. 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

### [446. The New Features of React 19: What You Need to Know](https://hackernoon.com/the-new-features-of-react-19-what-you-need-to-know)
![](https://cdn.hackernoon.com/images/Wj8C4GEIgvdN0skdOLTGPSSAyTD2-6sc336l.jpeg)
For developers looking to stay ahead of the React race, understanding new React 19 features is essential.

### [447. The Essential Guide to Building an NFT Auction Site with React, Solidity, and CometChat](https://hackernoon.com/the-essential-guide-to-building-an-nft-auction-site-with-react-solidity-and-cometchat)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-y593ro2.jpeg)
This tutorial shows you how to build an NFT auction site using React, Solidity, and CometChat. We will use React for the front end and Solidity for the smart co

### [448. 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. 

### [449. Monitoring An Element As It Enters Or Leaves the Viewport Efficiently in React](https://hackernoon.com/monitoring-an-element-as-it-enters-or-leaves-the-viewport-efficiently-in-react-vy5k321e)
![](https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Recently, I released the react-cool-inview, it's a React hook that monitors an element enters or leaves the viewport (or another element) with performant and efficient way, using Intersection Observer. It's lightweight and super flexible, which can cover all the cases that you need, like lazy-loading images and videos, infinite scrolling web app, triggering animations, tracking impressions, and more. Try it you will 👍🏻 it!

### [450. Checkers on React - Part 1 - Project Configuration and Initialization](https://hackernoon.com/checkers-on-react-part-1-project-configuration-and-initialization)
![](https://cdn.hackernoon.com/images/ZXvwWhuaiAY0BoWkm8U7fJ1XTLI2-sj93rfu.jpeg)
 I want to start a series of stories where I will try to implement a Checkers game. 

### [451. A Beginner’s Guide to React Hooks and How to Use Them](https://hackernoon.com/a-beginners-guide-to-react-hooks-and-how-to-use-them)
![](https://cdn.hackernoon.com/images/a-computer-on-a-hook-clcpsybxq000201s6cnsrb8r0.png)
Hooks are also useful because they allow you to split your code into smaller, reusable pieces, which can make it easier to manage and test.

### [452. JSWorld Conference 2022: Part II](https://hackernoon.com/jsworld-conference-2022-part-ii)
![](https://cdn.hackernoon.com/images/NYsEt0jSD0Ttv4Gl8UDQGzu9Q9C3-8nc3m9c.jpeg)
JSWorld Conference is the number one JavaScript Conference in the world, and I share a summary of all the talks with you. Part II

### [453. React Native Apple App of the Day Animation Part I : Setup UI](https://hackernoon.com/react-native-apple-app-of-the-day-animation-1-setup-ui-it1xo321p)
![](https://cdn.hackernoon.com/images/as1xi32fi.jpg)
In this tutorial, we are going to create React Native Shared Element Transition by replicating Apple app of the day as an example. This tutorial will address an interesting aspect of using React Animation and Dimensions to making images look cool. Here, we are not going to use any external react plugins. All the required components like Image, Animated, Dimensions are provided by the react-native package.this tutorial inspired from React native ecommerce template 

### [454. 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.

### [455. How to use context API in React](https://hackernoon.com/how-to-use-context-api-in-react-ud4o3v8f)
![](https://cdn.hackernoon.com/images/gp1d3vsm.jpg)
What is context API

### [456. Planby 2.0 + React: Implementation of Schedules, Timeline, and Music ](https://hackernoon.com/planby-20-react-implementation-of-schedules-timeline-and-music)
![](https://cdn.hackernoon.com/images/Da9uhRI9WRWQWuWeXGdikUrycUR2-nnd3oiy.jpeg)
Planby is a component for a quick implementation of EPG, schedules, music events, timelines and many more ideas

### [457. 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!

### [458. 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.

### [459. How to Optimize React Performace by Using useRef Hooks](https://hackernoon.com/how-to-optimize-react-performace-by-using-useref-hooks-4t1n315h)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FRudziJU9ZEcBSDbKuskBkqN4ZgG3-486s28nm.jpeg?alt=media&token=4b7e0a6d-e654-41dc-9a6f-e480f6392413)
And how we stopped our React Context re-rendering everything

### [460. Supercharge Your React Applications: 7 Best Practices and Techniques](https://hackernoon.com/supercharge-your-react-applications-7-best-practices-and-techniques)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-s0a3yrl.jpeg)
When a React application is optimized, loading times are significantly reduced, allowing users to quickly access content and start interacting without unnecessa

### [461. How to Create PR Review Apps with Render](https://hackernoon.com/create-apps-to-automatically-review-pull-requests-with-render)
![](https://cdn.hackernoon.com/images/D7Hn3CmOHedLjdaXSIpRfZ5ezZG3-0n93lwk.jpeg)
By making it simple to visually review changes, PR review apps make it more likely that code reviewers will actually do so.

### [462. Boosting React App Performance: A Guide to Lazy Loading and Suspense](https://hackernoon.com/boosting-react-app-performance-a-guide-to-lazy-loading-and-suspense)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-1993wm6.jpeg)
Lazy loading is a strategy that defers the loading of non-essential resources until they are needed, reducing the initial loading time and improving the overall

### [463. 16 Commands For Every Use Case to Set Up React Apps in Seconds ⚡🚀](https://hackernoon.com/16-commands-to-set-up-react-apps-for-every-use-in-seconds)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-gr03gzz.jpeg)
In this article, I have handpicked 16 commands to set up your React apps in seconds.

### [464. I Just Finished a Coding Bootcamp... Was It Worth It?](https://hackernoon.com/i-just-finished-a-coding-bootcamp-was-it-worth-it-2l3y30pk)
![](https://cdn.hackernoon.com/drafts/oj9y63wuu.png)
Long story short: F*ck Yes!

### [465. Essential Guide to Building a Decentralized eCommerce Platform with React and Solidity (Part 1)](https://hackernoon.com/essential-guide-to-building-a-decentralized-ecommerce-platform-with-react-and-solidity-part-1)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-j2a3l3m.jpeg)
The demand for Web3.0 solutions is at an all-time high, but there isn't enough material available to usher in the army of developers required to fill the job op

### [466. React Vs. Vue: Who Takes The Prize](https://hackernoon.com/react-vs-vue-who-takes-the-prize-oq1633op)
![](https://cdn.hackernoon.com/images/MqO5FJu5BqX6pm118RBfsb2Qysq1-pg3833gq.jpeg)
we’ve put together this convenient guide to popular frameworks, to help you better understand the use cases of Vue vs. React.

### [467. 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

### [468. [DIY] AirBnB Clone with React Native Part 5: Loading Modal Implementation](https://hackernoon.com/diyairbnb-clone-with-react-native-part-5-loading-modal-implementation-aa1b3325g)
![](https://cdn.hackernoon.com/drafts/911av32e5.png)
AirBnB Clone with React Native Part 5: Loading Modal Implementation

### [469. The Crazy Problems with Creating PDFs on the Frontend](https://hackernoon.com/the-crazy-problems-with-creating-pdfs-on-the-frontend)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-fi0376u.png)


### [470. Senior Web Developers Are Using These 11 Design Patterns to Write Squeaky Clean React Code](https://hackernoon.com/senior-web-developers-are-using-these-11-design-patterns-to-write-squeaky-clean-react-code)
![](https://cdn.hackernoon.com/images/YpXxsUjOJbVehoteB0eyPeom5do1-oy03c2q.png)
Discover 11 React Design Patterns You Need to Know to improve your code efficiency, scalability, and maintainability. Perfect for all React developers!

### [471. 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.

### [472. Customizing a React Navbar Menu](https://hackernoon.com/customizing-a-react-navbar-menu)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-ob932we.jpeg)


### [473. Angular or React: Which One Should You Choose and Why](https://hackernoon.com/angular-or-react-which-one-should-you-choose-and-why)
![](https://cdn.hackernoon.com/images/bFFEe4dIUoXgbouiLfgW9PI9b8q1-7dd3kj3.jpeg)
When to Choose React? When to Choose Angular? Features of React Features of Angular JS History of React JS History of Angular JS React vs. Angular: The Complete Comparison Advantages of React js Advantages of Angular js Disadvantages of React jsDisadvantages of Angular js Which is Better?

### [474. Approaching in-house Modern UI Library: Startup`s Guide](https://hackernoon.com/a-startups-guide-to-approaching-in-house-modern-ui-library-pz1d356h)
![](https://cdn.hackernoon.com/drafts/3134735tb.png)
I can list down the reasons for “why” to do in-house, but I’ll refrain. Since you are landing here I assume you will know your why’s.

### [475. Why I Ditched Wordpress to Save My Music Release and What I Did After](https://hackernoon.com/ditching-wordpress-saved-my-music-release-d63g32i9)
![](https://cdn.hackernoon.com/drafts/vao325k.png)
I’m a Chapman Stick player turned web developer. I’ve had a Wordpress site for my Electronic Prog-Rock music project since 2014, much before I started my career as a web developer in 2017. Since becoming a developer, I’ve wanted to rebuild the website but, a combination of time, lack of design chops, and a bit of ignorance of how to migrate all the plugin tools Wordpress provides delayed my project.

### [476. 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! 

### [477. WYSIWYG HTML Editors and Accelerating Development with React, Angular, and Vue](https://hackernoon.com/wysiwyg-html-editors-and-accelerating-development-with-react-angular-and-vue)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-br93pn6.jpeg)
Let’s check out how React, Angular, and Vue.js expedite development and compare their methodologies.

### [478. 5 Successful Hybrid App Frameworks that will Mould the Way of App Development in 2021](https://hackernoon.com/5-successful-hybrid-app-frameworks-that-will-mould-the-way-of-app-development-in-2021-0lo34yu)
![](https://cdn.hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-r1p284o.jpeg)
Here are 5 best hybrid app framework and help you to choose the best for you.

### [479. The Coder's Gambit: Create a Chess Game with React and Chessboardjsx ](https://hackernoon.com/the-coders-gambit-create-a-chess-game-with-react-and-chessboardjsx-za2z31oc)
![](https://cdn.hackernoon.com/images/1YXFIyZr1ESaAbiPktwpv7ignz73-b31q319u.jpeg)
In this article we are going to create a chess game with React and Chessboardjsx ♟️. On top of that, we will use the chess.js library.

### [480. Introducing React Server Components](https://hackernoon.com/introducing-react-server-components-2e2a33e9)
![](https://cdn.hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-o81328p9.jpeg)
React Server Components enable us to render React components on the server to improve the overall performance of an app.

### [481. 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

### [482. The Roadmap and Resources to Becoming a Full Stack Developer](https://hackernoon.com/the-roadmap-and-resources-to-becoming-a-full-stack-developer)
![](https://cdn.hackernoon.com/images/q4jUepDWV5h0iWw9JO2xESWTeNz1-lha3ijb.jpeg)
In this blog, I am going to be sharing with you the Roadmap and the Resources that you require to become a Full Stack Developer.

### [483. This Simple App Lets You See How Hollywood Uses Color to Mess With Your Emotions](https://hackernoon.com/this-simple-app-lets-you-see-how-hollywood-uses-color-to-mess-with-your-emotions)
![](https://cdn.hackernoon.com/images/rwA7IPj2F2NcuLHM6krzJfXXwIj1-ic239be.png)
Learn how color grading works, what color targets are, and build your own palette-based grading tool in React — from scratch and with purpose.

### [484. A Method That Will Help You Clone Netflix With Micro Frontends The Right Way](https://hackernoon.com/a-method-that-will-help-you-clone-netflix-with-micro-frontends-the-right-way-bes33jq)
![](https://cdn.hackernoon.com/images/LeC71VGz92YOpmCgKQPIb6211Dk1-qu7n32mg.jpeg)
I created a Netflix clone using Piral: an open-source framework for creating modular applications.

### [485. 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

### [486. Build Your Own Currency Exchange Web App in ~100 lines using CRA [A Step By Step Guide]](https://hackernoon.com/build-your-own-currency-exchange-web-app-in-100-lines-using-cra-a-step-by-step-guide-qa4h32h0)
![](https://images.unsplash.com/photo-1521897258701-21e2a01f5e8b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
This tutorial describes how to create a simple currency exchange app in just about 100 lines of code using the Create React App boilerplate.

### [487. How To Score A Perfect 100 Google Lighthouse Score in Chrome Dev Tools](https://hackernoon.com/how-to-score-a-perfect-100-google-lighthouse-score-in-chrome-dev-tools-8v4833dx)
![](https://cdn.hackernoon.com/images/m1JWnUaHzSX3LPHoHfOainoiYvq2-9g3z3f0t.jpeg)
This is How I Built My Portfolio Site and personal blog using React and NextJS, and how it achieved a Perfect Lighthouse Score. I rundown all the fudamental iss

### [488. Airbnb Home Screen UI Clone with React Native #1 : Setup UI](https://hackernoon.com/airbnb-home-screen-ui-clone-with-react-native-1-setup-ui-rkz832f1)
![](https://cdn.hackernoon.com/images/ydyz32hb.jpg)
This tutorial series was inspired by React native template which helps us build some amazing ready to deploy applications that anyone can use to build startups or sell the application templates. This tutorial replicates the coding implementations and designs from the Youtube video tutorial by Unsure programmer for the Airbnb clone. The video tutorial is very easy to follow and intuitive. Here, we are going to follow the video tutorial but implement it by using a different version of React Native packages and plugins.

### [489. The Top Five Frameworks For Developing Android Apps](https://hackernoon.com/the-top-five-frameworks-for-developing-android-apps)
![](https://cdn.hackernoon.com/images/pPlHbtxam1csdO9PX26LdzqMbv42-1c92ipm.jpeg)
Understanding Android development frameworks will help you pick the right one for your mobile app, letting you make better decisions on how to develop.

### [490. 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.

### [491. How to Build a Blog with Strapi, Netlify, and React 👨‍💻](https://hackernoon.com/how-to-build-a-blog-with-strapi-netlify-and-react-8yv318d)
![](https://cdn.hackernoon.com/images/1YXFIyZr1ESaAbiPktwpv7ignz73-y51r3unr.jpeg)
How to Build a Blog with Strapi, Netlify, and React 👨‍💻

### [492. Build a Decentralized Freelancer Marketplace With React, Solidity, and CometChat](https://hackernoon.com/build-a-decentralized-freelancer-marketplace-with-react-solidity-and-cometchat)
![](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-m093ov5.jpeg)
Learn how to build a decentralized freelance marketplace like Upwork using React, Solidity, and CometChat.

### [493. The Noonification: Best Examples of Apps Written in React.js (9/10/2023)](https://hackernoon.com/9-10-2023-noonification)
![](https://cdn.hackernoon.com/images/noonification_331_u5vc12psdt1oi94yav3hx2o6.png)
9/10/2023: Top 5 stories on the Hackernoon homepage!

### [494. Top 3 React Custom hooks in current project](https://hackernoon.com/top-3-react-custom-hooks-in-current-project)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-ii932p0.jpeg)
Custom hooks are an amazing thing that happened with React. It brings to us the ability to create beautiful components and move a lot of business logic to hooks

### [495. Web Dev in 2023: Angular vs. React Battle for Dominance](https://hackernoon.com/web-dev-in-2023-angular-vs-react-battle-for-dominance)
![](https://cdn.hackernoon.com/images/osANa311i1Tv04kIhmAbiwf1UfD3-cfb3xny.jpeg)
In the ever-evolving landscape of web development, Angular and React continue to be two powerhouse options for front-end development. 

### [496. How I Built a Vendor Stall for Small Businesses to Sell Goods Online in Three Weekends](https://hackernoon.com/how-i-built-a-vendor-stall-for-small-businesses-to-sell-goods-online-in-three-weekends-swep32l5)
![](https://cdn.hackernoon.com/drafts/behd32uw.png)
You can build an enterprise-grade app with low-level knowledge thanks to the myriad of robust services covering every aspect of a web product’s needs. In this article, I explore how I built an app over a couple of weekends in lockdown with not a lot of work.

### [497. This Color Tool Turns Any Image Into a Wes Anderson Fever Dream](https://hackernoon.com/this-color-tool-turns-any-image-into-a-wes-anderson-fever-dream)
![](https://cdn.hackernoon.com/images/rwA7IPj2F2NcuLHM6krzJfXXwIj1-q7139kj.png)
Ditch RGB. Use LAB to extract, apply, and fine-tune color palettes that make your images look like they belong on the big screen.

### [498. The React Virtual DOM Explained](https://hackernoon.com/the-react-virtual-dom-explained)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-0a03qfa.jpeg)
Virtual DOM Is Just A Virtual Copy Of The Actual Object That The DOM Has Created For A Specific Node And...

### [499. Exploring the Adapter Pattern in React (With an Example!)](https://hackernoon.com/exploring-the-adapter-pattern-in-react-with-an-example)
![](https://cdn.hackernoon.com/images/isRsYlyOSdTsT7TtYTbFTk5hbEv1-yda3xkd.jpeg)
How can the adapter pattern improve the readability and reusability of your React components?

### [500. Are my Component Names Too Long? Vue.js Component Naming Best Practices](https://hackernoon.com/how-to-write-shorter-component-names-in-vuejs-o04a3wtw)
![](https://cdn.hackernoon.com/images/nau3wyr.jpg)
When naming your (Vue.js) components, you might sometimes be worried that the names are getting very long. In this article, we take a closer look at how long is too long and what are the most important best practices when it comes to naming your components.