Learn free reactjs tutorials

React UUID Component Generator Example | React Native UUID example

February 21, 2023 ·  2 min read

In this blog post, We will learn how to Generate Unique Identifier - UUID in react js with examples. Sometimes, we need to have a use case like the generation of a Unique random identifier or UUID. UUID is a unique value that is not repeated. UUID will be mostly used to identify the visitor or user identification for session values and also for privacy functionality, Chat applications. GUID is a 128-bit value divided into five groups separated by a hyphen....

Basic React Interview questions and answers

February 28, 2022 ·  2 min read

This post talks about React interview questions and answers for developers. It is useful for full-stack developers and frontend developers. What is React framework? React is a popular open-source UI framework developed by Facebook. This is based on JavaScript language for building UI components. It is only used as a view layer in Single page applications. This can be used to develop the following types of applications web applications with React Mobile applications with React native Desktop applications with React NodeGui Browser plugins Facebook was developed and opensource in 2011, created by Facebook engineer Jordan Walkie....

Best ways to add an element to an array in React state with examples

February 28, 2022 ·  4 min read

This is a short tutorial on how to add an object to an array of objects in React. And also how to update the array of objects into react state component. This tutorial explains how to push an element to an array of elements in React with code examples. In this section, we will learn how to add an object to an array of objects in React. ReactJS is a JavaScript UI library for building user interfaces....

Difference between Development and Production Builds in React

February 28, 2022 ·  2 min read

React application by default uses Webpack for production and development builds. As a basic learners, We need to know the difference between Development and Production Build in React applications. You can also check another post on [Production build or not at runtime](/How to detect production or development build at runtime in React) Both builds compile and generate bundles of files that run the browser. React Supports the Following tools to build Production Builds...

Difference between pureComponent and component in React

February 28, 2022 ·  2 min read

This is a short tutorial that explains the difference between PureComponent and Component. Normal Component example Normal components are created in every application by extending React. component for Class components. Created a component using the class keyword Extends React.component It has callback lifecycle methods like componentWillMount etc. Also can add event handler methods, For example, Adding a button and its event handler click event The state can be Scalar types like Integer, String, and nested data structures....

Difference between super and super props in React constructor class?

February 28, 2022 ·  3 min read

This tutorial covers the difference between super and super with props parameter in React class constructor. For example, React component defines with super(props) in the the constructor. class PropsExampleComponent extends React.Component { constructor(props) { super(props); } } In this component, super with props defines n the class constructor . class ExampleComponent extends React.Component { constructor(props) { super(); } } Let’s explain the difference between those two components and their differences....

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React

February 28, 2022 ·  3 min read

Today, when I am creating react application, it got an error. **You are running create-react-app 4.0.3, which is behind the latest release (5.0.0). ** We no longer support the global installation of Create React App. Fixing for running create-react-app 4.0.3, which is behind the latest release (5.0.0) In my System, I created a react application with the below command A:\work>npx create-react-app kend-react-examples Need to install the following packages: create-react-app Ok to proceed?...

Getting started with ReactJS Bootstrap Tutorials with examples | reactstrap tutorials

February 28, 2022 ·  3 min read

In this blog post, We will explore how to integrate the bootstrap framework with the ReactJS library. react-bootstrap components Bootstrap is a popular open-source HTML, Javascript, and CSS framework for building responsive applications targeted to Desktop and mobile. Bootstrap was developed based on the JQuery framework. In this tutorial, We are going to learn bootstrap integration in react library without JQuery.React is one of the popular javascript frameworks for building client-side applications....

How do hide secret key information in React application

February 28, 2022 ·  2 min read

The application makes API calls which API calls need secret keys. These keys are not committed to the code repository. This tutorial covers how to hide the secret keys hiding in React applications created with the create-react-app command. For example, If you are creating react Twilio plugin, you need secret keys such as ACCOUNT_SID and AUTH_TOKEN details. For example, React application is created with the create-react-app command. Hide API key details in react application first, install the latest dotenv npm library using the npm command...

How to render function return empty in React Application

February 28, 2022 ·  2 min read

React is a component-based UI library that displays the webpage with several components. Each component returns HTML output and is displayed on the webpage. Sometimes, We need to display empty to return in Empty in Application. How to return an empty jsx tag from render function in ReactJS There are multiple ways we can return jsx empty or null from the render function. One way, using empty tags or React fragments...

How to add a label for an attribute in react?

February 28, 2022 ·  3 min read

In this tutorial, we are going to learn how to add labels in React user forms. React framework ignores for attributes for label elements. What does the “for” attribute do in HTML tag? React provides web accessibility guidelines to create a website. It helps us to navigate and access the page content for everyone. Labels are helpful to understand human-readable text for each form of input control and help blind, keyboard, and mouse users....

How to add comments to render jsx in React

February 28, 2022 ·  2 min read

Comments are useful pieces of text in the code about lines of code and are ignored by the interpreter of an application. These will not be displayed by the user. React is a UI framework with reusable components. Components can be written using JSX or TSX language and CSS Comments in React JSX JSX is a special syntax with uses a mix of JavaScript and HTML. The render method is written with JSX syntax....

How to add google analytics to react app example?

February 28, 2022 ·  2 min read

This post talks about adding or setup google analytics in react application. Google Analytics is a service from google to track pages, visitors, and session information of a website. It is free to use on any website. First, Get a tracking id from the google analytics site. The simple tracking id format is UA-000000-00. React is a single-page application, There are multiple ways you can configure it. without router React-router history Install react-go npm into the application react-ga is a google analytics module for javascript to integrate into websites or applications....

How to add script or inline tag to react component

February 28, 2022 ·  2 min read

Sometimes, We want to add the script tag to individual components. This post talks about adding scripts or inline scripts to individual components with multiple approaches Functional components with useHook React class components with componentWillMount React-helmet npm package how to add a script tag to react components This section describes adding a script tag to class and functional components. React class components: There is a callback method componentWillMount which will be called for every render of a react component....

How to change the default port 3000 in React with the create-react-app command?

February 28, 2022 ·  3 min read

React application listens at default port(3000) if you create an application with the create-react-app command. I created a react application using the create-react-app command. The project contains package.json that contains scripts for starting and running an application. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } Sometimes, We need to change the port to a new port number, an unassigned integer which is always between 0 to 2 power 16 -1, ....

How to Convert string with delimiter into an array in react typescript?

February 28, 2022 ·  3 min read

It is a short tutorial on how to convert string to array in react example. It includes how to convert a string with a delimiter to an array using the split() function. Suppose we have a string as an input. var mystr="This is a string" And output converted to Array ["this","is","an","string"] In javascript, We have a string split() function. It is used to split the string into an array of words....

How to copy text to clipboard in React example

February 28, 2022 ·  2 min read

This tutorial covers copy text to the clipboard using below two methods navigator.clipboard react-copy-to-clipboard npm navigator object in javascript provides browser capabilities, It has a clipboard API interface for accessing the system clipboard, and It provides cut, copies, and pastes functionalities of the native operating system. However, a clipboard is a short content buffer that exists across multiple pages or requests. Copy text to clipboard using navigator System clipboard in react can be accessed using Navigator....

How to Create a Toast Notification with Prime React code examples

February 28, 2022 ·  4 min read

Toast or alert notification UI is a basic element in Web pages to display the status of an operation to a user. Status is info, warning, success, or error. this tutorial, explains how to show alert or toast messages in React application. PrimeReact is an open-source react component library that contains set of React UI components. It is a collection of robust, easy to use and well documented React Components for building modern web applications....

How to create an react typescript application | Create-react-app typescript application

February 28, 2022 ·  2 min read

There are several ways we can create react applications from scratch with create-react-app existing react javascript: This post does not cover how to convert existing react applications to typescript. Usually, every developer writes react components using javascript default Typescript is an advanced version of javascript with more features like strict type checking and a lot of advantages. React with Typescript Requirement Node and npm are installed already React Javascript,CSS,HTML Visual studio code editor...

How to Create React Alert Notification with Example| React toastify

February 28, 2022 ·  7 min read

In these tutorials, You’ll learn how to implement alert notifications with the react-toastify npm library. Contents What is toastify in javascript? What is react-Toastify used for? What are toast messages in React? What is a toastcontainer? How do you use Toastify in react? react toastify notification example Basic toast notification example React alert notifications Promise for API result How to update react-toastify in React Application? React toastify component is not rendered in a component Conclusion What is toastify in javascript?...

How to detect production or development build at runtime in React

February 28, 2022 ·  2 min read

This is a short tutorial about how to check whether to react application is a production build or development code at runtime. Sometimes, We want to check whether to react code is in production mode or not In React, We have two modes of builds production is a minified version of javascript and HTML code and rendered on browser client machine and performance is good development - javascript and HTML code is not minified and loads immediately....

How to disable button in React with example

February 28, 2022 ·  3 min read

This article covers how to enable disable button in the reactjs application. This article covers the following examples. Enable/disable the button when the input form is empty with stateful(class component) Disable the button based on react component state disable reset button with functional(stateless) component How to Enable/disable the button when the input form is empty using class components In standard form handling, the form includes various input buttons for reading data from the user, as well as a, submit button for submitting the form data....

How to display the content of a JSON file in React with an example

February 28, 2022 ·  4 min read

This tutorial shows how to display json files located in the public folder in react component example. REST data is read from API and displayed to UI. This tutorial reads from a static folder and displays In my application, the employee.json file is located in a location: react/src/employee.json. [ { "id": "1", "title": "Developer", "firstName": "John", "lastName": "Eric", "salary": 5000 }, { "id": "2", "title": "Tester", "firstName": "Andrew", "lastName": "Johnson", "salary": 6000 } ] How to read Raw json content from a local external json file in react component This example prints JSON content read from json file located in React application....

How to fix Import In the body of module; reorder to top import/first? in React and javascript

February 28, 2022 ·  2 min read

When you are writing a react component with ES6 javascript, You used to get the following error. and this tutorial covers a solution to fix this error. Import in the body of module; reorder to top import/first created a React component with a styled-components library written a code inside a component import React from "react"; import "./styles.css" class ButtonStyledComponent extends React.Component { constructor() { super() } render() { return <div> <button className="clickButton" type="button">Click</button> </div > } } export default ButtonStyledComponent; import styled from "styled-components"; const Button = styled....

How to get a version of React running at runtime in the browser?

February 28, 2022 ·  1 min read

This article explains multiple ways to get react versions used in React applications. The first way, using the package.json file in an application. The second way, use React. version from importing React module The third way, using the REACT_DEVTOOLS_GLOBAL_HOOK object in the browser console of React developer tools. How to get react version displayed in the browser used in the Application There are multiple ways to know the react version in code and from the terminal....

How to handle broken images in React | fallback for broken images

February 28, 2022 ·  2 min read

This tutorial shows how to fix broken images in react application. Let’s see How to create and display images? Html provides img tag to display images <img src="first.png" alt ="Image example" /> The image displayed in a web browser, What if first.png is not found or gives a 404 error. Html provides onerror for fallback images if the src image gives an error or 404 <img src="first.png" onerror="this.src='error.png';this.onerror='';"> The same we can handle in react component....

How to iterate array of object inside jsx render with examples in React

February 28, 2022 ·  3 min read

In this short tutorial, You learn how to iterate an array or object in the JSX render function. In react components, the Render method returns the single element renders to the page. Sometimes, we want to display child components with for loop. we can use a loop inside render JS. however, is It is tricky to iterate and display child components This article explains about an employee’s array data is stored in react state, Display these in the child component using react props with iteration in the parent component....

How to rerender component without state change| React forceUpdate method

February 28, 2022 ·  2 min read

In react application, State holds the data to the component, and props pass data to component. What happens if the state/props of a component changes? usually, the state changes its values using the setState method with a new state object. whenever the state changes, React framework does the following sequence of steps calls shouldComponentUpdate method if shouldComponentUpdate contains conditional logic which returns false, that means the render method is not called....

How to update ReactJS's `create-react-app`?

February 28, 2022 ·  2 min read

I started to create a react application with the npx create-react-app command and it gives an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0). It means, My system uses create-react-app with the old version 4.0.4 and the latest version is 5.0.0. It does not create an application, So I have to upgrade to the latest version. here is an output of npx create-react-app command A:\work>npx create-react-app react-style-components Need to install the following packages: create-react-app Ok to proceed?...

Learn React JSX guide with examples

February 28, 2022 ·  5 min read

In this blog post, We are going to Learn JSX tutorials with Syntax and examples usage in React application This tutorial covers the following topics of ReactJS Introduction JSX Syntax Display react component to DOM JSX CSS inline Styles Attributes and props Javascript Expressions Javascript events Comments usage JSX Examples jsx editors support Naming Code Conventions JSX Basic introduction JSX is abbreviated as JavaScript XML.JSX is a JavaScript code with XML Syntax....

Multiple ways to create a React UI Component in Javascript

February 28, 2022 ·  4 min read

This tutorial shows you multiple ways to create a react component with javascript. React Components are basic building blocks of a React framework. We can create multiple ways in React App. First, Create a react application with the below command. npx create-react-app react-component-types It creates an application with all required configuration and dependencies. Multiple ways to create a React Component using React.createClass with ES5 use createReactClass in ES5 INitially, When React framework is released, the only way we can create a React Component using React....

React Button Click event handler with example

February 28, 2022 ·  3 min read

This article covers how to click a button in the reactjs application. This article covers the following examples. Class component with a button click Functional component with button Click event In standard apps, Button is attached with a click event. Here button is added with the click event, <div style="text-align:center"> <h1> React Button Click Event Example </h1> <button click="clickEvent()" > Click Me</button> <h2>{{msg}}</h2> </div> passed with event handler clickEvent. clickEvent is an event handler javascript function....

React Button toggle on off example

February 28, 2022 ·  2 min read

This tutorial explains how to write a react toggle button component with on or off for example. In this component, First displays the button with On text, On clicking this button, how to change the text from on or off or vice verse. Button clicking state that contains on(true) and off(false) is maintained in React State object. You can set the default to true or false. The current state is the default state....

React Fixing input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

February 28, 2022 ·  2 min read

This post covers solutions for **input is a void element tag and must neither have children nor use dangerouslySetInnerHTML**. React throws an error while void elements contain children or are used dangerouslySetInnerHTML. Void elements in HTMl are self closing tags which don’t haave any content, Examples are ,, This is a frequent issue developers used to get during React application development. What does the issue mean? For example, Let’s declare a button in HTML, This works in HTML but a semantic issue as...

react helmet tutorials with examples

February 28, 2022 ·  4 min read

React Helmet is an npm library that provides react components to change and update tags values inside the head tag of an HTML in react pages. Head is a parent tag for a title, meta, script, link, noscript, and style tag, So you can change or set this tag’s values dynamically. This tutorial covers a basic react-helmet package, how to change document head values dynamically, and How it is useful in SEO during server-side rendering....

React hooks useState example

February 28, 2022 ·  3 min read

React hooks are the latest features introduced in functional classes to limit class component uses. React supports two types of component types. Functional components: these are functions with arguments and return JSX (mix of javascript and HTML) code and there is no state management before react V0.16.7 version, also called stateless components. Class components: these are stateful components, contain state, lifecycle methods, these are created by extending the React.Component class. Several hooks are introduced in react latest versions....

React Input onBlur Event with examples

February 28, 2022 ·  1 min read

In this tutorial, We will learn how to use input onBlur event in Angular First, what is the onBlur event? where is this being used in Angular? onBlur is a javascript event, fired when the input element lost its focus. You can see my previous about Angular button click event example Other versions available: Angular onBlur event guide example VueJS Blur event example It is helpful while doing form validations....

react input placeholder attribute examples

February 28, 2022 ·  3 min read

Placeholders are a piece of text displayed in input controls on a form. This was introduced in Html5. Ideally, these can be used to have a better user experience during form handling. Let’s declare place holder in Html5 <input type="text" placeholde="placeholder text"> Placeholder attributes can be defined for input form controls like text, text area, and select. You can check my previous available post: Angular Placeholder Example Input placeholder styles in html This tutorial covers the following examples with an explanation....

ReactJS - How to add google fonts library example

February 28, 2022 ·  3 min read

In this post, How to integrate google fonts library in Reactjs application with examples. This covers a *multiple approaches to integrating google font lato into reactjs projects. Other versions available: Google fonts in Angular Add google font in vuejs application React application from scratch The create-react-app command creates new applications with all files and builds pipelines. It provides all the latest reactjs and their dependencies. npx create-react-app react-google-fonts Success! Created react-google-fonts at B:\blog\jswork\react-google-fonts Inside that directory, you can run several commands: yarn start Starts the development server....

ReactJS Append variables with strings, jsx state and prop concatenate html

February 28, 2022 ·  2 min read

This tutorial shows multiple examples of concatenating strings with variables in the ReactJs Component. React append string data variable This example shows a string variable concatenation in React Component. Created two string variables that hold string content. Append one string to another using the +operator. In the component, String is displayed using javascript expression. Let’s create a simple function component. import React from 'react'; const MyFunction = () => { let hello = "Hello "; let result = hello + " Welcome"; return (<div> <div> {result} My application</div> </div>) } export default MyFunction Output:...

ReactJS array reduce method example

February 28, 2022 ·  2 min read

In this tutorial, You will learn the array reduce method in javascript/typescript, an example of how to reduce an array of objects into a single value in react application The Reduce method is a method in the javascript array used to reduce the number of elements in an array. array reduce function in javascript/typescript Here is a syntax array.reduce(function(accumalator, currentValue, currentIndex, array), initialValue) reduce function returns only a single value from an array...

Reactjs Fix Failed form propType: You provided a `value` prop to a form field and an `onChange` handler

February 28, 2022 ·  4 min read

If you are learning to react and working on applications, we used to get the following errors. Initially, I got the following errors while learning reacts framework. This blog post talks about the solution for Failed form propType errors in input controls. Failed form propType: You provided a value prop to a form field without an onChange handler Failed form propType: You provided a checked prop to a form field without an onChange handler This error comes in the following cases....

Reactjs Fix Must call a super constructor in derived class before accessing this

February 28, 2022 ·  3 min read

This tutorial explains an error Must call a super constructor in the derived class before accessing this in react First, let’s create a react component import React from "react"; class CssStyles extends React.Component { constructor() { } render() { return <div> <button value="submit"></button> </div> } } export default CssStyles; And called the above class in another react component import React from 'react'; import CssStyles from './css-styles'; function App() { return ( <div className="App"> <CssStyles></CssStyles> </div> ); } export default App; It throws an error for react component as Uncaught ReferenceError: Must call a super constructor in derived class before accessing ’this’ or returning from derived constructor...

ReactJS How to display image from an URL|local folder with example

February 28, 2022 ·  3 min read

In this tutorial, You will learn how to display an image from a URL or local folder in the Reactjs application. This post covers the following things React Simple Image component In HTML, <img> tag displays the image using src attribute Here is an example usage of HTML img tag: <img src="https://picsum.photos/200" alt="display image" /> if you want to display the image in react, Create a component as follows. import React, { Component } from 'react'; class ImageComponent extends Component { render() { return ( <div> <img src="https://picsum....

ReactJS How to focus input element on render| useRef and useEffect example

February 28, 2022 ·  2 min read

This post talks about how to set focus on the input element in Form validation in Reactjs. Adding Input focus to the input elements on UI forms makes validation easy and controls input elements via the keyboard tab. focus input element using ref in react class components ref and createRef in ReactJS provides an access-specific DOM element in stateful components. These are also called Class components Using this provides focus control to input elements....

ReactJS Input onBlur event example

February 28, 2022 ·  4 min read

In this post, Learn Input blur event handler in react application application and Simple example input blur event uses. Reactjs provides an onBlur event bound to Input elements on the user form. onBlur is a javascript blur event, can attach a callback handler to this, called when input lost focus. Syntax <input onBlur="eventHandler"> onBlur is bounded to an input element with an event handler, Event handler is a function in a component, executed when input focus is lost....

ReactJS input type url form validation Regular expression example

February 28, 2022 ·  3 min read

In this tutorial, you will learn how to do input type url form validation in the reactjs application. You can see the full code on Github Other versions available: Angular url form validation VueJS Input type url validation We will create react application using the create-react-app tool to run the application. npx create-react-app react-input-form Now, let’s run the application cd react-input-form npm run start It starts the application and opens localhost:3000...

ReactJS, How to convert unix Timestamp to/from Date example

February 28, 2022 ·  4 min read

This post talks about converting timestamp to/from date in reactjs/javascript. In front-end applications, Date manipulation is a little bit different as client and server dates are different. Sometimes, data containing date-related information returned from backend API needs to be formatted and converted to date. Reactjs applications offer two approaches using moments library Intl DateTimeFormat Timestamp is Unix style long value returning milliseconds elapsed from 1970/1/1 UTC In javascript, the Following are ways javascript is offering to get the current timestamp....

Scaffold a New React Application using create-react-app | ReactJS Cli tutorials

February 28, 2022 ·  5 min read

In this blog post, we are going to learn the creation of React Application using React CLI tool. React CLI tool introduction React Framework is an open-source component framework from Facebook for developing User interface applications. It is a popular library. For creating react applications manually, It is very difficult to create react applications. Manually need to add configuration required for creating react application. React Team provides the create-react-app cli tool to create a React Application from scratch without writing manually....