In this article, we will see how to create a 3D text using react-threefiber. We will first download the font of JSON and then we will add it in our Text Geometry object. We will add orbit control to it which will allow moving the text on the screen and view the 3D text properly. So, let's get started.ExampleFirst, download important libraries −npm i --save @react-three/fiber threeThis library react-three/fiber will be used to add webGL renderer to the website and to connect threejs and React.Now install a typeface font JSON and put it inside “src” folder. You can download a ... Read More

In this article, you will learn how to create a globe using react-threefiber. We will first make a sphere and then map a whole Earth map on it. This is an interesting texture loader feature using which we canmake any image to wrap over a sphere as texture. So, let's get started!ExampleFirst, download important libraries −npm i --save @react-three/fiber threeThis library react-three/fiber will be used to add webGL renderer to the website and to connect threejs and React.Download an image of Earth map and place it in the “src” folder. We have named the image file as "world-map.gif".Add the following ... Read More

Other than all being a natural number, the numbers 0, 4, 6, 8, 9 have one more thing in common. All these numbers are formed by or contain at least one closed loop in their shapes.For example, the number 0 is a closed loop, 8 contains two closed loops and 4, 6, 9 each contains one closed loop.We are required to write a JavaScript function that takes in a number and returns the sum of the closed loops in all its digits.For example, if the number is 4789Then the output should be 4 i.e.1 + 0 + 2 + 1ExampleFollowing is ... Read More

Suppose, we have an array of numbers like this −const arr = [3, 5, 5, 23, 3, 5, 6, 43, 23, 7];We are required to write a function that takes in one such array and constructs another array whose elements are the difference between consecutive elements of the input array.For this array, the output will be −const output = [-2, 0, -18, 20, -2, -1, -37, 20, 16];ExampleFollowing is the code −const arr = [3, 5, 5, 23, 3, 5, 6, 43, 23, 7]; const consecutiveDifference = arr => {    const res = [];    for(let i = 0; ... Read More

Compound Interest FormulaCompound interest is calculated using the following formula −CI = P*(1 + R/n) (nt) – PHere, P is the principal amount.R is the annual interest rate.t is the time the money is invested or borrowed for.n is the number of times that interest is compounded per unit t, for example if interest is compounded monthly and t is in years then the value of n would be 12. If interest is compounded quarterly and t is in years then the value of n would be 4.We are required to write a JavaScript function that takes in principal, rate, ... Read More

AngularJSAngularJS, is a javascript based open-source front-end framework and is mainly used to develop single page applications on web. It enriches the static HTML to dynamic HTML. It extends existing HTML by providing directives. Its latest stable version is 1.7.7AngularAngular is alternative to AngularJS and it is a major version upgrade to Angular JS. Angular release starts from 2.0. It is very fast as compared to AngularJS. It has modular design, have angular CLI and easy to develop. Angular latest stable version is 9.Following are the important differences between AngularJS and Angular.Sr. No.KeyAngularJSAngular1ArchitectureAngularJS works on MVC, Model View Controller Design. ... Read More

ReactJSReact or ReactJS was originally developed by Facebook and it acts on view layer for web and mobile based application. It integrates well with Node js environment. Following are key features of React.Scalability - react is highly adaptable and scalable library.Rich in features - Provides extensions to existing javascript and typescript languages.Reusablity - react components are highly reusable.Vue.jsVue.js is javascript based MVC framework and is very helpful in creating responsive UI.Following are key features of Vue.js.Scalability - Vue.js is highly adaptable and scalable library.Rich in features - Provides extensions to existing html components.Reusablity - Vue.js components are highly reusable and ... Read More

JSX simply creates a React element using createElement method in the end.Example Submit Will be converted to −React.createElement(    FormButton,    {color: 'green', buttonSize: 10},    'Submit’ )Self-closing tags are also possible to add.Capitalizing the custom React ElementThe custom react element must be named with first character in capital so that React will be able distinguish between the html element and the react element.As Jsx gets converted to React.createElement, the React library must be in scope. For that we have to import the React if jsx needs to use.Accessing the inner properties using dot operatorThe inner properties of an element ... Read More

Higher order component in short called as hoc. It’s a pattern which receives a component and returns a new component with add-on features to it.//hoc is the name of a custom JavaScript functionconst AddOnComponent= hoc(SimpleComponent);We use component with state and/or props to build an UI. Similar way a hoc builds a new component from the provided component.Use of hoc is making a cross cutting concerns in React. The components will take care of individual responsibility of single tasks while hoc functions will take care of cross cutting concerns.Connect function from redux is an example of hoc.A practical example of hocDisplay ... Read More

Most of the times we need to return multiple elements from a component. React Fragment helps in returning multiple elements. The other alternative is to use a html element like div to wrap them. But using extra html node can cause some semantic issues.Example of React.Fragmentrender() {    return (                                  ); } The short syntax is : render() {    return (                                 ... Read More