318 Stories To Learn About Reactjs

Let's learn about via these 318 free stories. They are ordered by most time reading created on HackerNoon. Visit the to find the most read stories about any technology. Reactjs /Learn Repo Reteaching people basic web skills since 2013. 1. How to Fetch Data From an API in React.js Without any doubt, the use of React is increasing day by day. And also API(Application Programming Interface) is gaining more popularity in the modern era of technology. This article will guide a beginner to play with React to API. 2. Why You Must Use Next.js to Get the Benefits of React 3. 4 Reasons Why React JS Has Taken Over the Front End Web Development 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. 4. How to Handle REST API Requests in React 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. 5. React useRef Hook Explained with Examples 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: 6. React Native eCommerce Templates - 2019 Edition [My Top 5 Picks] Establishing online store, e-commerce websites and applications have been a growing trend in the modern world. Due to the utmost feasibility and efficiency of customer attraction from digital or online marketing, online stores and e-commerce sites are growing rapidly. In the near future, there is a high possibility that every real-world store will set up its own on online store application or website. There is speedy growth of published e-commerce application in app stores. Mobile e-commerce application has been a growing trend nowadays. As more customers switch from PC to mobile platforms, pretty much any online store needs to have its own mobile application. This is where the React Native eCommerce template come in extremely handy. 7. The Main Differences Between Angular, React, and Vue Gathered review of the major used frameworks: Angular, React, and Vue. We compared them by the most crucial criteria for deciding on one of them for a project. 8. ✨ Introducing react-cool-img: An easy way to optimize images react-cool-img is a lightweight but powerful React.js image component, which helps you handle image UX (user experience) and performance as a professional guy 🤓. It empowers the standard img tag by many cool features without breaking your original development experience. Ideally, it can be an img tag replacement for your React.js project. 9. Top 9 Tips to Improve React Performance 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. 10. 7 Best UI Components Libraries and Frameworks for React.js in 2022 Here, we'll cover the best UI components libraries and frameworks for React.js that you can follow and utilize in 2022. 11. How to Retrieve Player Stats from the NHL's undocumented REST API It's that time of year again. Summer is coming to an end, Autumn is around the corner, and the NHL season is about to begin. 12. How to Fetch Data from APIs Using useEffect React Hook In this article, we will take a look at useEffect React hook to fetch data from an API. We will create a sample React application to pull data from the provider and use it in our application. 13. Next.js Website Boilerplate Check out this website boilerplate built on Next.js and Cosmic JS. It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search. 14. React Progressive with Lazy-Loading Images [A How-To Guide] npm i react-progressive-graceful-imageSupports features like Custom Image Placeholder/Loader Component, srcset, lazy Loading, Graceful Loading, Progressive Image Loading.Use of Intersection Observer and navigator.onLine (Better performance and Optimization) 15. How to Use i18nexus with your React App for Scalable and Automated Localization We’re going to take a look at localizing a React app with react-i18next and i18nexus. i18next is one of the most popular JavaScript localization libraries around, but its power is truly unleashed when used with i18nexus and its awesome API for scalable translation management and Google Translate automation. 16. How to Deploy a React Application With Firebase Hosting In this blog, I am going to discuss how we can deploy react applications within a few minutes by using Firebase. 17. 7 React Admin Dashboard Templates For Your Next Project 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. 18. How to Create Different Gradient Backgrounds in React Native Application Gradients bring out a colorful taste in our apps. So it’s important to know how and when to use them in your mobile apps. In React Native, gradients are extremely easy to integrate and in this article we are going to describe exactly how to implement them. There are mainly two types of linear gradients in React Native and CSS: Linear and Radial gradient 19. How to Build Real-time Voice Search on React Introduction 20. Create your React.js Address Autocomplete Component in 10 minutes ⏰ Hi guys, I want to introduce use-places-autocomplete. It's a React.js hook for Google Maps Places Autocomplete. With it you can build your own places autocomplete UI like the following demo easily! Hope you guys 👍🏻 it. 21. How to Add React.js to Laravel How to add ReactJS to your Laravel project 22. An Important Lesson About React Hooks The react hooks are regular functions. 23. 3 Most Common Ways to Connect your Node and React Applications There are different ways to connect react frontend and NodeJS backend. In this blog, I am going to tell you three ways how you can connect backend and frontend. 24. TemplatesKart: Is this the Best Chakra UI Component Library? Responsive chakra ui components, templates and projects. Production-ready hand crafted chakra Components and templates. Deliver your projects faster. 25. Replacing ‘componentWillReceiveProps’ with ‘getDerivedStateFromProps’ With the release of React 16.3, some new lifecycle methods have been introduced, and release of React 17 will deprecate some lifecycle method. 26. "If You Have a Goal, You Can Reach it" Nominee Nominee Yan Tsishko Yan Tsishko is a chief software engineer at Oxagile. He believes Javascript/TypeScript is the most exciting technology & that frontend is the future of tech. 27. I Created an Alternative to React's useEffect Hook Two custom hooks as an alternative for componentDidMount() and componentDidUpdate() React lifecycle method. 28. How to Add NSLocationAlwaysUsageDescription Key to Info.plist File in Your iOS App 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. 29. Creating Context in ReactJS Using TypeScript A react context is meant to be used in more than one component or custom hook. Enforce typings in your context to ensure a better quality code 30. Introducing the at() Method for JavaScript Arrays This article is about latest ecma script or ES22 update of at() method of array. at() method of array is used for getting the value based on index 31. How to Use react-router-native-animate-stack Module React Router Native v5 with your desired customisation transition style! 32. Internationalization in CSS Internationalization In CSS Prepare your designs for an international audience. 33. Execute Multiple Commands On Parallel Terminal Tabs With A Simple Bash/Apple Script Are you frustrated to run same scripts again & again before resuming your work?? Here is a simple solution to automate starting those scripts before you start. 34. How to Make the Floating Balloons 🎈Effect in ReactJS Create custom floating balloons in ReactJS/NextJS. Supports balloon pop animation and sound. Custom count, msg, loop, multiple colors, and more. 35. How does your code sound? As a developer, I love listening to music while coding. The orchestral music allows me to focus more on what I do. And one day I noticed my fingers dance on the keyboard by the music rhythm. Like playing the piano. Every word or symbol in the code was written with harmony. And then I thought... how it could sound... The code I write every day? 36. Why Do You Love Frontend Development in ReactJS? [Writing Prompt] Here are some writing prompts on web development using React. 37. What Software Development Stack to Build on in 2022? It’s impossible for teams to make the most out of their development effort without the right tools. Here is the best software development stack for 2022. 38. My Top 5 Best Practices for ReactJs Howdy people, In this article we will be discussing the 5 best ReactJs practices that will help you simplify the building of great and high-performance ... 39. Gatsby.js vs. Next.js: The Best React Framework and Its Use Cases Gatsby.js vs. Next.js: Gatsby.js is better for static websites, while Next.js is better for dynamic or hybrid multi-user websites. 40. Using Next.js to Effectively Format a Page and Structure Its SEO Organizing your Next.js application and using its components. 41. How to Lazy Load React Components with an Intersection Observer Learn how to improve the performance of your application by lazy loading react components using the intersection observers 42. How Deemples CEO David Wong built the largest golf app in Malaysia Deemples was nominated as one of the best startups in Kuala Lumpur in Startups of the Year hosted by HackerNoon. Here's an interview with its CEO. 43. How to Create a Custom State Management Library With React Hooks and Context API In this article, I will introduce the React Context API for state management and create a similar solution as Redux without using a third-party library. 44. Implementing Password Validation in React With HTML5 Let's implement the Password component in React, supporting 5 validation rules. 45. How to Create a Simple Object Detector with NextJs A simple tutorial for beginners to create an object detector with NextJs. 46. Cleanup Functions in React’s UseEffect Hook — Explained with examples Cleanup functions in React’s useEffect hook allow us to stop side effects that no longer need to be executed in the component. 47. Embedding Phaser3 Games into React 18 Function Components with useEffects At its simplest implementation, you can use this pattern to add Phaser3 Games and treat them like a GIF animation on steroids. 48. An Intro to Container-Presenter Design Patterns in React 49. Building a Sidebar in React with a Higher-Order Component In this article, I explore one of the use cases of React's higher-order component. 50. Web Development Is Still The Wild Wild West in 2023 Web development is still (thankfully) a frontier, where there is little to no official regulation, certification or oversight. Will it always be the wild west? 51. How to use componentWillMount with Functional Components in React Functional components are far more efficient than class based components. Less code is needed to be written to achieve the same goal. 52. Step by Step Guide to Create 3 Different Types of Loading Screens in React Here I will show you 3 ways to create cool loading screen or preloader in React. 53. 7 Advantages of ReactJS Development ReactJS is an open-source JavaScript package that is used to create rich and interactive user interfaces. 54. 10 Best Practices for Every React Developer React Best Practices, How to get the most out of React library and what steps you should take.React is one of the most popular front-end libraries for JS 55. React Hooks In Depth Part #1: Introduction 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. 56. Checkers on React - Part 6 - Player It’s time to add Players and the ability to change the current player on every next turn. 57. Learn the Fundamentals of React JS: A Guide for Beginners This guide explains the basic fundamentals of ReactJS such as how it works with JavaScript which many beginners may find helpful as they learn the language. 58. How to Develop a Progressive Web App with React This article will show you how to develop progressive web app with react. You can follow the steps and create an offline-first application that works across mul 59. Thrilled to be Recognized as the 2021 HackerNoon Contributor of the Year - React How does it feel to be a winner of Noonies 2021 as the React.js Contributor? Fantastic. Read how we intend to keep the title, our goals for 2022, and more. 60. Custom Hook in React for calling API — useApi What is a React custom hook and how to build one to fetch data 61. Axios or Fetch: What Is Better for HTTP Requests? 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? 62. Quick Tips For Migrating from JavaScript to TypeScript Some useful tips to keep in mind when migrating your JavaScript project to TypeScript 63. How I Made a YouTube Video With React 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! 64. Qwik vs Next.js: Speed Comparison A benchmark comparison and analysis between Qwik and Next.js 13. 65. React Context API login example using FaceIO for face authentication. React.js, typescript tutorial showing how to add facial recognition to a website using FaceIO. 66. The Lessons We Learned From Moving to Recoil.js 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 67. React State vs Props: Understanding the Difference 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. 68. How to Render 3D Model in a React JS Application 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. 69. How to Build a GatsbyJS Blog (Part 3): The Blog and Post Pages In part three of our "Building a Gatsby Blog" series, we delve into the blog itself and create the list and post pages. 70. I spent all summer building a Chrome extension - Here's What I Built This summer, I set off to build a productivity-based browser and ended up building a Chrome extension. Here’s how the process yielded a product that, while smaller than I initially wanted it to be, set me on the best path possible for future success: 71. Implementing Social Login for a React and Backend App 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 72. 14 GitHub Repositories to Ace JavaScript Interviews 🎯 🚀 Finding a developer job in the current tech market can be a challenge, especially for beginners. 73. Tail-kit Introduction: 200+ Free Tailwind CSS Components And Templates Free and open source Tailwind css 2.0 components and templates KIT for React, vueJS and Angular. 74. Building a Login Screen With React and Bootstrap Build an elegant login screen super fast using React and Bootstrap 75. React and the useRef Hook Using React refs in reactjs. 76. Why Vite is Better Than Create-React-App (CRA) 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 77. GatsbyJS: Everything to Know About This React-Based Static Site Generator 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. 78. React vs Angular: Choosing the Best Option for Front-end Development React.js and Angular are equally good at building web-based applications. Some of the world projects are built with React.js. 79. A Very Early Introduction to Building your Own Web App With Code Here is a brief guide to getting started with coding and building your website online. 80. Autocomplete Search Component With React and TypeScript Autocomplete Search Component With React and TypeScript 81. Next.js and File Downloads: Three Ways to Restrict Access to a File Let's see exactly how we can protect files in next.js and allow certain users only to download them. Click to read the article... 82. How to Build a GatsbyJS Blog (Part 4): Layout and Featured Images In part 4 of our "Building a Gatsby Blog" series, we will promote engagement and design cohesion by adding images to our pages and blog posts. 83. How to Install and Use React Image Upload 84. React vs Angular: Final Thoughts React versus Angular when learning a new framework, which should you use? 85. React + Express + Typescript Boilerplate with Performance and Extended Functionality Why Another Boilerplate 86. ReactJS Continuous Deployment to Firebase Hosting using Circle CI Doing the same thing is very bored. On this topic, the boring part is deploying our Web Application to Firebase Hosting. The steps that we do are: 87. 10 Best React Native Chart Libraries Representing statistical data in plain text or paragraphs, tables are pretty boring in my opinion. What about you? 88. An Overview of Next.js Router These tips and tricks for you on the Next.js router help you make your DX better and code cleaner 89. NPM ReactJS package for Microsoft Immersive Reader Immersive Reader is an Azure Cognitive Service for developers who want to embed inclusive capabilities into their apps for enhancing text reading and comprehension for users regardless of age or ability. Students can color code and label words to indicate their part of speech, user read the text aloud feature, translate words and more. 90. The 4 Main Principles of React That Made It So Popular React is popular for a reason. It offers not only a solid paradigm of programming but also makes code much more maintainable. 91. The Biggest Features in ES2020/ES2021 ES2020/ES2021, New ES2020/ES2021 features you might have missed 92. Creating Highly-Performant Animations using Web Animations API and React hooks Using Web Animations API (a.k.a WAAPI) in the React hook way. Let's create highly-performant, flexible and manipulable web animations in the modern world. Hope you guys 👍🏻 it! 93. How To Send Emails with Nodejs and EmailJS Module 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. 94. Using the Shadow DOM to Isolate Styles on a DOM That Is Not Yours Shadow DOM is perfect for when you need to embed a widget in a DOM you don't own or have access to. Here's how to use it. 95. React 18 Suspense fetch data from a headless CMS React 18 Suspense fetch data from a headless CMS 96. How to Build a GatsbyJS Blog (Part 2): Layout and Pages In the second part of the "Building a GatsbyJS Blog" series, we will create a page layout and scaffold the main pages of the blog. 97. Authentication in React with Firebase 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. 98. 3 Practical Tasks for Your Next React Interview Here are 3 React tasks to check your coding skills, way of thinking, and ability to create good understandable code. 99. Learning ReactJS From Scratch 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. 100. How to Use GraphQL with the Remix Framework 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! 101. Benefits of React-Native for Cross-Platform App Development Did you know react native is the fifth most used frameworks among developers worldwide as of 2019 beginning? It has become a popular programming tool in the mobile app development industry since its launch in 2015, as per Statista. 102. Protecting Your React.js Source Code with Jscrambler 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. 103. How to Upload an Image From React to the Rails API Using React-hook-form and Context API After reading this article, you should be able to create a React UI that allows you to use react-hook-form to upload an image to an API endpoint. 104. How To Implement The Prefetch Pattern in React Concurrent Mode 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. 105. What's The Right Way to Fetch Data in React Hooks? [A Deep Dive] 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. 106. Deploy React Application to Kubernetes Cluster on Google Cloud Platform Congratulations to all who made it this far in the ALCwithGoogle program. 107. Package Your React App with Spring Boot [A How-To Guide] 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. 108. How to Build a Hamburger Menu in ReactJS via Styled-Components Build Hamburger Menu in ReactJS. Using this method you can create different types of Hamburger Menu. How to build Hamburger Menu? 109. 5 Most Popular React UI Component Libraries According to Stack Overflow Developers Survey 2020, ReactJS was voted as the most loved and wanted Javascript web framework. 110. Is There a High Demand for React Programmers? 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? 111. Localizing your React App with LinguiJS and Localazy Do you have an app that you use and you want to localize it? Localizing is very important to ensure that all people can use your app with ease. With Localazy and LinguiJS you can achieve it easily (and for free)! 112. ReactJS Custom Modal Component using Hooks and Portals Create reusable modal component in react js using hooks and portals. Using this modal you can render content dynamically with cool animation. 113. React Functional Components are the future React Functional Components grabbed all the attention after the introduction of Hooks. They sidelined Class Components to become the main hero of React apps. 114. How I build Coronavirus Tracking Application What is Coronavirus (COVID-19)? Coronavirus (COVID-19) which is an infectious disease caused by respiratory illness and symptoms like flu, cough, fever, difficulty breathing, on December 31, 2019, the first case was recorded in Wuhan, China and later the virus got spread around the world and as of now, around 1 million+ confirmed cases are being recorded since then. You can protect yourself from this virus by following basic precautions like washing your hand frequently, avoid touching your face, maintaining a distance of (1 meter or 3 feet) between people and most importantly if you are sick then immediately call for medical help at your nearest hospital. 115. MomentJS Tutorial -The Ultimate Guide to Moment.JS Moment.js tutorial shows how to work with data and time in JavaScript with the Moment.js module. 116. A Closer Look at Theme Redone - a WordPress Theme Theme Redone is the new WordPress framework for creating custom WordPress Gutenberg websites by WebRedone. 117. A Glance Into Amplication: Easy NodeJS App Development According to the Amplication website's introduction, it's a tool for creating the structure you want in NodeJS apps. 118. 4 reasons to use React in your next Frontend Project With all its stardom and technical excellence, React will remain the superstar of web app development. However, one of the most significant aspects of using Rea 119. Creating Real-Time Chat App using React And Socket.io with E2E Encryption Link link: Here is the example of the chat app we are going to build ✌. 120. Three Main Components of JavaScript JavaScript is certainly one of those programming languages which you can get started within a few hours due to its simple syntax, but would probably take you years to master it. 121. How To Build A Web3 e-Commerce Platform with React and Solidity: (PART II) Now let’s build the frontend for interacting with it as you can see above. Not much talking, let’s get coding… We’ll begin by installing the rest of the depend 122. JS Community Reacts to George Floyd’s Death The killing by Minnesota police of George Floyd grabbed the media's attention recently. Nobody can be indifferent to this heinous crime, and the JS community has also reacted to the incident. 123. Loading Components Conditionally on Mobiles, Tablets and Desktop in ReactJS Sometimes we are given a screen or PSD which have different layouts for mobile and desktop or for that matter even tablets and we need to render the layout with respect to device resolution. We know that we have been doing this from ages using media queries in CSS, but when it comes to ReactJS just hiding the element won’t do better. Because the components are still getting initialized, the lifecycle methods are getting invoked, rendering/re-rendering is not stopping and what not. Below is the example to demonstrate this, although its quite obvious but just to make a point. 124. Scalable Folder Structure in ReactJS Scalable folder structure plays a big role in project maintenance. We need an intuitive folder structure which other developers in the team will find it easy to locate and easy to relate, I call it as ELER. 125. Along Came HERN Stack The HERN stack stands for HarperDB, Express, React, and Node, the four technologies that make up this particular stack, and they’re all written using JavaScript 126. How to Handle REST API Requests in React 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. [127. How To Improve React App Performance with SSR and Rust [Part I: SSR]](https://hackernoon.com/how-to-improve-react-app-performance-with-ssr-and-rust-part-i-ssr-b75x36ed) Server-side rendering (SSR) is technique when content for a web page is rendered on the server using JavaScript. 128. Supercharge Your SEO Game: Powered By getStaticProps This is mainly useful for websites that use React/NextJS with a CMS (Content Management System) integration. No matter, whether it's WordPress, Contentful, Prismic or any other CMS. This concept is highly relevant for companies that require non-engineers to update the content easily. Whether, it's a change in the content, A/B testing or conversion-rate-optimization related. There are many reasons why the content of a website gets updated quite often throughout the year. 129. How to Build a GatsbyJS Blog (Part 1): Creating the Project GatsbyJS is a fantastic framework to use when creating your blog. In this series of posts we will work together to create a blog from scratch! 130. How to Build an Airbnb clone with React and ElasticSearch 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. 131. The React Developer RoadMap An illustrated guide to becoming a Read JS Developer with links to relevant courses 132. Magic of React Suspense with concurrent react and React.lazy API (Magical land of React Suspense, Concurrent React and React.lazy API) 133. How To Create Forms in React Just like we use Forms in HTML, we can use the same thing to React. It’s quite different from other DOM elements but not too complex. 134. Building an uNFT Marketplace Using Next.js, Cosmic and Stripe Build a uNFT marketplace using React.js Next.js Cosmic CMS and Stripe. You could build your own projects using these powerful tools 135. 7 Top UI Component Libraries and Frameworks: ReactJS in 2022 Check out the Best 7 UI components libraries and frameworks of the popular JS framework ReactJS you should follow in 2022 to build an application with better UI 136. Share Code between React and React Native Apps 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. 137. How to Avoid React Anti-Patterns by Weaning Off Bad Programming Habits Let's consider some examples of React anti-patterns which avoidance will help you ensure the top-notch quality of your front-end development. 138. The Quick and Dirty Guide to Testing React Hooks that use RxJS RxJs is cool when you work with complex async operations. RxJS is designed for reactive programming using Observables. It converts your async operations to Observables. With observables we can "watch" the data stream, passively listening for an event. 139. Creating a Terminal Emulator in React How to create a terminal emulator in React and Typescript 140. A Guide to Running Ganache in a Browser Learn how to run a local blockchain instance in your browser to test the functionality of your web3 dapps using Ganache, Truffle and a simple React frontend. 141. How to Integrate an Image CDN in Your React Application 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. 142. How to Build an Answer-to-Earn Platform with React, Solidity and CometChat This tutorial combines blockchain technology, real-time communication, and user-generated content to create an interactive platform that rewards users for their 143. Short: The React Virtual DOM Short refresher about the Virtual DOM used in React. What are the differences between the browser DOM and the virtual DOM? 144. React Hooks 101: useState and useEffect 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. 145. The Headless-UI Date Picker for React Apps Each year the ⚛️ React community is becoming bigger and bigger. And with this growth, we get more and more tools to achieve our goals and needs. 146. 'DappBnB' — How to Create a Web3 Equivalent of AirBnB Using React, Solidity, and CometChat Are you looking to create a cutting-edge platform that leverages the power of web3 to transform the way people book and share accommodations? 147. Hemingway's Lessons on Building Reusable React Components What can we learn about coding and creating reusable components with react from one of the greatest novelists ever? 148. MUI (Material-UI) Releases v5 of its Core React Components MUI (Material-UI) releases v5 of its core React components - brings advanced styling and customization features, new components, and more. 149. Setting Up Google Analytics 4 in a Next.js Project Google Analytics is a web analytics service that tracks and reports several types of website traffic. 150. Philosophies I Learnt From 3 Different React Folder Structures This article talks about the journey I have about react folder structure and the philosophies I think are important. 151. Implement Password Validation With Strength Meter From Scratch With React Hooks 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. 152. Unravelling The Suspense About Render-As-You-Fetch In React Render-as-you-fetch is the latest data fetching pattern in React. It leverages the React Suspense capabilities to provide a smooth developer & user experience. 153. Noonies Nominee Alex Cloudstar on His Love for JavaScript Alex Cloudstar has been nominated for a 2021 Noonies award for his work on React and Typescript. 154. Creating a Custom Hook for Fetching Asynchronus Data: useAsync Hook with Cache We can create a custom hook that will be used to handle all asynchronous data fetching and updating the state updating. 155. How to Build a React Chat App this tutorial walks through the process of building a react chat application using the MinChat chat sdk and React.js . 156. A Beginner's Guide to Performance Optimization Using React.memo() React.memo is a higher-order component provided by React that will return a memoized version of the component that only changes if one of the props has changed. It is the same as PureComponent but instead of classes React.memo is used for functional components. 157. Hiding Your API Credentials Client Side Using a Proxy Server in React 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. 158. Build a Toast Message Component via React and Styled Components with Ease Toast Notifications are yet another way to provide feedback to the user. They usually contain brief messages and sometimes get accompanied by CTAs as well. 159. JavaScript Closures Explained to Kids How to explain JavaScript Closure to a 5 years old kid 160. How to Create a Modern Skeleton Loader in React to Improve User Experience Improve user experience with a skeleton loader in React. Mimic page layout with placeholder boxes for text and images while actual content loads. 161. How to Add an Announcement Banner to your React Navbar 162. Reactime, Time Traveling State Debugger: Now Supporting Concurrent Mode, Routers, and more Chrome dev tool for tracking and visualizing state changes in React applications 163. React useRef, forwardRef and Some Problems you May Run Into Working With Them 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. 164. Implement Form Validation in React Without Any Libraries You don’t need a fancy library when you have HTML5 and Constraint API to implement Form Validation and Submission in React. 165. An Essential Guide to Feature Toggles Using Next.JS and React This post will show you how to build the Feature Toggle mechanism in your Next.JS application. We are going to use Next.JS, React, and TypeScript 166. Utilize The Power of NFTs On Your Website Utilize The Power of NFTs On Your Website 167. 4 Tips & Tricks That Will Make Your ReactJS Code More Clear and Reliable 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. 168. ReactJS: An Overview of Class Components and Functional Components with Hooks Hello Readers, CoolMonkTechie heartily welcomes you in this article. 169. How We Created Custom React Components for Any Front End We created a lightweight solution using React that has a global state and runs independently in the background. 170. Higher Order Components (HOC) In React: Beginners Guide 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. 171. How I Cloned a Simple VSCode Using Tauri and ReactJS How I built a simple code editor like VScode using Tauri and Reactjs 172. A Class on why classNames are Used in React but not Preact If you use JSX inside React you can't use standard HTML properties, like class. You have to camelCase HTML properties. But it's not the case with Preact! 173. Getting started with React Native for Windows & macOS 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. 174. The Component Life Cycles of ReactJS Every component in React goes through a lifecycle of events. You can think is of going through a cycle of birth, growth, and death the same as the picture below. 175. Custom React Hook For Tracking Clicks Outside of the Component 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 176. How to Build a Github User Finder App With Next.js & Tailwind CSS In this project, we are going to build GitHub user Search App using Github API. We will design the UI of the app using Tailwind CSS with Next.js as a framework. 177. The Results Are In: How Did React Perform in 2019? A fight that started years ago - fight for the crown of the most popular JavaScript framework, was intense in 2019. Furious opponents of the React weren’t sleeping during the year. Probably no one will argue that the three frameworks that were constantly “fighting”, were Vue.js, React and Angular. 178. How to Use InertiaJS to Build a Single Page Application Without an API InertiaJS is a routing library written in Javascript that lets you build single-page applications without using an API in the process, saving lots of time. 179. Should You Add React to Existing Projects Or Websites? React is the most popular JavaScript framework on the planet. You can use it to quickly create feature-rich web applications. 180. Your Guide To Learning Redux What is Redux : A beginners guide. Redux is very important if you're using state in your web app. Especially if you're React Developer then you must learn Redux 181. Why You Should be Learning about the Remix Framework 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. 182. "Code over a tile"// React - from sass files to Styled-Components. [PART II] In Part I we saw how to move from sass to a Styled Component for a simple component. So this tutorial assume that you have already installed the styled component made your first try with it. Now we are going to increase the complexity of our controls in the chat app moving to styled components the messages in the chat window. 183. Five Days into Vue.JS: My First Five(5) Takeaways Getting Started with VueJS from ReactJS background, Learning Vue, Vue Fundamentals, My takeaway from VueJS in a Wee 184. How to Use React.JS in a Secure Way It’s easier to find a remedy and defend against the known enemy if you know the most prevalent React vulnerabilities. 185. The First Dedicated IDE for React Web Applications - ReacTide 3.0 Beta is Finally Here In addition to the teams behind Netflix, eBay, Airbnb, Dropbox, Instagram, and Facebook, there are currently over 1.3 million websites and applications built on React, making it one of the most powerful and ubiquitous frameworks of all time. 186. 5 Tips for a Novice React Developer There's a lot to learn when you're a new React Developer. These 5 Intro Tips will help you avoid simple mistakes many new developers make when starting out. 187. Component-based Website Development with React and the Cosmic JS CMS A common approach to website development is to build components that can be reused across different web pages. The benefit to this approach is that you end up doing less duplicate work by managing the components rather than managing duplicate content across different pages. Popular JavaScript frameworks like React, Vue and Angular utilize this concept on the application code level to much success. How can we benefit from this approach on the content management level? 188. 5 Reasons to Convert from React to Next.js 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. 189. How to Deploy a React App to Heroku in 5 Minutes in 5 Easy Steps Deployment of a React app on Heroku is a way of hosting an application on a server, and the server provides everything to keep the app live on the internet 190. Reducing the Pain of Big Numbers, and Introducing W3bNumber. Dealing with bignumbers in a dApp UI can be hard. This article serves as a big-number primer, and introduces W3bNumbers to help display them effectively. 191. Build a Fully Functional Youtube Clone Using Firebase, FFmpeg, And React. Part 1 An exact clone of youtube with all functionalities from View count to Subscribe to everything (Without Youtube Api) Using Firebase, FFmpeg, And React 192. How to Take Full Advantage of useEffect in React Optimizing useEffect in React gives you a significant boost in performance and sometimes gets your code rid of nasty bugs. 193. React Hooks: The Difference Between useMemo and useCallback 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. 194. How to Write End-to-End Tests for a React application with Cypress End to end testing is one of the testing methodologies which is supposed to check whether if an application works as expected or not, by testing the so called user flow. 195. How To Build Great React Components Easily And Effortlessly React is such a powerful library, that everyone with knowledge of the basics can build a really good application. Managing state in react is built out of the box with React own state management APIs. 196. Portals are lit 🔥 Recently I was introduced to Reacts' createPortal API, which was nothing short of amazing. 197. Who said SOLID is applicable only in OO languages? Here's how you can do it in Javascript! SOLID is five design principles intended to make software designs more understandable, flexible, and maintainable. It helps us to think about the right way to build a software system 198. How We Won Facebook Developer’s Circle Community Challenge 2019 [India Chapter] It was around August 2019 when my friends and I attended our first Facebook Developer’s Circle Build Day in Chennai. We were third-year computer science undergraduates at Sri Sivasubramaniya Nadar College of Engineering (SSN), absolutely addicted to hackathons and building cool things that made a difference. 199. Micro-Frontends in 2023: The Complete Guide The Micro Frontend style of architecture design does for the frontend of an application what microservices do for the backend. 200. Connecting Algolia to Cosmic JS for Awesome Search Functionality Using Cosmic JS’s Webhooks, we can sync Algolia with Cosmic JS to provide fast and powerful search functionality to our projects. 201. Top 3 React UI Component & Asset Libraries in 2021 I’m going to condense down years of trial and error and give you my top three React libraries to help you make beautiful websites and apps. 202. 7 Best Free Platforms To Learn React 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. 203. Rethinking Components with React Hooks React Hooks have been around since React 16.8 and remain as popular and in demand as ever. They have introduced a completely new way of handling components in React, which may lead you to reevaluate your approach to coding on a fundamental level. Having already been established as the most beloved front-end framework according to Stackoverflow popularity polls, React went above and beyond with the introduction of Hooks. 204. Homebrew - Explained in Simple English So, there are tonnes of jargon, commands, processes that we follow blindly after surfing from the internet without knowing the actual reasons and under the hood processes, that just remain in our short term memory and get purged eventually, thus we don't feel comfortable using or even about discussing in a group about them. 205. How to Manage Reusable UI Components Just a few days ago we open-sourced the React components we use to build the bit.dev platform. 206. Create a Scalable ReactJs Web App in 10 minutes- for beginners 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. 207. Writing CASL React Abilities in a JSON File With a Laravel Artisan Command When writing a single page application or SPA you might inadvertently end up duplicating code because at the early stage of any project it is quite common to ask yourself so many questions. 208. Handling Readable React Content States Content streams are crucial in React projects but decrease maintainability. This article covers the readability of 2 ways to handling content states in React. 209. Webiny v5 Update: DynamoDB, VPC Support, and Performance Improvements In the last 6 months, we put 100% of our focus on addressing this feedback and getting Webiny to the next level. Today we present the Webiny v5 release. 210. Creating a Todo App with NextJs & Firebase Hey devs, welcome to this tutorial; we will build a real-time Todo App with React, NextJs + Firebase. 211. Automatic Image Optimization: Next.js 10 New Standards for 2020 Vercel has recently announced the latest version of its React-based web framework- Next.js 10. 212. An Overview of the Most Popular JS Frameworks for 2020 JAVASCRIPT'S RICH AND FUNCTIONAL WORLD 213. How to Publish React Components from any App In this tutorial, I'll demonstrate how to publish React components from any application to Bit's registry. Components will be published as independent packages that later could be installed using NPM, Yarn or Bit. 214. Protect Your Application by Hiding API Keys and Tokens in React Discover how to hide your API keys and tokens in React using environment variables with Vite and nodejs. Protect the security of your services. 215. How to Deploy React JS Applications for Free on Firebase In this article , I’ll take you through all the steps involved in deploying a your React app on firebase. 216. 20 JavaScript Libraries Every Programmer Should Know A JavaScript library is a library of pre-written JavaScript that allows for easier development of JavaScript-based applications 217. My First React App, markView: An Interactive Markdown Previewer Here is mine documentation for markView: Interactive Markdown Previewer, my first React app. 218. How I Built an API to Verify Claims of Feat I'm breaking down the process of building an API to verify claims. A few weeks ago, I started working on a project that I submitted to the Lisk Builder Program. 219. React Internals: Basic Concepts and Notes An introductory lesson to React internals based on React Fiber. 220. Authentication: Create a Simple Rick and Morty Wiki Page Authentication is the most important part of any application. Learn more about it! 221. Having (More) Fun Creating Components with the Lightning Design System for React Check out how easy it is to create a custom component using the Lightning Design System for React and some very detailed blueprints 222. How Javascript Was Created and Why The History Behind It Is Important Having a humble beginning of starting as a language that was intended to handle browser validations to a full-blown programming language that powers a lot of desktop applications as well, JavaScript has traveled a long journey. 223. Deconstructing React 18 React 18 is a major improvement to React’s rendering mechanisms. It focused on improved performance of user interfaces for a much better experience for the user 224. IKODIX Helps to Create Admin Panel Fullstack Apps for Your Databases IKODIX is an online code generator for admin panel full-stack applications for any relational database. 225. What is ECMAScript and How is it Different From JavaScript? Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing. 226. Cats Taking Over: How to Make a Random Cat Image Generator With React and Cat API 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: 227. How to start with Create React App? Due to the numerous build tools, configuration files, and dependencies, developers frequently find it challenging to create React apps. React JavaScript library, which is a creation of Facebook, functions as a tool for designing user interface components. 228. Connecting React 17, TypeScript, Tailwind CSS, NextJS Into Developers Friendly Application 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. 229. I'm 15 and Here's How I Made a 😴 Bedtime Calculator with React JS Ever wake up feeling groggy, even though you thought you had enough sleep? It turns out that by timing your wake up time based on REM cycles, you can wake up more refreshed and more productive. 230. 4 Reasons Why You Should Use Gatsby JS for Your Website Gatsby JS is a static site generator that is used to create high performance websites. Built on top of React, it weaves together some of the better parts of GraphQL, react-router and webpack for a brilliant developer experience. This means a much faster site, taking a lot less time to build! Perfect for users, business and developers. 231. A Detailed Guide to the useEffect Hook in React A complete guide for using React's useEffect hook 232. Higher Order Components (HoCs) in React Higher Order Components are actually a design pattern derived from the compositional nature of React, which allows us to derive components... 233. How a Beginner Created and Deployed a WebApp in 4 Days How I created and deployed a WebApp in 4 days after learning to code. 234. Debug Your React App, But Don't Die Trying: A How-To Guide Debugging is a daily part of every developer's life. I usually go through a process when I encounter a bug that helps me move pretty quickly through issues. 235. What is 'this’ in JavaScript? ‘this’ is always been a pain in the a** for many JavaScript developers, but it’s time to say ‘I got this’. 236. Beginners Guider To React Router Today I decided to write about the props history, match, and location that are included in each component that uses React Router. But first, to start warming up here is a simple definition of React Router: 237. 10 React Admin Dashboard Templates For Your Next Website React is one of the most popular tools found in the web development library, but like anything you need to learn how to use it properly. React is used with native. The main purpose is to bring the power to react to native mobile app development. 238. Nullish Coalescing and Optional Chaining Operators Nullish Coalescing operator ( ?? ) 239. Optimize Props References and Improve Rendering in React Native Rendering is the process of React asking your Components to describe what the section UI looks like, on the current combination of Props and State. 240. How To Create Your React Application From Scratch In this article, you are going to build your first React application. React is the most popular front-end framework and it’s for good reasons. One reason is that React will only update the parts of your website that got changed. 241. Announcing Redux-Ruleset NPM Module Managing data-flows can be quite tricky in javascript. A pattern that really fascinated me over the last years is the flux architecture from facebook. Especially the redux implementation. But redux just tells you how to store your data and how to update the state. It’s really liberal in how to manage data-flows. So really awesome data-flow middleware libs where born like redux-saga and redux-observable. 242. Implement Authentication & Security Using SuperTokens in Your React and HarperDB App 243. Flutter vs. React Native: What App Developers Should Know About Cross-Platform Mobile Development Bringing a spirit of novelty in the mobile development industry just recently, hybrid app development has become one of the most popular and fast-growing trends today. Now, it is considered as one of the most effective choices by many app developers and business owners. 244. Website Builder Tool Quarkly Goes Into Open Beta My name is Alex, and I’m a co-founder and lead developer at Quarkly.io. Quarkly is a project made by our small team of designers and developers, aimed at helping similar teams. Our goal with Quarkly is to make the life and workflow of designer-developer pairs easier, allowing them to work both independently and collaboratively, all in one environment. 245. 6 JavaScript Courses To Land Your Next High Paying Job 246. How to Build a Newsletter Application with Email Automation via ReactJS and Firebase NB: I saw I had this tutorial in my draft for close to 2 years now, I just decided to post it. 247. Migrating a 50K SLOC Flow + React Native app to TypeScript Photo by Sergey Pesterev on Unsplash 248. A Beginner's Guide To Using React Native Camera 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. 249. The Seven Best Admin Templates And Themes in React 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 250. React Introduction React happens to be the most popular JavaScript framework sourced from Stack Overflow Developer Survey (2020). It is the best alternative to two other popular JavaScript frameworks, Angular and Vue. They all allow you to create fast apps in the browser. 251. Discover Why These 5 Libraries are Perfect for Your Next ReactJS Project In this post, we will discuss 5 Reactjs libraries you can use in your next project. 252. Top 15 Ideas for React Apps that Web Devs Can Build in 2022 Choose one of these React project ideas and build your next React application in 2022! 253. On Recursion and Trampolining Did you know that recursion can be optimized using a concept which works similar to the way how we jump on a trampoline. 254. How to Use Reactjs to Create a Twitter “What’s Happening” Bar Form Creating a Twitter What's Happening Bar Form in Reactjs including common actions such as: upload images, videos, gifs, and more. 255. How React Testing Library Can Improve Your Mental Health [Part 1] I know one person who likes writing tests, and it is not me! I like adding code-coverage to my code and you'll see why. 256. How to Choose the Technology Stack for Your Web Application The right technology stack used for building a web application is a critical element of project success. The reason is pretty simple. The product creation doesn’t only imply making an outstanding user interface design and ensuring high usability. It is also about delivering a stable solution that works as intended and adds value to users. 257. How to Track User Navigation Events in a React Application A scalable and maintainable strategy for tracking page navigation events in a React application. 258. Why More Developers Should Shift to Gatsby Gatsby framework deserves you investing time to learn, this article will give you answers don’t exist elsewhere. 259. How to Bring Live-Reloading Back to a Django And React Project 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! 260. 5 JavaScript Trends To Watch Out In 2020 You think JavaScript will fade away in 2020, wait till you read this study! 261. Here's Why You Need to Use a Front-end Framework If you want to stick with using only the native web application languages, you can very well do so. However, using a front-end framework can make web... 262. React Native vs Flutter 2020: A Detailed Comparison 263. The Ugly Side of React Hooks 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. 264. Create a Podcast Player with React and AG Grid Detailed instructions on how to write a podcast player, reading RSS episode feeds and rendered in a sortable and filterable data grid. 265. React 18's Concurrent Rendering for Stress Testing: A 3D Rendering Case Study A deep dive into React 18's concurrent features and stress test it using 3D data visualization built with three.js. 266. Important Tips for Using React Query: Part 1 I’ve been using React Query in real world applications for over 8 months now, and I want to share with you some of the things I found useful when using it 267. How To Build a Table With Sticky Headers in Pure CSS While creating user interfaces, we often encounter the problem that there is more data in our tables than can be fitted in the visible viewport. To achieve an excellent user experience on components like Gannt charts, data tables and spreadsheets, we often use the sticky CSS property on the header elements. This is a simple task when doing it only on one edge of the table. 268. Tina is not a CMS - It is Much More (feat. Hot Reloading for Editors) We’re excited to announce TinaCMS: an open-source site editing toolkit for React-based sites (Gatsby and Next.js). See the announcement video at JAMstack Conf SF (the demo starts at 3:45). 269. Meet Solid: A Lightweight JavaScript UI Library that is Gaining in Popularity SolidJS uses fine-grained reactivity and avoids Virtual DOM but retains much of React's programming model with JSX, unidirectional flow, immutable interfaces... 270. ReactJS Pagination Tutorial: Building from Scratch Create pagination component from scratch in ReactJS. Pagination component are of two types, one loads items vertically and one display items with page numbers 271. Why Order in React Hooks Matters React Hooks are a new feature in React 16.8. They are a powerful way to write stateful components. All this power comes at a cost, however. 272. React, JSX, ES Module Imports And Dynamic Imports In Browser Without Using Webpack Everything described in the article is highly experimental and I am cutting corners everywhere. By no means I recommend to use any of that in production :) 273. How to Write Tests for React - Part 2 [Beginner's Guide] Writing React Test with React recommend libraries - Jest & Testing Library for React Intermediate users. 274. How to Create and Publish Your First NPM Package A Comprehensive Guide To Creating and Publishing Your First NPM Package 275. How to Write Tests for React - Part 1 [Beginner's Guide] Writing React Test with react recommended libraries — Jest & React Testing Library for complete beginners. 276. A React HOC for AWS Cognito to Simplify User Authentication TL;DR: AWS Cognito offers robust handling of user Authentication flows, including via Social Providers such as Google and Facebook. Here we describe a Higher Order Component for your ReactJS Web App, and how to configure Cognito. 277. Build Smooth Page Transitions with React and GSAP Check out what you'll be able to do here 278. Crucial React Design Patterns Every Dev Should Know Checkout the various React Design Patterns to use in building React components that are extensible and reusable for your next React project. 279. React Application Architecture: Code splitting [Part 2] In the previous part we have learned about the components and how it affects our React app architecture. 280. How To Build Cool Horizontal Scroll Interaction Flow by Using React In this tutorial, we’ll create a fun scroll animation in which items “flip” in the direction of the scroll. We’re going to use react-spring for animating and react-use-gesture to tie animation to the scroll events. The native onScroll event handler won't do in this case, because we'll need additional information about scrolling that native onScroll handler doesn't provide - scroll delta in pixels, and whether the scrolling is in progress or not. 281. Get Started Building your First MERN Application - Step by Step I am sure that when you first begin learning full-stack web development using the MERN stack, you will have questions. 282. Is React leading the Infrastructure As Code Movement? 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? 283. Component-Driven Collaboration Component-Driven Collaboration (CDC) is a way to build frontend code, as a team, by delivering code updates as meaningful independent components. CDC can be contrasted by the "traditional" way of delivering updates with no clear borders, meaning or purpose. 284. How I Got Over My Fear of Webpack And why you should too 285. The Importance Of Selecting The Right Frontend Framework Creating a new product comes with lots of ideas and requires numerous technologies. The idea of choosing the right framework matters a lot. Learn how to choose 286. The Simple React and Redux Implementation Tutorial Last month I started making some implementations of Redux in some React projects. In the beginning, it took me a while to understand how to set up everything. Because it is a little complex to set up. But it will help a lot to store the data of an app. 287. Creating a React Application to Solving Every Sudoku Puzzle Peter Norvig, the legendary Google mogul and AI titan, wrote a python essay to solve every Sudoku puzzle 10 years ago. Back then, he may not have expected that his code will inspire so many other posts and to be ported to so many different languages. For JavaScript, the latest version of the solver that I found was einaregilsson/sudoku from 2014 288. Improve Your Application Performance With React Hooks 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. 289. Powering a React + Next.js Blog With Cosmic JS TLDR; Cosmic JS provides an excellent backend for blogs. It is a fully-featured content management system (CMS) with an intuitive user interface that a non-technical client can use to manage their site content. 290. React-Redux Flow: Detailed Guide State. That’s one word behind Redux’s existence in the React framework. But wait a minute what is the state of an application, and why does it matter in single-page applications(SPA). Oh, single-page applications? What are those too? Let’s back it up a bit and take it one step at a time. 291. Using React and Typescript to Create Reusable and Customizable Modals Create reusable and customizable modals with React and TypeScript. Learn how to make a complete modal with React Portals and styled-components. 292. Increase Performance of React Applications Via Array JavaScript Methods We know the array methods of javascript. We used it in simple programming, right? But today we will see how to use it in real life programming. 293. Top 6 Material Design Dashboards I won’t make the intro too long. I will shortly introduce you to the Material Framework and mention our traditional criteria for evaluating dashboards/admin templates. 294. JavaScript Frameworks for Frontend and Backend Developers [Top Ten Picks] There is no doubt that JavaScript is now the #1 programming language in the world and also the undesputed king of web development. If you want to become a web developer a good knowledge of JavaScript and various, popular JavaScript web development framework is very important for you. 295. Angular Vs. React: Choosing a Front-End Web Stack Web development is an Art. 296. Top Startups and Enterprises Using ReactJS React is a framework released by Facebook for creating Single Page Applications (SPA). What is a Single Page Application? Most web applications are traditionally server-side applications. The server holds the business logic, stores data, and renders the website to the client. When a client clicks on a link, it sends a request to the server, and the server will handle this request and send back a response with HTML code which the browser will render and be viewed by the user. 297. ReactJS: The Javascript Developer’s Guide This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS. 298. Build a Gatsby Blog using the Cosmic JS Source Plugin In this tutorial, I’m going to show you how to create a simple but blazing fast blog using React, Gatsby JS, and Cosmic JS. Let’s get started. 299. How To Connect AWS Amplify with React Native Application AWS Amplify is a framework that lets you develop a web or mobile application quickly, by accessing the backend cloud services offered by AWS. In this article, we are going to learn how to use AWS Amplify in React Native by building a fully functional login and registration flow. 300. React Application Development Tools: UI, Styling, State Management, Testing If you have chosen React for building a web app, you will still need additional technologies and frameworks to expand and grow your project, add functionality and integrations. 301. Introduction to React Hooks and Why They are the Wrong Abstraction Before I get started, I'd like to express how grateful I am for all of the work that the React team has put in over the years. They've created an awesome framework that in many ways was my introduction to the modern web. They have paved the path for me to believe the ideas I'm about to present and I would not have arrived at these conclusions without their ingenuity. 302. Top 30 Free and Paid Courses and Tutorials to Learn React in 2021 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. 303. How React Testing Library Can Improve Your Mental Health [Part 2] How React Testing Library Can Improve Your Mental Health Part 2 304. What You Need to Know About Tailwind CSS 305. How to send push notifications with Firebase and React Push notifications improve engagement with your app. Firebase provides a way to send them using their Firebase Cloud Messaging service. I'm going to show you ho 306. The Best React Component Libraries to Make Your Life Easier React is an open-source JavaScript library that helps build the user interface for web and mobile apps. 307. How To Build a Simple Blog using Axios With React: Beginners Tutorial In this article, we are going to learn how to use Axios with React to make API requests and also how to handle the response. 308. Single Page Application: Dispelling SEO Myths Single Page Application (SPA) can be indexed by search engines without SSR or prerendering 309. How You Can Build Electron Desktop Application Using React [Beginners] Introduction 310. Forms of Composition in JavaScript and React One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos. 311. React App Configuration with TypeScript and Webpack A step by step guide on how to create a React project from scratch, with TypeScript and Webpack. 312. A Tutorial for Todo Apps using React, Redux and Framer-Motion React redux todo app tutorial : In this tutorial we will build Todo List app with animations using Framer-motion. With react-redux we will use redux-toolkit. 313. ✨ How To Build Your UI Components with React Portals Super Easy Yo guys, I want to introduce react-cool-portal. It's a React.js hook for Portals. t helps you render children into a DOM node that exists outside the DOM hierarchy of the parent component. From now on you will never need to struggle with modals, dropdowns, tooltips etc. Check the features section out to learn more. Hope you guys 👍🏻 it. 314. Javascript Basics For React Beginners I am one of those persons who learned React before properly learning the basic concepts of javascript. Because of this, in the early days of my React journey, I didn't know which part of the code is React and which part is the vanilla js. It's important to know the basic javascript concepts to understand better which part of the puzzle is React solving. 315. Using ReactGrid and Chart.js to Create a Financial Liquidity Planner We made ReactGrid to compose your view with arbitrary cell order. Today we present a few tips for implementing ReactGrid in your own React project. 316. How to Become a Front-End Developer: Skills, Resources, and Career Roadmap Are you a starting front end developer's journey? Then this roadmap is for you. You'll get to know all the essential aspects and steps required for frontend web developer.🤩 317. How I Live Stream My Brain with Amazon IVS, a Muse Headband and React This is the first time we've used React to broadcast live streaming our brain data 318. Records And Tuples Usage In React Records & Tuples, a very interesting proposal, has just reached stage 2 at TC39. Thank you for checking out the 318 most read stories about Reactjs on HackerNoon. to find the most read stories about any technology. Visit the /Learn Repo