{

Learn free react tutorials


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

March 1, 2022 ·  3 min read

In this tutorial, We are going to learn 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 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 that is evaluated to value. Value is a variable value....


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

February 28, 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

February 28, 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 classes 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....


Multiple ways to apply styles to the component in React component

February 14, 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 run npx create-react-app appname command to create a brand new application from scratch....


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

January 2, 2022 ·  3 min read

This is a short tutorial on how to convert an array of objects properties into String in React component render component. We have an array of objects 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....


How to integrate Tailwind CSS In React Application?

January 2, 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 render an array of objects in react?| Array map example in react

January 2, 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 objects 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....


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

January 2, 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 objects 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 of an array of objects with numbers in react

January 2, 2022 ·  2 min read

It is a short tutorial on how to get a sum of numbers in React application. 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....


Learn Reactjs Date picker with examples

January 2, 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 to select date and time. user can use 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...


React nullish coalescing operator example

January 2, 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

January 2, 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 number 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...


Three dots in react components with example|Spread operator

January 2, 2022 ·  3 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 allows expansion of the enumerable properties of an object, which means array expressions or string or object properties are enumerable properties....


Nodejs, Find 32 or 64 bit in windows/Linux

January 1, 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....


Subscribe
You'll get a notification every time a post gets published here.