DEV Community: PARMITA UPADHYAY

useState Hook in React

PARMITA UPADHYAY — Tue, 12 Sep 2023 15:35:33 +0000

To handle multiple states using the useState hook in react, you can call the useState function multiple times, once for each state you want to manage. Here's an example:

import { useState } from 'react';
function MyComponent(props){
const [count,setCount] = useState(0);
const [text, setText] = useState('');
function handleIncrement(){
setCount(count + 1);
}
function handleTextChange(event){
setText(event.target.value);
}
return (
<div>
<P>Count : {count}<p>
<button onClick = {handleIncrement}>Increment</button>
<br />
<input type="text" value= {text} onChange ={handleTextChange}/>
<p> Text: {text}</p>
</div>
);}

In this example , we're managing two states using useState:count and text. We're also defining two functions : handleIncrement, which updates the count state when a button is clicked, and handleTextChange , which updates the text state when the text input changes.
By calling useState twice , we're creating two independent pieces of state that can be managed separately. We're also using destructing to assign the current value of each state and its corresponding setter and its corresponding setter function to separate variables(count and setCount, and text and setText).
Overall, using multiple useState hooks can help you manage multiple pieces of state in a clean and organized way.
Other Alternative:
We can also manage multiple states using a single useState hook by passing an object as the initial state and using destructing to access individual state variables and their corresponding update functions.
Here's an example:
import {useState} from 'react';
function MyComponent(props){
const[state, setState] = useState({count: 0, text: ''});
function handleIncrement(){
setState(
prevState => ({ ...prevState, count: prevState.count + 1})
);}
function handleTextChange(event){
setState(
prevState =>({ ...prevState, text: event.target.value}
));
}
return (
<div>
<p> Count: {state.count}</p>
<button onClick ={handleIncrement}>Increment</button>
<br/>
<input type="text"
value={state.text} onChange ={handleTextChange} />
<p>Text: {state.text}</p>
</div>);}

In this example, we're still managing two pieces of state(count and text), but we're using a single useState hook to initialize both states as properties of an object(state). We're also using destructing to access individual state variables(count and text) and their corresponding update functions(setState).

To update a piece of state, we're using the functional update form of setState, which takes a callback function that receives the previous state as an argument and returns the new state. We're spreading the previous state using the spread operator(...prevState) to create a new object with all the previous state properties, and then updating the property we want to change(count or text) using object property shorthand.

Using a single useSate hook to manage multiple pieces of state can be a convenient way to keep related state together and reduce boilerplate code. However, it can also make code more complex and harder to read, especially if you have many pieces of state or complex state updates. So it's up to you to decide which approach works best for you for your specific use case.

What is API & REST API ?

PARMITA UPADHYAY — Sun, 10 Sep 2023 18:00:01 +0000

An API, or Application Programming Interface, is set of rules i.e. protocols for building and interacting with software application.
It allows different software systems to communicate with each other, enabling them to share data and functionality.
An example of an API is the Facebook API, which allows developers to access and interact with functionality of the Facebook platform such as posting status updates, retrieving user information, and managing ad campaigns. Another example is the Google Maps API, which allows developers to embed maps and location-based functionality in their own websites and apps.
How an API Works:
APIs acts as a bridge between applications and web servers, processing data transfer between systems. When a client application initiates an API call, also known as request, it is sent to the web server via the API's Uniform Resource Identifier(URI) and includes a request verb, headers and sometimes a request body. The API then processes the request and may make a call to an external program or web server for the requested information.
The server responds with the requested data, which the API then forwards to the initial requesting application. This process of requests and responses all happens through the API. Unlike user interfaces which are designed for human use, APIs are designed for use by computers or applications.

REST API: Representational State Transfer
REST is a type of web architecture and a set of constraints to be used when creating web services. RESTful API is API that conforms to the REST architectural style and constraints, it is typically used to make requests to retrieve or update data on a web server. A RESTful API uses HTTP requests to POST(create), PUT(update), GET(read), and DELETE(delete) data. A RESTful API also returns a response in a standard format, typically JSON or XML, and uses standard HTTP status codes to indicate the status of the request. RESTful APIs are popular because they are simple to understand and easy to use, and they work well with the HHTP protocol that the internet is built on. Additionally, RESTful APIs are often faster and more lightweight than their SOAP(Simple Object Access Protocol) counterparts because they use smaller message formats. RESTful API's have become a popular way for systems to expose databases through HTTP(s) following CRUD operations(Create, Read, Update, Delete), and return JSON or XML as responses, it's also widely used in microservices, mobile and web applications, IoT
and many more.
REST requires that a client make a request to the server in order to retrieve or modify data on the server.
A request generally consists:

An HTTP verb, which defines what kind of operation to perform.
A header, which allows the client to pass along information about the request.
A path to a resource.
An optional message body containing data.

How to become a Bug Bounty Hunter

PARMITA UPADHYAY — Thu, 07 Sep 2023 07:42:47 +0000

Introduction
With cyber threats becoming increasingly sophisticated, organizations and individuals are seeking skilled bug hunters to identify vulnerabilities before malicious hackers can exploit them.

1.Understand the basics of bug Hunting
The first step towards becoming a bug hunter is to grasp the fundamentals. Bug hunting involves actively seeking vulnerabilities in software application or systems. As an ethical hacker, your objective is to identify and report the weakness to the responsible parties, allowing them to fix the issue.

2. Develop a Strong Foundation in Networking & Programming
A strong understanding of network protocols and programming languages is indispensable for success in bug hunting. Familiarize yourself with languages like python, JavaScript, C/C++ , along with the concepts of HTML,CSS and Databases. Additionally, grasp the workings of TCP/IP , DNS,HTTP, and other fundamental networking protocols to navigate various systems effectively.

3. Learn about Web Application Security
Web applications are prime targets for malicious actors in today's landscape. Familiarize yourself with common web application vulnerabilities like Cross-Site Scripting(XSS) , SQL injection , Cross-Site Request Forgery(CSRF) and more. Explore security testing methodologies, tools and fundamentals such as Burp Suite ,OWASP Zap and Nmap.

4. Stay Updated on the Security Trends
Staying up to date with latest trends and emerging threats is vital in dynamic world of cybersecurity. Follow reputable security blogs, podcast and websites. Engage with the cybersecurity community through forums, social media, and bug bounty platforms.

5. Participate in Bug Bounty Programs
Bug bounty programs offer an excellent platform for showcasing your skills and earning rewards. Platforms like HAckerOne, Bugcrowd , HackTheBox , TryHackme and synack connect ethical hackers with organisations willing to reward them for discovering bugs.
what is Responsible disclosure?
Responsible disclosure is the process of reporting vulnerabilities to the affected organization or vendor in a way that minimizes harm. This can be done by following the organization's vulnerability disclosure policy , or by contacting the organization directly.

6. Work on Personal Projects
Enhance your bug-hunting abilities by working on personal Projects. Build a secure web application and attempt to identify vulnerability on your own.

7. Pursue Relevant Certifications
Strengthen your credibility as a bug hunter by obtaining industry recognized certifications. Certifications like Ethical Hacker(CEH) , Offensive Security (OSCP) and web application penetration tester (WAPT) demonstrate your expertise and dedication to ethical hacking.

With the right knowledge, technical skills, and ethical mindset , you can embark on an exciting journey as a bug hunter.

All about FLEX

PARMITA UPADHYAY — Tue, 05 Sep 2023 19:35:20 +0000

Display : The display enables flex for all children(inner components of html).
By doing this the direct child elements of a flex container automatically becomes flexible (flex) items.

Flex-direction -->Establishes the main axis.

flex-direction : row ->this is default property of flex,all items will appear in one single row.
flex-direction : row-reverse -> this acts same as row but in opposite direction.
flex-direction : column -> all elements appear in single column.
flex-direction : column-reverse -> as name suggest acts like column but in opposite direction i.e. form bottom to top.

flex-wrap --> wrap items if they can't all be made to fit on one line.

flex-wrap : nowrap -> as name suggest no wrapping is done.
flex-wrap : wrap -> content that doesn't fit in single line will be moved to next line.
flex-wrap : wrap-reverse -> the content fits in reverse order i.e. from last line to second last line.

Justify-content --> Attempts to distribute extra space on the main axis i.e. horizontal axis of webpage.

justify-content : flex-start -> all the elements will be on left side with no spaces in between.
justify-content : flex-end -> all the elements will be on the right side with no spaces in between.
justify-content : centre -> all the elements will be placed at the centre.
justify-content : space-between -> as the name suggests space left in entire web page/ view port is equally divided between the elements i.e. any two elements will have same space between them.
justify-content : space-around -> it is same as space-between but space is also present at ends in same amount as in between.
justify-content : space-evenly -> same is divided and alloted between element and remaining space in present at the two left and right corners.

Align-items --> Determines how items are laid out on the cross axis i.e. vertically

align-items :flex-start -> all items are horizontally at top.
align-items :flex-end ->all items are horizontally at bottom.
align-items :flex-center -> all items are horizontal and placed at center.
align-items :baseline -> all are placed at same level from a same reference line.
align-items :stretch -> all items are stretch from top to bottom.

Align-content --> Only has an effect with more than one line of content, can be used with flex-wrap.
It also has same properties as start, end, center, space-between, space-around, stretch.

children
Order --> allows you to explicitly set the order you want each child to appear in.
order: integer

flex-grow --> allows you to determine how each child is allowed to grow as a part of a whole

flex-basis --> defines the size of an element before remaining space is distributed.
e.g. first item 20%,second item 40%.

flex-shrink --> allows an item to shrink if necessary. Only really useful with a set size or flex-basis.

align-self --> sets alignment for individual item.

Learn about knockoutJS

PARMITA UPADHYAY — Mon, 04 Sep 2023 18:46:36 +0000

Knockout is a library written in JavaScript and based on MVVM (MODEL VIEW VIEWMODEL) pattern. It helps in building rich and responsive websites. It works with any framework and handles data driven interfaces.
KO is the abbreviated name of Knockout. The KO library file is small and light-weight.
Knockout. js creates a direct connection between the ViewModel and the view, which helps to detect changes to the underlying model and automatically update the right element of the UI.
Syntax :

View Model :

OUTPUT :

Discussion for the Program:
VIEW:
We have an input box: What is your Name. This variable is initialized with value What is your Name View Model, i.e.,
First Line indicates that we are inputting data using the data-bind attribute, i.e. we are using HTML controls, to make the data editable but this won’t update the data at the time of showing Name on Screen.
Second Line is just printing Name on the Screen, this is how we are binding values from View Model to HTML elements using ‘data-bind’ attribute in the body section. Here, ‘Name’ refers to the View Model variable.
VIEW MODEL:
First Line is just a name to a function (This is how functions are written).
The Third Line is assigning to View Model properties.
The fifth Line is the binding View Model to View.

Nowadays developers prefer using Vue.js...
but these are some advantages of using knockout.JS:

Feasible to connect anytime with the UI elements in the data model.
Ensures application of business rules, data security and more control on the webpage.
Offers referential integrity and many validation features in regard to the workflow for additional security.
Supports event-driven programming model and offers 100% customization.
Create complex and dynamic data models with ease.