Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 648 of 652
Functional Components Vs. Class Components in ReactJS
Functional Components or stateless components are the most widely used type of components with a basic syntax of JavaScript Functions that return the JSX code or the HTML code.They are called as stateless components because they accept the data and display it accordingly and are mainly responsible for the rendering of the UI.Exampleimport React from ‘react’; const App=()=>{ return ( TutorialsPoint ) } export default AppOutputClass based or stateful Components are the ES6 classes that extend the component class of the react library. They are ...
Read MoreDebugging ReactJS applications
While building a real-world application, the most important thing that a developer should know is how to properly debug the React application. There are many ways to debug our React application and some of the proven methods are explained below −Using Code LinterTools like ESLint help to write better and clean codes, as it follows proper guidelines which prevent errors at the time of developing the codes.Using React Developer ToolsThis tool comes very handy while debugging ReactJS applications, as it allows to navigate through the Component Tree and allows to take a look at the state or the props or ...
Read MoreCSS Loader in ReactJS
In this article, we will learn how to provide dynamic class names to our React application.StepsNpm run ejectThis command will allow us to customize the configurations and the options that were predefined when we run the command of create-react-app. It is a one-sided operation that can’t be undone later on.Change Webpack configurationsWe need to configure the webpack loaders so as to enable css-loader which will then provide dynamic naming to our classes.Set the configurations as −{ test: /\.css$/, loader: 'style-loader' }, { test: /\.css$/, loader: 'css-loader', query: { modules: true, ...
Read MoreHow to set new id attribute with jQuery?
To implement this, extract id from attr() and use replace() to replace the id attribute.ExampleFollowing is the code − Document $('[id*="-"]').each(function () { console.log('Previous Id attribute: ' + $(this).attr('id')); $(this).attr('id', $(this).attr('id').replace('-', '----')); console.log('Now Id Attribute: ' + $(this).attr('id')); }); To run the above program, save the file name “anyName.html(index.html)”. Right click on the file and select the option “Open with Live Server” in VS Code editor.OutputThis will produce the following output −Following is the value on console −
Read MoreFinding closed loops in a number - JavaScript
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 MoreJavaScript - Constructs a new array whose elements are the difference between consecutive elements of the input array
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 MoreCalculate compound interest in JavaScript
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 MoreStandalone React.js basic example
Lets first start with writing a simple HTML code and see how we can use ReactBasic React example − Create a simple div like below − Steve My hobby: Cricket Add some styling elements.player{ border:1px solid #eee; width:200px; box-shadow:0 2px 2px #ccc; padding: 22px; display:inline-block; margin:10px; }This is just like normal html data in web app. Now, we may have multiple same players and we then have to replicate the same div like below David My hobby: Cricket These div are same in structure but having different data inside. Here, ...
Read MoreWhat are Pure HTML export buttons in jQuery Data Table?
jQuery Data Table provides export buttons with the help of which we can make a structure like the following −Export PDFExport CSVExport HTMLExport ExcelFor this, we need to write code −var tbl = $('#extable').DataTable({ dom: 'export', buttons: [ { extend: 'collection', text: 'Export', buttons: [ 'csvHtml5', ' pdfHtml5', 'copyHtml5', 'excelHtml5' ] } ] });
Read MoreHow do I use jQuery effects?
For hiding and showing the div, you can use hide and show method.For hiding$('#id1').hide();For showing$('#id1').show();Example showhide $(document).ready(function () { $('#btn1').click(function () { $('#id1').hide(); }); $('#btn2').click(function () { $('#id1').show(); }); }); I Am A Simple Paragraph Hide Show MethodDescriptionanimate()Runs a custom animation on the selected elementsclearQueue()Removes all remaining queued functions ...
Read More