Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
In this article, we will see how to make a metallic texture cubic box in React JS using React-Three-Fiber package. First, we will download a metallic photo and then we will apply it over all the surfaces of a cube. Cubes are basic shapes but we can make them look attractive by wrapping an image over its surfaces. So, let's get start.ExampleFirst download and install the following packages −npm i --save @react-three/fiber threethreejs and react-three/fiber will be used to add webGL renderer to the website and three-fiber will be used to connect threejs and React.Now let's download a metallic image ... Read More
Drag and Drop interfaces enable web applications to allow users to drag and drop files on a web page. In this article, we will see how an application can accept one or more files that are dragged from the underlying platform's file manager and dropped on a web page. Here, we will be using the react-dropzone package. Let's get started.ExampleFirst of all, create a React project −npx create-react-app newprojectGo to the project directory −cd newproject Now download and install the react-dropzone package −npm i --save react-dropzoneWe will use this library to add a droppable area inside our React element's area. ... Read More
In this article, we will see how to draw flowchart-like arrows to connect different DOM elements in React JS. You can use this feature to create a unique web design. Here we will use the react-archer package to draw arrows to connect the DOM elements.A DOM element is something like a DIV, HTML, BODY element on a page. You can add classes to all of these using CSS, or interact with them using JS.ExampleFirst create a React project −npx create-react-app tutorialpurposeNow go to the project directory −cd tutorialpurposeDownload and install the react-archer package −npm install react-archerWe will use the react-archer ... Read More
Use the colDrop() method of pdpipe library to remove a column from Pandas DataFrame. At first, import the required pdpipe and pandas libraries with their respective aliases −import pdpipe as pdp import pandas as pdLet us create a DataFrame. Here, we have two columns −dataFrame = pd.DataFrame( { "Car": ['BMW', 'Lexus', 'Audi', 'Mustang', 'Bentley', 'Jaguar'], "Units": [100, 150, 110, 80, 110, 90] } )To remove a column from the DataFrame, use the ColDrop() method. Here, we are removing the “Units” column −resDF = pdp.ColDrop("Units").apply(dataFrame) ExampleFollowing is the complete code − import pdpipe as ... Read More
In this article, we are going to build a text editor in React JS, where users can edit their text online. Many websites offer this feature. A text editor is used to edit plain text files. Text editors differ from Word processors, such as Microsoft Word or WordPerfect, in that they do not add additional formatting information to documents.ExampleFirst create a React project: −npx create-react-app tutorialpurposeNow go to the project directory −cd tutorialpurposeDownload and install the following packages −npm install --save react-draft-wysiwyg draft-jsWe will use this package to include a "wysiwyg" editor inside our React project. draft-js will be used ... Read More
In this article, we are going to create a React app which will show a map without any third-party API. You can edit the map's width and height, add markers to it, and do many more amazing things. We will use the pigeon-maps package to create the map. So, let's get started.ExampleFirst create a React project −npx create-react-app tutorialpurposeNow go to the project directory −cd tutorialpurposeDownload the install the pigeon-maps package −npm install --save pigeon-mapsWe will use this package to add default maps which are downloaded with library inside the React project.Add the following lines of code in App.js −import ... Read More
In this article, we will see how to create an Airbnb rheostat. Rheostat is a www, mobile, and accessible slider component built with React. Rheostat is a scrollbar where you can slide the pointer to select some values or decide a range of values.ExampleFirst create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeDownload and install the rheostat package −npm install rheostatWe can use this package to include premade rheostats with default functions inside a React project.Insert the following lines of code in App.js −import React from "react"; import Rheostat from "rheostat"; import "rheostat/initialize"; import "./App.css"; export ... Read More
In this article, we will see how to create a plane in React using React-Three-Fiber. Planes are widely used shapes in 3D rendering. We will create a 2D plane for now, but you can add orbital controls in it to make it 3D. We will also use lighting and different colors. Let's get started.ExampleFirst install the following package −npm i --save @react-three/fiber threethreejs and react-three/fiber will be used to add webGL renderer to the website and three-fiber will be used to connect threejs and React.Add the following lines of code in App.js −import { Canvas } from "@react-three/fiber"; export ... Read More
To compute first of group values, use the groupby.first() method. At first, import the required library with an alias −import pandas as pd;Create a DataFrame with 3 columns −dataFrame = pd.DataFrame( { "Car": ['BMW', 'Lexus', 'BMW', 'Tesla', 'Lexus', 'Tesla'], "Place": ['Delhi', 'Bangalore', 'Pune', 'Punjab', 'Chandigarh', 'Mumbai'], "Units": [100, 150, 50, 80, 110, 90] } )Now, group DataFrame by a column −groupDF = dataFrame.groupby("Car") Compute first of group values and resetting index −res = groupDF.first() res = res.reset_index()ExampleFollowing is the complete code − import pandas as pd; dataFrame = pd.DataFrame( { ... Read More
In this article, we will see how to make a customizable modal in React JS with multiple buttons which can be used in many types of projects like on landing pages or travel websites. A modal is a message box that is displayed on top of the screen. We can use Modals as a subscription box; we can also add animation to a Modal using CSS.ExampleFirst create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeDownload and install the react-modal package −npm i --save react-modalWe can use this package to add simple premade modals inside any React ... Read More