In this tutorial, we’ll be learning How to Use and Implement Context and useContext Hooks with example React’s Hooks

How to Use and Implement Context and useContext Hook with example React Hook’s
How to Use and Implement Context and useContext Hook with example React Hook’s

Before we start please find below the important definitions:

Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

a) Context — Context provides a way to pass data through the component tree without having to pass props down manually at every level. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

When…


In this tutorial, we’ll be learning how to add a docker to Create-React App and run the unit tests.

Before we start please find below important technologies definitions.

1. Docker —

Docker is a popular open-source project written in go and developed by Dotcloud (A PaaS Company).

It is basically a container engine that uses the Linux Kernel features like namespaces and control groups to create containers on top of an operating system.

Docker is an open platform for developing, shipping, and running applications.

Docker enables you to separate your applications from your infrastructure so you can deliver software quickly.

With Docker, you can manage your infrastructure in the same ways you manage your applications

Official links for Docker

https://docs.docker.com/get-started/overview/

2. What is Kubernetes vs Docker?

A fundamental difference between Kubernetes and Docker is that Kubernetes is meant to run across…


In this tutorial, we’ll be learning Simple Data Fetching in React with the Fetch API and Axios with React- Hooks (useEffect and useState)

Fetch API , Data Fetching , React Hooks , UseState and UseEffect , Axios
Fetch API , Data Fetching , React Hooks , UseState and UseEffect , Axios

Before we start please find below the important definitions:

Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

a) useState : is the first “Hook” and TheState Hookis a Hook that lets you add React state to function components

b) useEffect : The Effect Hook lets you perform side effects in function components:

Side Effects ???” — Data fetching, setting up a subscription…


Dear friends,

— 👋 #OfferingHelp: Career Coaching, Volunteer Work
As we all know we are going through a very difficult time in our life due to COVID-19.

I am offering help for those who want to learn React Js, HTML, Javascript as an absolute beginner or intermediate.

I am planning to teach over weekends (FREE OF COST ) with true industrial experience, MNC Project Style exposure, Coding guidelines, Git, etc

EST Timings- (early morning or after 10 PM EST) (2–3 person max ).
If someone is interested please ping me or msg me.

or

if you need food service #himachalpradesh #mandi #india


Azure az-900 Azure fundamentals Certification Exam
Azure az-900 Azure fundamentals Certification Exam

In this tutorial, we’ll be learning how to prepare the AZ-900 Exam.

Before we start we should know first know about why cloud and why Azure :)

Why Cloud — Simple because of below points

  • Develop for unpredictability.
  • Develop with costs in mind.
  • Scale your applications.
  • Scale your data.
  • Create a monitoring and diagnostics pipeline.
  • Develop for resiliency.
  • Script your environments.
  • Choose the right services.

Why Azure

Azure facilitates easy mobility and a reliable consistent platform between on-premise and public Cloud.


CSS CSS3 Flex Box Grid
CSS CSS3 Flex Box Grid

In this tutorial, we’ll be learning how to Center div with CSS :)

Before we start we should know first know about the CSS and terms which we are going to use to provide a solution.

CSS

CSS stands for Cascading Style Sheets

It allows us to create rules that specify how the content of an element should appear

It makes your web pages more attractive

It also control the design of element using with css.

a) CSS flexbox

It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS

b) Positions :

The position - CSS property sets…


Development and Testing Tools

Starting with Browser Testing Tools (accessibility in the browser)

1. WAVE — Web Accessibility Evaluation

The WAVE Chrome and Firefox extensions allow you to evaluate web content for accessibility issues directly within Chrome and Firefox browsers. Because the extension runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting.

Download Link: https://wave.webaim.org/extension/

Chrome Extension: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

a) Install the extension (by clicking Add to chrome button)

b) It will look like this


PWA’s

  • Progressive enhancement: It works for every user no matter the browser choice of the user.
  • Native-like experience: It provides a mobile-like experience. …
  • Responsiveness: It can match to fit any screen size be it a tablet, mobile, iPad, or desktop. …
  • Offline support: Your app can work offline

Create-React-App —

  1. Set up a React app

Create a new project with create react app with below steps

// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();


Photo by Daniel Ali on Unsplash

Accessibility can be viewed as the “ability to access” and benefit from some system or entity. Accessibility refers to the design of products and environments for people with disabilities.

Examples include wheelchairs, entryway ramps, hearing aids, and braille signs.

  1. ADA = compliance refers to the Americans with Disabilities Act Standards for Accessible Design, which states that all electronic and information technology (like websites) must be accessible to people with disabilities. The law that primarily governs accessibility in the U.S. is the Americans with Disabilities Act (ADA)

2. WCAG = Web Content Accessibility Guidelines

WCAG is separated into three conformance levels:


How to Setup Android Environment for React Native App

In this tutorial, we’ll be learning how to how to set up your development environment on Windows to use React Native and Android Studio.

Before we start please find below important technologies definitions.

1. React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

2. Android Studio is the official integrated development environment (IDE) for Google’s Android operating system, built on JetBrains IntelliJ IDEA software and designed…

kirti kaushal

Front End Developer| Microsoft Certified Azure | Leading SAFe® ( Helping to teach React Js & exploring new ideas) https://www.linkedin.com/in/kirti-kaushal/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store