Learn free react tutorials

Nodejs, Find 32 or 64 bit in windows/Linux

August 3, 2022 ·  2 min read

We sometimes need to know whether NodeJS is installed on 32-bit or 64-bit Windows, Linux, Mac, and Ubuntu PCs. 32 bit is 4 bytes of data, 64 bit is 8 bytes of data memory allocated, so Each machine has a different architecture to store and process the data. Nodejs offers multiple ways to know it. using REPL Javascript programming Check 32-bit or 64-bit using REPL REPL is a console for NODEJS to execute commands....

How to display image read from json file in react js?

July 4, 2022 ·  1 min read

Sometimes, We want to display the image from json content in React Component. The related posts: Read local json file in react Handle broken image in React [Display image from local image](/How to display image from an URL) Let’s have employee.json located in reactapplication/src/employee.json [ { "id": "1", "title": "Developer", "firstName": "John", "lastName": "Eric", "salary": 5000, "path": "/assets/imgs/employee/john.jpg" }, { "id": "2", "title": "Tester", "firstName": "Andrew", "lastName": "Johnson", "salary": 6000, "path": "/assets/imgs/employee/andrew....

React model class example

July 4, 2022 ·  4 min read

This post covers a step-by-step tutorial on how to add a model class in React App. How to create a model class in react application When to use class or interfaces for models in Angular applications? Initialize model class with an array of objects in react application Display model class data in react render function. React is a front-end UI framework. It is based on components that take input from the user and send it to the Database as well as display the data to the browser....

How to render an array of objects in react?| Array map example in react

July 1, 2022 ·  2 min read

This is a short tutorial on how to render an array of objects in React component render component. We have an array of object data either coming from API or fixed. For example, employeeList = [ { name: 'John', email: 'john@gmail.com' }, { name: 'Ram ', email: 'ram@gmail.com' } ] We can use the Array map function to iterate each object of an array. Let’s see how to iterate using the Array....

React nullish coalescing operator example

July 1, 2022 ·  3 min read

nullish coalescing operator is released in ECMAScript 2020. It is a logical operator applied to two or more operands What is the nullish coalescing operator and how to use this in react components? You can check How to use the operator in Angular Angular nullish coalescing nullish coalescing operator is a logical operator used to check value is null or undefined on two values. nullish abbreviated as null and undefined values of a parameter coalescing is of combining two values...

Reactjs Input number validation with example

July 1, 2022 ·  3 min read

The input form is a basic form to take input from the user, Form contains different input control types. We have to validate to accept valid dates only. One of the validations in numbers on the form is a simple thing to do. In this tutorial, We are going to learn multiple ways to learn input number validation in React application. Other versions available: Angular number input form validation Allow numbers only in Vuejs React offer multiple ways to do form handling...

Learn Reactjs Date picker with examples

June 27, 2022 ·  4 min read

Datepicker is an important form element of a web page, It is used to select the date from the user. The date picker contains an input text box and overlay calendar shown on focus input control. It enables a selection of dates and times. Users can use a textbox to take the date. Why date picker is required? Date picker has some advantages. -Force or restrict the user to accept the valid dates only...

Multiple ways to apply styles to the component in React component

June 27, 2022 ·  5 min read

This article shows multiple ways to apply styles to a component. The first way, apply inline styles to react components using style object The second way, using import CSS files in React component third, using css in javascript using styled-component Fourth, SASS CSS preprocessor, and LESCSS, Stylus preprocessor languages React is a javascript library for UI components. CSS st are applied to style a component. React uses JSX Inline styles Create a React application Open a terminal and run the npx create-react-app appname command to create a brand new application from scratch....

How to integrate Tailwind CSS In React Application?

June 26, 2022 ·  3 min read

React Tailwind Example: In this example, How to integrate tailwind CSS framework in react application. It also includes how to use the tailwind CSS button in the component. React TailwindCSS Example Step 1 Create React Application Step 2 Install TailwindCSS dependency using npm Step 3 Create tailwind configuration Step 4 Compile CSS files configuration Step 4 Add tailwind CSS styles Step 5 Add button to react component. Step 6: Test React Application Create React application To create a react application, Open the terminal and run the following command....

How to sort an array of objects in ascending and descending order of React app

June 26, 2022 ·  2 min read

In this tutorial, You learned how to sort an array of objects by ascending and descending order in React component render component. We have an array of object data either coming from API or fixed. For example, employeeList = [ { name: 'John', email: 'john@gmail.com' }, { name: 'Ram', email: 'ram@gmail.com' }, { name: 'Abc', email: 'abc@gmail.com' } ] Javascript array has a sort function that sorts a default order....

How to sum an array of objects with numbers in react

June 26, 2022 ·  2 min read

It is a short tutorial on how to get a sum of numbers in React application. It also includes how to calculate sum or numeric properties of an object array with example. Let’s consider the array of objects as given below. [{ firstName: "John", lastName: "Erwin", email: "john@gmail.com", salary:5000 }, { firstName: "Ram", lastName: "Kumar", email: "john@gmail.com", salary:5000 } ] An array contains objects with different employee properties. Let’s see an example of how to print an array of objects into an HTML table, and also calculate the sum of object numeric values and display it in React component....

How to use switch case statement in React class and functional component

June 26, 2022 ·  3 min read

In this tutorial, We are going to learn the Switch case expression in React component. It includes how to load components and render based on switch case expression. In General Switch expression Statement syntax in javascript written is as follows switch(expression or variable) { case case1: return "case1" case case2: return "case2" case case3: return "case3" default: return "default" } Expression is a javascript expression that is evaluated to value. Value is a variable value....

Three dots in react components with example|Spread operator

June 25, 2022 ·  4 min read

It is a simple example of three dots(…) in reactjs and JSX. Three dots((…)) in react specify to pass object properties from react components hierarchy. It also updates nested json objects in react application. three dots(…) is also called spread attribute or spread syntax in javascript. It was introduced as part of ES6. You can check my previous tutorial on `Spread operator. What does three dots do? It has different behavior in different scenarios....

How to Convert an array into String react?| Array map and reduce example in react

June 19, 2022 ·  3 min read

This is a short tutorial on how to convert an array of object properties into a String in React component render component. We have an array of object data either coming from API or fixed. For example, const employeeList = [ { firstName: "John", lastName: "Erwin", email: "john@gmail.com" }, { firstName: "Ram", lastName: "Kumar", email: "john@gmail.com" } ]; We can do it in multiple ways to convert Array to string in react....