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
Articles by Rahul Bansal
Page 3 of 3
ReactJS – Fragments
While building a ReactJS application, all the JSX code needed to be wrapped down inside a parent tag.ReactJS Fragments were introduced with React 16.2 version to remove the need to define an extra tag which also takes extra memory.Without FragmentsThe following sample code shows how to create a simple React application without React Fragments.ExampleApp.jsximport React from 'react'; class App extends React.Component { render() { return ( TutorialsPoint Simply Easy Learning ...
Read MoreReactJS – Component vs PureComponent
In this article, we are going to see the difference between Component and PureComponent. In ReactJS, Components are widely used to make an App more efficient and effective to use.ReactJS provides two different ways to use components – Component or PureComponent.ComponentIt is the type of component which re-renders itself every time when the props passed to it changes or its parent component re-renders.Our first component in the following example is App. This component is the parent of the Comp1 component. We are creating Comp1 separately and just adding it inside the JSX tree in our App component. Only the App ...
Read MoreReactJS – Cleaning up with useEffect hook
In this article, we are going to see how to clean up the subscriptions set up in the useEffect hook in the functional component.Once the effects are created, then they are needed to be cleaned up before the component gets removed from the DOM. For this, cleaning up effect is used to remove the previous useEffect hook’s effect before using this hook of the same component again.SyntaxuseEffect(()=>{ return ()=>{} } ,[]);ExampleIn this example, we will build a React application which displays the coordinates of the mouse pointer when it is moved over the screen. For this to implement, we ...
Read MoreImport Files and Images in ReactJS
In this article, we are going to see how to import CSS Files, images and functions defined in other folder to the main App.js file.In React, we need to dynamically import the images from their folder.ExampleIn this example, we will define a project structure with the images and components already defined in the assets and components folder and then we are going to dynamically import them in our main App.js file.Project StructureApp.jsimport React from 'react'; import MyComponent from './components/my -component.js'; import TutorialsPoint from './assets/img.png'; const App = () => { return ( ...
Read MoreHTTP Requests with axios in ReactJS
In this article, we are going to learn how to send and receive Http Responses with axios in a React application.Why Use axios?Automatic conversion of response to JSON formatEasy to use and more secureSetting up global HTTP interceptorsSimultaneous RequestInstalling the modulenpm install axiosORyarn add axiosNpm is the node package manager which manages our React package but yarn is the more secure, faster and lightweight package manager.Sending GET requesthttps://jsonplaceholder.typicode.com/todos/1Jsonplaceholder is a fake API which is used to learn the process of the sending requests.ExampleApp.jsximport React, { useEffect, useState } from 'react'; const App = () => { const [data, setData] = useState(null); const ...
Read MoreHow to use Radium in ReactJS?
In this article, we are going to see how to apply inline styling to a component in a React application.Radium is a popular third package application used to add inline styling and pseudo selectors such as :hover, :focus, :active, etc. to a JSX element.Installing the modulenpm install --save radiumORyarn add radiumNpm is the node package manager which manages our React package but yarn is the more secure, faster and lightweight package manager.ExampleApp.jsximport Radium from 'radium'; import React from 'react'; function App() { const style = { ':hover': { backgroundColor: '#000', ...
Read MoreHow to update parent state in ReactJS?
In this article, we are going to see how to update the parent state from a child component in a React application.To update the parent state from the children component, either we can use additional dependencies like Redux or we can use this simple method of passing the state of the parent to the children and handling it accordingly.ExampleIn this example, we will build a React application which takes the state and the method to update it from the parent component and pass it to the children component and after handling it we will pass the updated state to the ...
Read MoreFunctional 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 More