Found 161 Articles for React JS

Creating 3D Text using React-three-fiber

Ath Tripathi
Updated on 28-Sep-2021 10:59:30
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

Creating 3D Globe using React-three-fiber

Ath Tripathi
Updated on 27-Sep-2021 11:08:46
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

Difference between NodeJS and ReactJS

Mayank Agarwal
Updated on 29-Apr-2021 09:19:07
ReactJS and NodeJS both are a widely used subsets of JavaScript nowadays with high performance. But both are different in someways. In the below article, we will discuss the difference between the two and which is better to use to build a web application and why ?NodeJSIt is a completely open-source and cross-platform runtime environment used for executing JavaScript code outside of a browser.The event driven model of NodeJs lets the user to create a fast and scalable network applications. First thing to remember about NodeJS is that its neither a framework and nor a programming language. NodeJS is a ... Read More

Difference between ReactJS and Vue.js

Mahesh Parahar
Updated on 28-Nov-2019 10:07:00
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 in depth in React.js

Shyam Hande
Updated on 05-Sep-2019 08:00:25
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 components in React.js

Shyam Hande
Updated on 05-Sep-2019 07:53:53
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

Fragment in React.js

Shyam Hande
Updated on 05-Sep-2019 07:48:28
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

Forwarding ref in React.js

Shyam Hande
Updated on 05-Sep-2019 07:45:54
Passing a ref to the child component is called as forwarding ref. React provides a createRef function to create a ref for element.forwardRef is a function to pass the ref to child component.Example// ExampleRef.js const ExampleTextInput = React.forwardRef((props, ref) => (     )); const exampleInputRef = React.createRef(); class NewTextInput extends React.Component {    handleFormSubmit = e => {       e.preventDefault();       console.log(“Entered value: ”+exampleInputRef.current.value);    };    render() {       return (                       this.handleFormSubmit(e)}>                 ... Read More

Context api in React.js

Shyam Hande
Updated on 04-Sep-2019 14:41:40
The React context api is safe to use in production with the version 16.3 or latest. The reason for adding context api is to avoid the passing of props if there is a chain of children components.Without the use of context api, we have to pass the props through all the intermediate components. The other alternative solution is to use third party library such as Redux for maintaining a central store.Understanding the passing of props problemApp.js → props for books → BookList.js → passing the books as props again → Book.jsWith the increase in number of children components, the chain ... Read More

Why need build workflow in React.js

Shyam Hande
Updated on 04-Sep-2019 14:34:28
BUILDING A WORK-FLOW HELPS IN DOING BELOW THINGSIt optimizes codeUsing next-gen JavaScript (ES6)Its a standard way for single/multiple page appsProductive approachEasy integration of dependencies with NPM or YarnUse of bundler like web-pack for easier modular code and shipping codePre compiler like BabelWe can use a local development server to test appBuilding workflow looks complex but React community has made it simple for us with a single commandcreate-react-app.To use create-react-app, we will need to have node js install on our machine.You can check if node is installed using below command on terminal −node –versionIf not installed already, please install the latest ... Read More