Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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 More
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 More
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 More
In simple html form, the form elements keeps value with it internally and submit on form submission button.Example Form Example User Name: In above example, we have a simple input called username and we can receive its value on form submission. The default behavior of html form is to navigate to new page i.e. the post form submission page.But it can give more advantage if we have a form submission handler JavaScript function which can validate the form data as ... Read More
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 More
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 More
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 More
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 More
Here we will see some search trees and their differences. There are many different search trees. They are different in nature. The basic search tree is Binary Search Tree (BST). Some other search trees are AVL tree, B tree, Red-Black tree, splay tree etc.These trees can be compares based on their operations. We will see the time complexity of these treesSearch TreeAverage CaseInsertDeleteSearchBinary Search TreeO(log n)O(log n)O(log n)AVL treeO(log2 n)O(log2 n)O(log2 n)B TreeO(log n)O(log n)O(log n)Red-Black TreeO(log n)O(log n)O(log n)Splay TreeO(log2 n)O(log2 n)O(log2 n)Search TreeWorst CaseInsertDeleteSearchBinary Search TreeO(n)O(n)O(n)AVL treeO(log2 n)O(log2 n)O(log2 n)B TreeO(log n)O(log n)O(log n)Red-Black TreeO(log n)O(log n)O(log n)Splay ... Read More
The graph is a non-linear data structures. This represents data using nodes, and their relations using edges. A graph G has two sections. The vertices, and edges. Vertices are represented using set V, and Edges are represented as set E. So the graph notation is G(V, E). Let us see one example to get the idea.In this graph, there are five vertices and five edges. The edges are directed. As an example, if we choose the edge connecting vertices B and D, the source vertex is B and destination is D. So we can move B to D but not ... Read More