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 652 of 652
Accessibility in React.js
The aria-* attributes on html elements are also supported in React.js as well. The other attributes are generally written in camel-case but these aria-* are written in hyphen-cased.Sometimes we break the semantics of the html if we use parent div in React.jsExamplerender(){ return( Test ); }Div can cause semantics issue if working with table, list etc. To avoid this we can use React provided fragment as shown below −import React, { Fragment } from ‘react’; function MessageList({ message }) { return ( ...
Read MoreThinking in React.js
React community has provided a direction on how to think in React way and build big , fast and scalable applications. React has reached multiple platforms and widely used a popular JavaScript UI interface library.Step 1 − Creating a simple mock serviceIf we need to make a server call and fetch data. We can create a mock service to start with and build a component to fetch and display data.Here we can include the processing of json in component and evaluating the expected result.Step 2 − Break the functionality into smaller componentsThe first Thing React suggest is to create the ...
Read MoreComposition vs inheritance in React.js
Composition and inheritance are the approaches to use multiple components together in React.js . This helps in code reuse. React recommend using composition instead of inheritance as much as possible and inheritance should be used in very specific cases only.Example to understand it −Let’s say we have a component to input username.Inheritanceclass UserNameForm extends React.Component { render() { return ( ); } } ReactDOM.render( < UserNameForm />, document.getElementById('root'));This sis simple to just input ...
Read MoreLifting state up in React.js
Often there will be a need to share state between different components. The common approach to share state between two components is to move the state to common parent of the two components. This approach is called as lifting state up in React.jsWith the shared state, changes in state reflect in relevant components simultaneously. This is a single source of truth for shared state components.ExampleWe have a App component containing PlayerContent and PlayerDetails component. PlayerContent shows the player name buttons. PlayerDetails shows the details of the in one line.The app component contains the state for both the component. The selected ...
Read MoreWorking with lists and keys in React.js
Displaying a list on UI in ReactMap is JavaScript function which will return a new array for provided array as shown below −const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbers = originalNumbers.map( (number)=> number * number); console.log(“Squared Numbers==”squaredNumbers);Building a list in React is similar with the use of map function. Instead of just returning a square number , we will return a list element with value of square.const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbersList= originalNumbers.map((number) => {number*number} );Render on the screen with ui tag −ReactDOM.render( { squaredNumbersList }, document.getElementById('root') );When ...
Read MoreHandling events in React.js
There are some syntactical differences in writing events but it is handled similar to DOM elements event handling.The name of event handlers are written in camel case notations.ExampleEvent in simple html − Add User Event in React with jsx: Add User One of the difference is we do not write return false to prevent default behavior in React. Instead of that we specifically write event.preventDefault()ExampleIn simple Html − Add User In React it will be written as −function addUser(event){ event.preventDefault(); console.log(‘Add user event clicked’); } Add User Here event passed in ...
Read MoreRendering elements in React.js
The smallest building blocks of React applications are the elements. Example of an element is −const message = Welcome, Steve;React DOM updates the actual DOM with the converted react elements. React components are made up of elements.Rendering element on DOMWe will have a parent div element in the main html file . This div can be called as root. ReactDOM manages everything which is inside the app div. We can add multiple such an isolated div in applications if required.To render the element it will be passed to the ReactDOM render method −const message = Welcome, Steve; ReactDOM.render(message, document.getElementById('app'));This will ...
Read MoreDisplay hello world using React.js
create-react-app is a command to create a React.js project with default configuration. Create-react-app will help in running react applications. Command will be executed on npm or yarnIf npm and node.js is installed on computer, install create-react-app globally with command −npm install –g create-react-appCreation of project − to create a project once above commands are executed, run below command −npx create-react-app hello-world-examplenpx comes with npm version 5.2+ , npm version can be checked on terminal using npm –versionIf npm version is 5.2+, then react.js project can be directly created with command −npx create-react-app hello-world-exampleIf npm version is 6+, npm init react-app ...
Read MoreWhen to use (document).ready() and when (window).load() in jQuery?
$(window).load()Use $(window).load(), when you want the code inside it to run only once the entire page is ready (not only DOM). It executes when the page is fully loaded, including frames, objects and imagesNote: The load() method deprecated in jQuery version 1.8. It was completely removed in version 3.0. To see its working, add jQuery version for CDN before 3.0.$(document).ready()Use the $(document).ready() method when you want the code inside it to run once the page DOM is ready to execute JavaScript code.
Read More