Posts

Showing posts from December, 2021

Understanding and Implementing Schemas in Python

-
Understanding and Implementing Schemas in Python Introduction In the world of programming, particularly in the context of data management and validation, schemas play a vital role. A schema is essentially a blueprint or a predefined structure that defines the expected format, data types, and constraints for a given data entity. In this blog, we will delve into the concept of schemas in Python, exploring what they are, why they are important, and how you can implement them in your projects. What is a Schema? A schema serves as a contract between different components of a system, ensuring that data is consistent, valid, and well-structured. It defines the rules for how data should be organized, what fields it should contain, and what types of values those fields can hold. In essence, a schema acts as a set of rules that data must adhere to in order to be considered valid. Why Are Schemas Important? Data Validation: Schemas provide a way to validate incoming data. When data is received o
Post a Comment
Read more

Passing URL parameters to a route using useParams in react-router-dom version 6

-
Image
Passing URL parameters to a route using useParams() hook in react-router-dom version 6. a) The useParams hook from react-router allows you to access dynamic parameters in the URL. b) You may come across situation that you want to access the parameters of the current route so in this case, useParams hook comes into action. Note: In order to create basic setup for react js application, please go through following link. Environment Setup and Installation for React Js Application Passing-url parameters to route using react router dom version 6 Folder Structure: Installation:  npm install react-router-dom --save Sample Code: A) index.js import   React   from   "react" ; import   ReactDOM   from   "react-dom" ; import   App   from   "./App" ; ReactDOM . render ( < App   /> ,  document . getElementById ( "root" )); B) App.js import   React   from   'react' ; import   './style.css' ; import  {     Routes ,     Route ,     BrowserRo
Post a Comment
Read more

Routing in React using React-Router Version 6

-
Image
 Routing in React using React-Router Version 6 What is Routing? - The process of navigating a user to different pages based on their request is known as routing. - Routing is a process of binding a web URL to specific resource. In react we can say, "it is a binding of URL to a specific component. - As react is a user interface library, it does not support routing. - In this post, we will learn about "routing in react using  react-router-dom  library version 6". Install React Router Command npm install react-router-dom --save Main component used for Navigation 1) BrowserRouter as Router - top level component  2) Routes - Replacement of Switch component. 3) Route - child component of Routes, useful for mapping a specific URL to a component. 4) Link - Similar to anchor tag in html. Note:  Switch Component is deprecated from version 6. The new component is introduced called as  Routes . Multiple Routing in React Js Installation:  npm install react-router-dom --save Sample Co
Post a Comment
Read more

Environment Setup and Installation for React Js Application

-
Image
Environment Setup and Installation for React Js Application In this post, you will learn about “how to set up an environment for React Application”. There are many steps involved, in which first and important step is to install Node Js and npm.                Install Node Js -  Node Js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine. - After invention of Node Js, we are able to execute JavaScript code outside a web browser. - NPM will be installed along with Node Js. - Node Js can be downloaded and installed from official Node Js website: https://nodejs.org/en/ -         After successful installation of Node Js, Open Command Prompt in order to check its version as shown in below. Install Create-React-App -         Second step is to install a tool called Create-React-App using NPM which will be useful for creating react application easily from our system. -         You can install this at the system level or global level. -         W
1 comment
Read more

Create a ToDo App using React Js and Redux | Interview Question

-
Image
Create a ToDo App using React Js and Redux | Interview Question In one of my previous post, I had created To Do app using only React Js . But in this post, I am going to show you "how to create a same to do app using React js and Redux ( as state management library ) As we all know, Redux is an open source JavaScript library for managing and centralizing application state. Redux is predictable state container for JavaScript apps. Following is the UI functionality of the application but using Redux only. Todo App using React-Redux Dependency: To use react-redux with your React Application, install it as a dependency: npm install react-redux Sample Code: A) index.js import   React   from   'react' ; import   ReactDOM   from   'react-dom' ; import  {  createStore  }  from   'redux' ; import  {  Provider  }  from   'react-redux' ; import   todoReducer   from   './reducers' ; import   App   from   './App' ; const   store  =  createStore (
6 comments
Read more

Interview Question | React Js

-
Image
Interview Question | React Js  Recently, I had given one interview in React Js & one of the member from interview panel had given me following task to complete. Task contains following requirements to complete: a) Initially, show 7 rectangle boxes in white color & all should be clickable. b) Once you click rectangle box, show that in green color. c) As soon as, you click seventh rectangle box, make all rectangle boxes white again after some time interval in reverse order. Sample Code: A) App.js import   React , {  useState ,  useEffect  }  from   'react' ; import   './style.css' ; const   rectangle  = [   {  rectId:   1 ,  rectColor:   'white'  },   {  rectId:   2 ,  rectColor:   'white'  },   {  rectId:   3 ,  rectColor:   'white'  },   {  rectId:   4 ,  rectColor:   'white'  },   {  rectId:   5 ,  rectColor:   'white'  },   {  rectId:   6 ,  rectColor:   'white'  },   {  rectId:   7 ,  rectColor:   'white'
Post a Comment
Read more