Articles about React
All articles and blogposts about React. We hope you find what you are looking for and that you will learn something new.Search for articlesType in keywords or title of the article you are looking for
Webcam component in React for taking photos that can be downloaded or sent to an APIA tutorial on how we can create a component that accesses the webcam and take photos. We will make the image downloadable and prepare it to be added to form data to POST it to an API.
Update state in React for objects and arraysA guide on how to work with objects and arrays in React states. We will remove, add and update enitities in the state and explain the cause of mutation in React states.
Implement an add to cart feature in ReactA tutorial on how to implement an add to cart feature for a webshop, using React, context API and JavaScript
Create a QR code generator in ReactA tutorial on how to build a QR code generator in React using a free API from Algobook.
Tabs component in React with icon supportIn this tutorial we will create a Tabs component that we can use in our application for showing different type of content.
Build a full stack application with React and NodeJsA tutorial on how to build a simple full stack application with React in the client side and NodeJs in the backend.
How to make pages in React scroll to top automaticallyA short tutorial on how we can make our pages always scroll to the top once navigated to. We will create a custom hook that we can implement in our pages.
Create a contact us form in React with email integration using a free APIA tutorial on how we can create a contact us form with just using React with a 100% free Email API integration.
Create a responsive sidebar menu in React with a visibility toggleA tutorial on how to create a responsive sidebar in React with icons, links, visibility toggle and a slide in animation. We will also share example how to get it to work with react router dom using NavLinks.
A react component for displaying Adsense adsA guide on how we can create a component in react for displaying ads from Adsense
How to achieve a typing animation on a textA short tutorial on how to achieve a typing animation effect on a text, using css and React.
How to use React router v6 - render child routes with outletA tutorial on how we can render child routes with react router dom v6. We will add a header, footer and a page container which will change depending on child route.
Create API tester component in React with JSON response code blockA tutorial on how to create a component in React which can test an API and show the JSON response in a nice formatted container.
How to call an async function in useEffect hookA short example of how to call an async operation in useEffect hook in React.
How to get previous render value in React - useRefA tutorial on how we can get a previous render value in React using useRef hook. We will create a custom hook called usePrevious that we can reuse across our project.useCallback hook in ReactA guide on how useCallback works in React.
useMemo hook in ReactA guide on how useMemo works in React.
Dark mode theme toggling in a React applicationA guide on how to achieve dark mode theme in a React application with a toggle. We will use React context to solve the problem.UseEffect hook in React - mount, unmount and prop changesA guide on how useEffect hook works. This guide will cover when component mounts, unmounts and also when properties are changing.
File input onChange not called second time the file is chosenA short guide on how to solve the issue when the same file is selected twice with a file input in React
How to scrape a website from a React applicationA tutorial of how we can do website scraping from a React application. We will use reactjs-scraper in this tutorial.
How to do a count down timer in ReactA demo on how to do a simple count down timer in React.
SEO for React SPA application - My personal experience for how to succeed.I will share my takes on how to succeed on Google search and how I work with SEO for my React SPA applications to get the best possible results. This is my personal takes, and what I think is the best way.
How to do a progress animation in ReactA tutorial on how to achieve a progress animation in React, using css.
How to resize and rotate images using ReactI guess we all have encountered a scenario where we needed to resize an image. Profile pic on a certain platform, some online tool for ordering a photo book and the list goes on. Today, we will show how we can resize images in React, so that you perhaps could be the next hero in someones life that are desperatly searching for an online resize tool!
How to preview a chosen image from local disk in React with file input fieldToday we will learn how to display an image that we have choosen with an input field in React.
Number keyboard issue in Safari for inputs with type numberIn this short guide, we will show how to fix the issue with number keyboard on Safari with <input type="number" />
How to style a file upload inputIn this tutorial, we will apply some custom styling to our file upload input field.
Create an input field with integrated select element in ReactIn this tutorial, we will demonstrate how to create an input field with an integrated select in React. Enjoy!Empty options on select component in Safari browserRecently, I published a new widget to NPM. When I tried it out, I saw my <select> component were missing all the <options> on my Iphone on Safari browser. I will share how to fix this in this short tutorial!
Create a simple analog clock in ReactLet's create a simple analog watch in React. To simulate the second dial, we will utilize requestAnimationFrame to make the browser work at its best. Enjoy!
Create a custom card component in ReactIn this tutorial we will show how to create a custom card component in React. The final result will look like our article cards we are using on algobook.info.
Switch between icons with animation in ReactIn this tutorial we will show how we can change between two icons with a smooth animation in React.
Create a Collapsable list component in ReactIn this tutorial, we will show how to make a collapsable list component in React. Collapsable lists are great when you have a lot of grouped content that you want to be able to hide/show based on the users preferences.
Build and publish your React component to npmjs.comHave you just created an amazing component or library that you just can't wait to share with the world, but don't know how to do it? This tutorial will have your back!Create a React application from scratchSometimes, it makes more sense to create a React application from scratch instead of the well known create-react-app command which gives us what we want, and sometimes, even more. In todays guide, we will set up a basic React application from scratch.
Get current position of user in JavaScriptWe will show how we can get the current location of a user using the navigator.geolocation API. We will then display the latitude and longitude in a simple React component.
Simple CMS implementation in React with websocket server in NodeJsIn this tutorial, we will create a simple CMS that we will connect to our main application through websockets. Our main application will then show a banner with the data comming from the CMS through the websockets. Enjoy!
Implement an Active users counter component with live updates through WebsocketsWebsockets are an amazing communication protocol that enables applications to provide live updates. Imagine if you would need to refresh a chat application in order to get the new messages, or if the price updates on stocks were stale.. In this tutorial we are creating a basic websockets server in NodeJs and a client in ReactJs to display current active users.
Cookie policy banner in React with Google Analytics consentsIn this guide we will create a cookie banner in React with a slide up animation. The banner will be fully responsive for both desktop and mobile devices and we will add logic for Google Analytics cookie consents a well.
How to create an animated burger menu button in ReactFollow along when we create an animated burger menu button in React!How to setup React application with typescript using create-react-appIn this guide, we will show how we can set up a React application with TypeScript (tsx) and sass modules. Also how we can migrate a regular .jsx project to start using TypeScript!How to create a scroll to top floating button in ReactHave you ever seen one of those floating buttons in the bottom of the screen which are smoothly scrolling you up to the top of the screen? Have you ever wanted one on your page? Then this is the tutorial for you!A simple tab filter component in ReactIn this guide we will show how to make a simple filter component in React using tabs. We will create some test data and filter them out with our new component.How to upload and read files using ReactIn this tutorial we will demonstrate how to upload files using React. And also how we can retrive and show images from an API.Using memo in ReactIn this guide, we will take a look at memo, and what it does to our React component.How to create custom hooks in ReactIn this tutorial we will demonstrate how we can build our own hooks in React and use them in a component.How to use context in React applicationIn this tutorial, we will explore the React context and the usage of useContext() and useReducer() hooks. We will demonstrate how we can use both local app state updates and API calls using React context.
How to deploy a React app to Cloud run using Cloud build and Github triggerA guide to deploy a React application created by create-react-app to Cloud Run using Cloud Build and Github trigger.
Webcam component in React for taking photos that can be downloaded or sent to an APIA tutorial on how we can create a component that accesses the webcam and take photos. We will make the image downloadable and prepare it to be added to form data to POST it to an API.Wed Jun 21 2023
Update state in React for objects and arraysA guide on how to work with objects and arrays in React states. We will remove, add and update enitities in the state and explain the cause of mutation in React states.Thu Jun 15 2023
Implement an add to cart feature in ReactA tutorial on how to implement an add to cart feature for a webshop, using React, context API and JavaScriptWed Jun 14 2023
Create a QR code generator in ReactA tutorial on how to build a QR code generator in React using a free API from Algobook.Sun Jun 04 2023
Tabs component in React with icon supportIn this tutorial we will create a Tabs component that we can use in our application for showing different type of content.Sun May 28 2023
Build a full stack application with React and NodeJsA tutorial on how to build a simple full stack application with React in the client side and NodeJs in the backend.Sat May 27 2023
How to make pages in React scroll to top automaticallyA short tutorial on how we can make our pages always scroll to the top once navigated to. We will create a custom hook that we can implement in our pages.Tue May 23 2023
Create a contact us form in React with email integration using a free APIA tutorial on how we can create a contact us form with just using React with a 100% free Email API integration.Tue May 23 2023
Create a responsive sidebar menu in React with a visibility toggleA tutorial on how to create a responsive sidebar in React with icons, links, visibility toggle and a slide in animation. We will also share example how to get it to work with react router dom using NavLinks.Fri May 19 2023
A react component for displaying Adsense adsA guide on how we can create a component in react for displaying ads from AdsenseFri May 19 2023
How to achieve a typing animation on a textA short tutorial on how to achieve a typing animation effect on a text, using css and React.Fri May 19 2023
How to use React router v6 - render child routes with outletA tutorial on how we can render child routes with react router dom v6. We will add a header, footer and a page container which will change depending on child route.Thu May 18 2023
Create API tester component in React with JSON response code blockA tutorial on how to create a component in React which can test an API and show the JSON response in a nice formatted container.Tue May 16 2023
How to call an async function in useEffect hookA short example of how to call an async operation in useEffect hook in React.Mon May 15 2023
How to get previous render value in React - useRefA tutorial on how we can get a previous render value in React using useRef hook. We will create a custom hook called usePrevious that we can reuse across our project.Mon May 15 2023
useCallback hook in ReactA guide on how useCallback works in React.Mon May 15 2023
useMemo hook in ReactA guide on how useMemo works in React.Mon May 15 2023
Dark mode theme toggling in a React applicationA guide on how to achieve dark mode theme in a React application with a toggle. We will use React context to solve the problem.Sun May 14 2023
UseEffect hook in React - mount, unmount and prop changesA guide on how useEffect hook works. This guide will cover when component mounts, unmounts and also when properties are changing.Thu May 11 2023
File input onChange not called second time the file is chosenA short guide on how to solve the issue when the same file is selected twice with a file input in ReactWed May 10 2023
How to scrape a website from a React applicationA tutorial of how we can do website scraping from a React application. We will use reactjs-scraper in this tutorial.Mon May 08 2023
How to do a count down timer in ReactA demo on how to do a simple count down timer in React.Sun May 07 2023
SEO for React SPA application - My personal experience for how to succeed.I will share my takes on how to succeed on Google search and how I work with SEO for my React SPA applications to get the best possible results. This is my personal takes, and what I think is the best way.Thu May 04 2023
How to do a progress animation in ReactA tutorial on how to achieve a progress animation in React, using css.Thu May 04 2023
How to resize and rotate images using ReactI guess we all have encountered a scenario where we needed to resize an image. Profile pic on a certain platform, some online tool for ordering a photo book and the list goes on. Today, we will show how we can resize images in React, so that you perhaps could be the next hero in someones life that are desperatly searching for an online resize tool!Tue May 02 2023
How to preview a chosen image from local disk in React with file input fieldToday we will learn how to display an image that we have choosen with an input field in React.Tue May 02 2023
Number keyboard issue in Safari for inputs with type numberIn this short guide, we will show how to fix the issue with number keyboard on Safari with <input type="number" />Mon May 01 2023
How to style a file upload inputIn this tutorial, we will apply some custom styling to our file upload input field.Mon May 01 2023
Create an input field with integrated select element in ReactIn this tutorial, we will demonstrate how to create an input field with an integrated select in React. Enjoy!Fri Apr 28 2023
Empty options on select component in Safari browserRecently, I published a new widget to NPM. When I tried it out, I saw my <select> component were missing all the <options> on my Iphone on Safari browser. I will share how to fix this in this short tutorial!Thu Apr 27 2023
Create a simple analog clock in ReactLet's create a simple analog watch in React. To simulate the second dial, we will utilize requestAnimationFrame to make the browser work at its best. Enjoy!Wed Apr 26 2023
Create a custom card component in ReactIn this tutorial we will show how to create a custom card component in React. The final result will look like our article cards we are using on algobook.info.Mon Apr 17 2023
Switch between icons with animation in ReactIn this tutorial we will show how we can change between two icons with a smooth animation in React.Sun Apr 16 2023
Create a Collapsable list component in ReactIn this tutorial, we will show how to make a collapsable list component in React. Collapsable lists are great when you have a lot of grouped content that you want to be able to hide/show based on the users preferences.Sat Apr 15 2023
Build and publish your React component to npmjs.comHave you just created an amazing component or library that you just can't wait to share with the world, but don't know how to do it? This tutorial will have your back!Sat Apr 15 2023
Create a React application from scratchSometimes, it makes more sense to create a React application from scratch instead of the well known create-react-app command which gives us what we want, and sometimes, even more. In todays guide, we will set up a basic React application from scratch.Tue Apr 11 2023
Get current position of user in JavaScriptWe will show how we can get the current location of a user using the navigator.geolocation API. We will then display the latitude and longitude in a simple React component.Mon Apr 10 2023
Simple CMS implementation in React with websocket server in NodeJsIn this tutorial, we will create a simple CMS that we will connect to our main application through websockets. Our main application will then show a banner with the data comming from the CMS through the websockets. Enjoy!Sat Apr 08 2023
Implement an Active users counter component with live updates through WebsocketsWebsockets are an amazing communication protocol that enables applications to provide live updates. Imagine if you would need to refresh a chat application in order to get the new messages, or if the price updates on stocks were stale.. In this tutorial we are creating a basic websockets server in NodeJs and a client in ReactJs to display current active users.Fri Apr 07 2023
Cookie policy banner in React with Google Analytics consentsIn this guide we will create a cookie banner in React with a slide up animation. The banner will be fully responsive for both desktop and mobile devices and we will add logic for Google Analytics cookie consents a well.Mon Apr 03 2023
How to create an animated burger menu button in ReactFollow along when we create an animated burger menu button in React!Fri Mar 31 2023
How to setup React application with typescript using create-react-appIn this guide, we will show how we can set up a React application with TypeScript (tsx) and sass modules. Also how we can migrate a regular .jsx project to start using TypeScript!Thu Mar 30 2023
How to create a scroll to top floating button in ReactHave you ever seen one of those floating buttons in the bottom of the screen which are smoothly scrolling you up to the top of the screen? Have you ever wanted one on your page? Then this is the tutorial for you!Wed Mar 29 2023
A simple tab filter component in ReactIn this guide we will show how to make a simple filter component in React using tabs. We will create some test data and filter them out with our new component.Tue Mar 28 2023
How to upload and read files using ReactIn this tutorial we will demonstrate how to upload files using React. And also how we can retrive and show images from an API.Thu Mar 23 2023
Using memo in ReactIn this guide, we will take a look at memo, and what it does to our React component.Wed Mar 22 2023
How to create custom hooks in ReactIn this tutorial we will demonstrate how we can build our own hooks in React and use them in a component.Tue Mar 21 2023
How to use context in React applicationIn this tutorial, we will explore the React context and the usage of useContext() and useReducer() hooks. We will demonstrate how we can use both local app state updates and API calls using React context.Mon Mar 20 2023
How to deploy a React app to Cloud run using Cloud build and Github triggerA guide to deploy a React application created by create-react-app to Cloud Run using Cloud Build and Github trigger.Fri Mar 17 2023