Beta-Labs

What is Python?

2023-03-16T11:50:00.002+05:30

Python is an open source and high-level programming language designed by Guido van Rossum. Released in 1991, this programming language’s design philosophy aims at code readability, which is why it’s one of the easiest languages to learn.

In addition, Python is an object-oriented, reflective, functional, procedural, and structural language. All these approaches of Python help programmers write logical and clear code for projects of all scales.

As of now, there are three major versions of Python, Python 3 being the latest. It also supports a wide range of libraries to simplify writing the code.

Features

Python’s features are:

Open source and free: Python is open source, and you can download its code for free to use and modify it for your projects.
Easy to learn: Python is becoming popular because it’s easy to learn compared to other languages. Its simpler syntax uses plain English with less complexity. Hence, it’s developer-friendly and easy to code.
Extensive libraries: Python’s standard library is extensive with rich modules and functions that help you complete your projects faster instead of writing code from scratch. You can find reusable code for processes like image manipulation, unit testing, CGI, and more. Examples include Django, Flask, NumPy, and SciPy.
Extensible: Python is highly extensible with different modules to extend the core functionality. For example, you can add a programmable interface to an existing application.
Object-oriented: Python uses object-oriented programming concepts, such as objects, classes, inheritance, data encapsulation, and more.
Interpreted and easy to debug: Python executes code linearly, like Java, C, and C++. This way, there’s no need for compilation, and debugging becomes easy.
Dynamically-typed: Specifying a variable type such as char, int, double, etc., is not needed in Python as it’s decided during code run time rather than at the start. As a result, it makes programming simpler and reduces many lines of code.
Portable: Python uses portable code. So, you can use the same code across different platforms like Windows, macOS, Unix, or Linux.

Did you know that Python is the second most popular programming language (right behind JavaScript)? 🤓

Where Is Python Used?

Python is a versatile programming language. You can use Python for a variety of purposes, including:

Web development: Due to its efficiency, speed, and other positive aspects, Python is excellent for web development. With the availability of extensive libraries like Django and Flask, the process becomes much more manageable. Some popular companies using it for this purpose include Instagram, Reddit, Uber, and Spotify.
Software development: Using Python, you can create software programs and applications running on your devices. Many Python packages, such as NumPy, Tkinter, SciPy, etc., simplify the software development procedures. You can also develop complex apps with scientific and numeric computing. A few biggies who use it for software development include Dropbox, PyChess, BitTorrent, Gramps, etc.
Machine learning and artificial intelligence: From search engines and social media to chatbots and virtual assistants, algorithms are everywhere and powered by machine learning and artificial intelligence. Python’s exclusive libraries, such as SciPy, Seaborn, TensorFlow, NumPy, Pandas, etc., serve these purposes.
Data Science: Python is used extensively in Data Science. It has plenty of related libraries and frameworks such as PyBrain, Bottle, Flask, web3py, etc., useful in data science to visualize and analyze large volumes of data and other purposes. It also helps in web scraping, which has become quite essential these days for businesses.
Creating desktop GUIs: Due to Python’s modular structure, it works on various operating systems and lets you build desktop GUIs utilizing an efficient framework, module, or text processor, such as PyGUI, PyGtk, PyQt4, PyQt5, etc.
Game development: You can develop games using Python libraries like PySoy (a 3D game engine based on Python). Games developed using Python are Disney’s Toontown Online, Battlefield 2, Frets on Fire, etc.

4 Benefits of Learning Python

Learning Python has several advantages for your career prospects. Let’s find out the answer to the question, “Why learn Python”?

1.Efficient in Development

Python is not only easy to learn and code, but it also accelerates the entire development process. It has a wide range of frameworks, packages, libraries, and modules that don’t require you to do everything from scratch.

You can also utilize reusable code to write the code faster with stability. It helps you automate standard processes and save time to focus on the logic and other vital aspects of web and software development.

2. Extremely Versatile

Python is a highly versatile language, which is one of the reasons behind its popularity and high usability. From small- to large-scale projects, Python works with the same efficiency. Apart from the uses mentioned above, developers use it for deep learning, data engineering, process automation, the Internet of Things (IoT), and more.

That said, its versatility could be due to the massive number of functions, methods, frameworks, and libraries it supports. And Python’s readability, popularity, and usability have further encouraged many more libraries, making the language more user-friendly.

3. Demand for Python Developers

The demand for Python developers is increasing in the market with its popularity and usage in emerging technologies. It finds use in business services, insurance, aerospace, retail, banking, finance, info-tech, consulting, healthcare, and hardware, just to name a few.

The top companies using Python are Google, NASA, YouTube, Quora, IBM, HP, Qualcomm, and Dropbox. And they also hire Python developers frequently.

In 2021, the average salary of Python developers in the US is $110,840 annually. So, learning Python can be rewarding for your career.

4. Supportive Community

Although there’s official Python documentation available, sometimes you may get stuck, especially if you are a beginner. At this time, a supportive community is something that can help you. Fortunately, Python has a vast community of developers you can turn to in case of doubts or questions.

You can find online forums such as Stack Overflow, open source communities, and local meet-ups to explore the language. In addition, there are lots of courses, tutorials, websites, and other resources dedicated to Python (some of which we’ll discuss in this article).

Fullstack Web Development

2022-06-15T11:25:00.001+05:30

Introduction to Bootstrap

2021-10-26T09:51:00.005+05:30

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compatibility issue. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones).

Reason to choose Bootstrap:

· Faster and Easier Web-Development.

· It creates Platform-independent web-pages.

· It creates Responsive Web-pages.

· It’s designed to be responsive to mobile devices too.

· It’s Free! Available on www.getbootstrap.com

· You can quickly create multi-column layout with pre-defined classes.

· You can quickly create different types of form layouts.

· You can quickly create different variation of navigation bar.

· You can easily create components like accordions, modals, etc. without writing any JS code.

· You can easily create dynamic tabs to manage large amount of content.

· You can easily create tooltips and popovers to show hint text.

· You can easily create carousel or image slider to showcase your content.

· You can quickly create different types of alert boxes.

History of Bootstrap

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released as an open source product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub.

Advantages of Using Bootstrap

If you have had some experience with any front-end framework, you might be wondering what makes Bootstrap so special. Here are some advantages why one should opt for Bootstrap framework:

Save lots of time — You can save lots of time and efforts using the Bootstrap predefined design templates and classes and concentrate on other development work.
Responsive features — Using Bootstrap you can easily create responsive websites that appear more appropriately on different devices and screen resolutions without any change in markup.
Consistent design — All Bootstrap components share the same design templates and styles through a central library, so the design and layout of your web pages will be consistent.
Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML, CSS and JavaScript can start development with Bootstrap.
Compatible with browsers — Bootstrap is created with modern web browsers in mind and it is compatible with all modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.
Open Source — And the best part is, it is completely free to download and use.

Websites that were built with a lot of CSS and JavaScript can now be built with a few lines of code using Bootstrap. Bootstrap comprises of mainly three components:

· CSS

· Fonts

· Javascript

How to use Bootstrap 4 in a Webpage

There are two ways to include Bootstrap in the website.

Include Bootstrap from CDN link.
Download Bootstrap from getbootstrap.com and use it.

Bootstrap Grid System

2021-10-25T12:43:00.000+05:30

Bootstrap grid system provides the quick and convenient way to create responsive website layouts. The latest Bootstrap 4 version introduces the new mobile-first flexbox grid system that appropriately scales up to 12 columns as the device or viewport size increases.

The Bootstrap Grid System Has 3 Main Parts: CRC

When working with the Bootstrap 12 column grid you have to keep in mind the order of elements and that there are always three parts: a Container, a Row, and any number of Columns. CRC.

For example:

table > tr > td is like .container > .row > .col-sm-6

Container – `.container` or `.container-fluid`

This is the parent container that determines if the columns should be full-width or not.

Row – `.row`

A horizontal wrapping container for the series of columns it contains. It essentially clears the floated columns

Column – `.col--`

A column is a vertical division similar to a table cell. This is where your content goes and has built-in margin to the left and right to prevent text and images from touching each other. The default grid uses floating divs to achieve the horizontal columns.

Bootstrap 5 Breakpoints

Columns also have grid tiers which tell the columns how they should look at different breakpoints. In the example below I used .col-sm-6 which essentially says, “When the browser window is 576px or higher make this column span 6 of the 12 columns. For anything below 576px make it full width.” So when you declare a grid tier you are saying make it this size for the specified tier and up.

Bootstrap 4 includes predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc. For example, you can use the .col-* classes to create grid columns for extra small devices mobile phones in portrait mode, similarly you can use the .col-sm-* classes to create grid columns for small screen devices like mobile phone in landscape mode, the .col-md-* classes for medium screen devices like tablets, the .col-lg-* classes for large devices like desktops, and the .col-xl-* classes for extra large desktop screens.

The following table summarizes some of the key features of the new grid system.

Above table demonstrates one important thing, applying any .col-sm-* class to an element will not only affect its styling on small devices, but also on medium, large and extra large devices having screen width greater than or equal to 540px, if a .col-md-*, .col-lg-* or .col-xl-* class is not present. Similarly, the .col-md-* class will not only affect the styling of elements on medium devices, but also on large and extra large devices if a .col-lg-* or .col-xl- class is not present.

Now the question arises how to create rows and columns using this 12 column responsive grid system. The answer is pretty simple, at first create a container that acts as a wrapper for your rows and columns using the .container class, after that create rows inside the container using the .row class, and to create columns inside any row you can use the .col-*, .col-sm-*, .col-md-*, .col-lg-* and .col-xl-* classes. The columns are actual content area where we will place our contents. Let's put all these things into real action. Let's see how it actually works:

Bootstrap Containers

2021-10-25T12:33:00.000+05:30

In bootstrap, container is used to set the content’s margin. It contains row elements and the row elements are container of columns. This is known as grid system.

There are two container classes in bootstrap:

1. .container

2. .container-fluid

Let’s look at each of the above two class in details with examples:

· .container: The .container class provides a responsive fixed width container.

In the below example, the div with class “container” will have a fixed left and right margin and will not take the complete width of it’s parent or the viewport.

<!-- Bootstrap container class -->
<html>
<head>
  <title>Bootstrap Container Example</title>
  <!-- Add Bootstrap Links -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
   bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
</head>
<body>
    <!-- Since we are using the class container, the below
        div will not take complete width of it's parent. -->

    <div class="container bg-success text-light" >
      <h1>Beta-Labs</h1>
      <p>Complete Tutorial for Web Developers</p> 
    </div>
</body>
</html>

      
.container-fluid: The .container-fluid class provides a full-width container which spans the 
entire width of the viewport.

In the below example, the div with class “container-fluid” will take-up the complete width of the viewport and will expand or shrink when ever the viewport is resized.

<!-- Bootstrap container-fluid class -->
<html>
<head>
  <title>Bootstrap Container Example</title>
  <!-- Add Bootstrap Links -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
    css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
</head>
<body>
   <!-- Since we are using the class container, the below
        div will not take complete width of it's parent. -->
        <div class="container-fluid bg-success text-light" >
            <h1>Beta-Labs</h1>
            <p>Complete Tutorial for Web Developers</p> 
        </div>
</body>
</html>

Introduction to JQuery

2021-10-21T12:28:00.009+05:30

HTML, CSS, and JavaScript are the three fundamental languages of the web. We structure our websites with HTML, style them with CSS, and add interactive functionality with JavaScript. In fact, most animations and any action that happens as a result of a user clicking, hovering, or scrolling are constructed with JavaScript.

jQuery is the “Write Less, Do More” JavaScript library. It is not a programming language, but rather a tool used to make writing common JavaScript tasks more concise. jQuery has the added benefit of being cross-browser compatible, meaning you can be certain the output of your code will render as intended in any modern

What is jQuery?

jQuery is a fast, small, lightweight, and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It makes things like DOM traversal and manipulation, event handling, animation, and Ajax much simpler. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. As of May 2019, jQuery was used by 73% of the 10 million most popular websites.
jQuery was created by John Resig in 2006 with the motto “Write less, do more”.
The main purpose of jQuery is to make JavaScript faster, easier, more concise, more effective, and more attractive. jQuery helps the developers to make websites more dynamic and interactive with jQuery.
jQuery takes a lot of common functionalities of Vanilla JavaScript which required many lines of code and wraps them into pre-defined and built-in methods which you can call in a single line of code in jQuery.

Why jQuery?

jQuery Syntax is designed to make it easier to achieve a wide collection of functionalities. Let us now see one by one, why we should learn jQuery and use it over vanilla JavaScript.

LIGHT-WEIGHT: jQuery is a very lightweight library of JavaScript. Its minified file is just about 19 kB.
SHORT SELECTORS: jQuery provides us a shorter syntax to select any element of our DOM (Document Object Model). Thus, using jQuery, we can easily target any of the DOM elements
DOM MANIPULATION: jQuery makes the DOM manipulating really with short and simple syntax by its selector engine named Sizzle.
DOM TRAVERSING: jQuery provides us built-in and predefined keywords to traverse through the DOM, which is really hassle-free for the developers.
EVENT HANDLING: jQuery provides us an extremely easy and elegant way to Handle any keyboard or mouse event in our web application such as clicking on a button or pressing the enter key or firing the blur event.
AJAX SUPPORT: jQuery helps us to develop dynamic and interactive web applications with the latest AJAX technology. AJAX calling with jQuery is much easier than vanilla JavaScript.
ANIMATION: jQuery has a sea of built-in animation effects that can provide your website an elegant look.
PLUG-INS: jQuery provides a lot of plug-ins to use in our web applications to make high-level effects, advanced and themeable widgets
CROSS-BROWSER SUPPORT: JQuery has cross-browser support, works efficiently in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome, and Opera 9.0+ browser.

jQuery History

jQuery was first released in January 2006 by John Resig at BarCamp NYC. It is currently headed by Timmy Wilson and maintained by a team of developers.

Nowadays, jQuery is widely used technology. Most of the websites are using jQuery. So, you can say that out of the lot of JavaScript frameworks, jQuery is the most popular and the most extendable. Many of the biggest companies on the web use jQuery.

Some of these companies are:

Microsoft
Google
IBM
Netflix

JQuery Prerequisite

It is always advised to a fresher to learn the basics of web designing before starting to learn jQuery. He should learn HTML, CSS and JavaScript first. But, if you belong to a technical background, it is up to you.

If you are a fresher and want to study these subjects first.

How to use jQuery?

There are two ways to use jQuery.

Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).

Local Installation

Go to the https://jquery.com/download/ to download the latest version available.

Now put downloaded jquery-3.6.0.js file in a directory of your website, e.g. /jQquery.

Example

Now you can include jQuery library in your HTML file as follows −

<html>
  <head>
    <title>The jQuery Example</title>
    <script type="text/javascript" src="./jquery/jquery-3.6.0.js"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        document.write("Hello, World!");
      });
    </script>
  </head>

  <body>
    <h1>Hello</h1>
  </body>
</html>

This will produce following result −

CDN Based Version

You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Google and Microsoft provides content deliver for the latest version.

We are using Google CDN version of the library throughout this tutorial.

Example

Now let us rewrite above example using jQuery library from Google CDN.

<html>
  <head>
    <title>The jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        document.write("Hello, World!");
      });
    </script>
  </head>

  <body>
    <h1>Hello</h1>
  </body>
</html>

This will produce following result −

HTML Crud with FireBase

2021-09-23T10:18:00.000+05:30

Source Code: https://github.com/pankkap/CRUD_Firebase

Working App: https://pankkap.github.io/CRUD_Firebase/

Website Development Process

2021-08-31T12:20:00.004+05:30

In this article, we’ll take a look at how the general website development process may look like. In the world of the internet, the significance of having an online presence is profoundly perceived. Each business needs a website whether you are an online internet business or an offline store. The website design has grown more strategic, complex, and demanding, good usability has become the price of competitive entry.

In any case, designing a website isn’t a simple task. The ideal website isn’t just a visual show-stopper. So, while usability is important, it is no longer the key differentiator it once was, utility is equally important.

Future of Website Design

The future of great Web design is tied in with creating customer engagement and a manner that obviously impacts business results and measurable objectives. The interactive online environment offers a larger number of occasions to impact clients’ dynamic where you can save tremendous worth by ensuring that our websites are optimized.

The website should be accessible to anyone and responsive to use; the layout and flow deeply impact the overall view of the site. There are a few things to keep in mind before you start designing a website and the objectives you set out, in the beginning, are of utmost importance.

The layout design is the way illustrations, text, and buttons are organized on your page. The layout makes your site look great, yet a strong design additionally makes it simple to utilize in light of the fact that the data is shown which synch well, buttons are in places that individuals anticipate that them should be, pictures are put so they help individuals comprehend what you’re attempting to convey without hard-to-read text.

What enhancements would you make while designing a website to guarantee the site’s drawn out more and relevant traffic?

Things to keep in mind while designing your website

1. Wireframe

2. Layout

3. Content

4. Responsiveness

Wireframe

A website wireframe is a visual prototype of a web page that focuses on content, layout, and behavior. It usually doesn't include any styling, color, or graphics. It's like a blueprint to a house that shows the plan for plumbing and electricity without the interior design.

A website wireframe can also show the relationship between pages, allowing you to navigate between a series of mockups with clickable components. A wireframe is constructed using basic boxes, lines, and other shapes to create an outline of the functional parts of a web page without wasting time creating an intricate, polished design. It's often the first step in the website design and web development process.

The wireframe helps communicate design concepts to a team, clients, or management. Best available Wireframe Tools are:

Adobe XD
InVision Studio
Sketch
Figma
Canva

Layout

A website layout is the arrangement of all visual elements on the webpage and the resulting relationships between them. Through the intentional positioning of page elements, the layout can enhance the site’s message, as well as its usability.

Layout is a key component of website design. It determines the sequence in which page elements are registered amongst visitors, which elements draw the most attention, and the overall balance achieved in the design.

Put plainly, a good website layout can lead visitors’ focus in the right direction. It can help them gravitate towards what matters most first, and then continue to the following sections in order of significance.

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS framework
CSS float property
CSS flexbox
CSS grid

Content

Web content refers to the textual, aural, or visual content published on a website. Content means any creative element, for example, text, applications, images, archived e-mail messages, data, e-services, audio and video files, and so on.

Web content is the key behind traffic generation to websites. Creating engaging content and organizing it into various categories for easy navigation is most important for a successful website. Also, it is important to optimize the web content for search engines so that it responds to the keywords used for searching.

There are two basic kinds of web content:

Text: Text is simple. It is added on the webpage as text blocks or within images. The best written content is unique textual web content that is free from plagiarism. Web content added as text can also include good internal links that help readers gain access to more information.

Multimedia: Another kind of web content is multimedia. Simply put, multimedia refers to any content which is not text; some examples include:

Animations: Animations can be added with the help of Flash, Ajax, GIF images as well as other animation tools.
Images: Images are considered the most popular option to incorporate multimedia to websites. Clip art, photos, or even drawings can be created by means of a scanner or a graphics editor. It is recommended to optimize the images so that the users can download them quickly.
Audio: Different types of audio files can be added as part of the web content so as to increase the desirability of the website.
Video: It is the most popular multimedia contents; however, when adding video files, the publishers should make sure that they efficiently on various browsers.

Web content management (WCM) is essential to run a website successfully. To manage web content, publishers should organize content in line with the requirements of the audience.

This includes usage of common content, terminology, and positioning; consistent navigation; link management; and finally, metadata application. There are a wide range of WCM tools available for effectively handling web content

Responsiveness

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. One may also have to consider the settings on their devices; if they have a VPN for iOS on their iPad, for example, the website should not block the user’s access to the page. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

Why FullStack Web Development?

2021-08-02T22:50:00.009+05:30

If students know coding and love to do programming that’s good but these qualities are not enough to get the best Job. Because now companies are looking for logical minds with a wide range of skills. They don’t deal with the conservative candidates. So students need to prepare themselves accordingly and keep themselves updated with the latest technological advancement and the software or applications companies are working on.

Well! We are breathing in a revolutionized world where everything is digitized, and where the Internet is the need of the hour for everyone. Businesses are moving to an online platform to promote their brands and outreach the customer globally. This technology advancement has impacted the whole world and brings the latest amendments every other day in the software programs. That’s why more and more people want to learn Web Development and adept career as a Web Developer as most of the organizations are looking forward to Front-End developer, Back-End developer, PHP Developer, (.)Net developer, Cloud Architect, Devops Engineer and many more.

The demand for Full-stack Developers is on the rise. And companies are in desperate need of talented professionals who can work with both Front-End and back-End due to which their demand is hiking. According to the research, there is a 20% growth in demand for Full-stack developer compared to the last couple of years.

However, Full-stack Developer holds various skills and knowledge of languages like HTML5, CSS, JavaScript, Angular, and React which comes under front-end development. For back-end, they also possess knowledge regarding NodeJs, Express, phyton, Java, PHP, and multiple databases such as MongoDB, SQL, etc. The role of the full-stack developer is to look at every aspect of software development within an organization.

GOOGLE LINKS

8,000+ Full Stack Developer jobs in India (143 new) - LinkedIn

in.linkedin.com › jobs › full-stack-developer-jobs

Apply to 64218 FullStack Web Developer Jobs on Naukri.com

www.naukri.com › full stack web developer Jobs

Full Stack Developer Jobs (Mar 2021) - Monster India

www.monsterindia.com › search › full-stack-developer-

FullStack Developer Jobs February 2021 - Indeed

in.indeed.com › Full-Stack-Developer-jobs

Full stack web developer Jobs in India | Glassdoor

www.glassdoor.co.in › Job › india-full-stack-web-developer

React Router

2021-03-13T09:47:00.009+05:30

As opposed to traditional multi-page applications, SPAs only maintain one HTML file, commonly index.html. Instead of serving a different HTML file for each path, SPAs depend on client-side routing. React Router is a popular client-side routing library.

Routing is a process in which a user is directed to different pages based on their action or request. ReactJS Router is mainly used for developing Single Page Web Applications (SPA). React Router is used to define multiple routes in the application. When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be redirected to that particular route.

Why use React router?

React Router plays an important role to display multiple views in a single page application. Without React Router, it is not possible to display multiple views in React applications. Most of the social media websites like Facebook, Instagram uses React Router for rendering multiple views.

React Router uses component structure to call components, which display the appropriate information. React router also allows the user to utilize browser functionality like the back button, and the refresh page, all while maintaining the correct view of the application.

React Router Installation

React contains three different packages for routing. These are:

1. react-router: It provides the core routing components and functions for the React Router applications.

2. react-router-dom: It is used for web applications design.

3. react-router-native: It is used for mobile applications.

Step 1: Install React Router

It is not possible to install react-router directly in your application. To use react routing, first, you need to install react-router-dom modules in your application. The below command is used to install react router dom.

  npm install react-router-dom

Step 2: Make Four components.

In our project, we will create four more components in the directory called Pages along with App.js, which is already present.

Pages/Home.js

import React from "react";

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
} 

Pages/About.js

import React from "react";

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  );

}

Pages/Contact.js

import React from "react";

export default function Contact() {
  return (
    <div>
      <h1>Contact Page</h1>
    </div>
  );
} 

Pages/Navbar.js

import React from "react";

export default function Navbar() {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <div className="container-fluid">
        <ul className="nav navbar-nav">
          <li className="nav-item">
            <a href="/" className="nav-link" exact>
              Home
            </a>
          </li>
          <li className="nav-item">
            <a href="/about" className="nav-link" exact>
              About
            </a>
          </li>
          <li className="nav-item">
            <a href="/contact" className="nav-link" exact>
              Contact
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
}

Step 3: Setup App.js for Routing

App.js

import React from 'react';
import Navbar from "./Pages/Navbar";
import Home from "./Pages/Home";
import About from "./Pages/About";
import Contact from "./Pages/Contact";

function App() {
  return (
      <div className="App">
         <Navbar />
         <Home />
         <About />
         <Contact />
      </div>
  );
}

export default App;

For Routing, open the app.js file and import all the four component files in it. Here, you need to import line:

  import { BrowserRouter as Router, Swtich, Route } from "react-router-dom";

which helps us to implement the Routing. Now, our app.js file looks like below.

BrowserRouter as Router

First, you'll need to set up your app to work with React Router. Everything that gets rendered will need to go inside the <BrowserRouter> element, but we just rename BrowserRouter as Router only to reduce the long name of the BrowserRouter. so wrap your App in those first. It's the component that does all the logic of displaying various components that you provide it with.

import React from "react";
import { BrowserRouter as Router, Swtich, Route } from "react-router-dom";

import Navbar from "./Pages/Navbar";
import Home from "./Pages/Home";
import About from "./Pages/About";
import Contact from "./Pages/Contact";
function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Home />
        <About />
        <Contact />
      </div>
    </Router>
  );
}
export default App;

Switch

Next, in your App component, add the Switch element (open and closing tags). These ensure that only one component is rendered at a time. It checks each route for a match sequentially and stops once the first match is found.

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <switch>
          <Home />
          <About />
          <Contact />
        </switch>
      </div>
    </Router>
  );
}

You notice that we put <Navbar /> component outside the switch, because we want that navbar will be visible on each component that render.

Route

It's now time to add your <Route> tags. These are the links between the components and should be placed inside the <Switch> tags.

To tell the <Route> tags which component to load, simply add a path attribute and the name of the component you want to load with component attribute. The <Route> will return null in case the specified URL doesn’t match the defined path.

function App() {
    return (
      <Router>
        <div className="App">
          <Navbar />
          <switch>
            <Route path="/" exact component={Home} />
            <Route path="/about" exact component={About} />
            <Route path="/contact" exact component={Contact} />
          </switch>
        </div>
      </Router>
    );
  }  

When the route matches /, the application shows the Dashboard component. When the route is changed by clicking the “About” link to /about, the Dashboard component is removed and the About component is inserted in the DOM.

Notice the exact attribute. Without this, path="/" would also match /about, since / is contained in the route. However, we want ‘/’ to match only our render function, hence using ‘exact’ explicitly achieves this.

Step 4: Adding Navigation Link

Link

Sometimes, we want to need multiple links on a single page. When we click on any of that particular Link, it should load that page which is associated with that path without reloading the web page. To do this, we need to import <Link> component in the Navbar.js file. The Link component is used to trigger new routes. You import it from react-router-dom, and you can add the Link components to point at different routes, with the to attribute. It is the equivalent of anchor tags: <a> </a>.

So now we should update Navbar.js for providing Navigation link in react application by replacing <a> tag to <Link> Tag and 'href' to 'to' attribute.

Pages/Navbar.js

import React from "react";
import { Link } from "react-router-dom";

export default function Navbar() {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <div className="container-fluid">
        <ul className="nav navbar-nav">
          <li className="nav-item">
            <Link to="/" className="nav-link" exact>
              Home
            </Link>
          </li>
          <li className="nav-item">
            <Link to="/about" className="nav-link" exact>
              About
            </Link>
          </li>
          <li className="nav-item">
            <Link to="/contact" className="nav-link" exact>
              Contact
            </Link>
          </li>
        </ul>
      </div>
    </nav>
  );
} 

404 Page Not Found

A common use case for when you’re building a web app is to have a “catch all” route that will be rendered if none of your other routes match. A common example of this would be a 404 page.

To create a client side "404 not found" fallback all you need to do is make use of a <Route /> component with a non-greedy matching path. Create your NotFound component, i.e. the page which will display 404 error message:

Pages/NotFound.js

import React from "react";

export default function NotFound() {
  return (
    <div>
      <h3>404 page not found</h3>
      <p>We are sorry but the page you are looking for does not exist.</p>
    </div>
  ); 

Let's add <NotFound /> component to routes configuration, using * as a value of the path parameter to get a non-greedy matching.

It is important to remember that the 404 route needs to be declared in the very bottom of your routes configuration, so the <Route /> is only mounted if any of the routes' path declared above are not matched:

App.js

import NotFound from "./Pages/NotFound";

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <switch>

          {/* Other Page Routes */}

          <Route component={NotFound} />
        </switch>
      </div>
    </Router>
  );
}
export default App; 

See the example below, try to enter some non valid url to see 404 page:

Displaying List in React

2021-03-06T14:20:00.006+05:30

Lists are very useful when it comes to developing the UI of any website. Lists are mainly used for displaying menus in a website, for example, the navbar menu. In regular JavaScript, we can use arrays for creating lists. We can create lists in React in a similar manner as we do in regular JavaScript. We will see how to do this in detail further in this article.

Using JSX we can show lists using JavaScript's built-in Array.map() method. The .map() method is often used to take one piece of data and convert it to another. In our scenarios, we are taking data and converting it to a piece of our view.

A Simple Example

Let's say we have a list of array that we want to show in a list:

import React from "react";

export default function ArrayMap() {

  const arr = [10, 20, 30, 40, 50];

  const newArr = arr.map(function (num) {

    console.log("Num", num);

    return <li>{num * 2}</li>;

  });

  console.log("Old Array", arr);

  console.log("New Array", newArr);

  return <ul>{newArr}</ul>;
}

This component uses Array’s built-in map function to create a new array newArr that has the same number of elements, and where each element is the result of calling the function you provide. The {} brackets are used to render the array of elements.

import React from "react";

export default function ArrayMap() {

  const arr = [10, 20, 30, 40, 50];

  return (

    <ul>
      { 
        arr.map((num) => {

        return <li>{num}</li>;
      })}

    </ul>

  );
} 

The above is the shorthand code for write the map function. Since we are not doing anything in the function's block body, we can also refactor it to a concise body and omit the return statement and the curly braces for the function body:

return (
  <ul>

    {arr.map(num =><li>{num}</li>)}

  </ul>
);

Rendering lists inside Components

So from the component’s point of view, we have to pass a list to a component using props and then use this component to render the list to the DOM. We can update the above code in which we have directly rendered the list to now a component that will accept an array as props and returns an unordered list.

const mylist = [10, 20, 30, 40, 50];

const App = () => <ListComponent list={mylist} />;

const ListComponent = ({ list }) => (

  <ul>

    {list.map((item) => (

      <li>{item}</li>

    ))}

  </ul>
);
export default App;

You can see in the above output that the unordered list is successfully rendered to the browser but a warning message is logged to the console.

Warning: Each child in an array or iterator

should have a unique "key" prop

The above warning message says that each of the list items in our unordered list should have a unique key. A “key” is a special string attribute you need to include when creating lists of elements in React. We will discuss about keys in detail in further articles. For now, let’s just assign a key to each of our list items in the above code.

Below is the example where we display the list of Objects with keys.

Display Object List in React

Displaying items from a list of objects in React is very simple. We can iterate over a list of objects using the .map() method in React JSX. Here is the example in which we mapped a list of objects and displayed them in the React app.

import React, { useState } from "react";

import "../node_modules/bootstrap/dist/css/bootstrap.css";

export default function DemoMap() {

  const [user, addUser] = useState([
    {
      id: 1,
      username: "pankkap",
      password: "pankaj123",
    },
    {
      id: 2,
      username: "manishkumar",
      password: "manish456",
    },
    {
      id: 3,
      username: "sachinyadav",
      password: "sachin789",
    },
  ]);

  const renderUser = (user, index) => {
    return (

      <tr key={index}>

        <td>{user.id}</td>

        <td>{user.username}</td>

        <td>{user.password}</td>

      </tr>
    );
  };
  return (

    <div className="container mt-3">

      <table class="table">

        <thead class="thead-light">

          <tr>

            <th>#</th>

            <th>User name</th>

            <th>Password</th>

          </tr>

        </thead>

        <tbody>{user.map(renderUser)}</tbody>

      </table>

    </div>
  );
}

Output:

The key attribute is necessary for React to identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. Since React uses a virtual DOM and depends on the key to identifying items of a list, so in the above list example, we provided a unique id to every list item.

React Events

2021-02-28T10:04:00.006+05:30

In web development, events represent actions that happen in the web browser. By responding to events with event handlers, you can create dynamic JavaScript applications that respond to any user action, including clicking with a mouse, scrolling along a webpage, touching a touch screen, and more.

In React apps, you can use event handlers to update state data, trigger prop changes, or prevent default browser actions. React has its own event handling system which is very similar to handling events on DOM elements. The react event handling system is known as Synthetic Events. SyntheticEvent closely emulates the standard browser event, but provides more consistent behavior for different web browsers.

Handling events with react have some syntactic differences from handling events on DOM. These are:

React events are named as camelCase instead of lowercase.
With JSX, a function is passed as the event handler instead of a string. For example:

Event declaration in plain HTML:

Hello JavaTpoint

</button>

Event declaration in React:

Hello JavaTpoint

</button>

3. In react, we cannot return false to prevent the default behavior. We must call preventDefault event explicitly to prevent the default behavior. For example:

In plain HTML, to prevent the default link behavior of opening a new page, we can write:
<a href="#" onclick="console.log('You had clicked a Link.'); return false">
Click_Me
</a>

In React, we can write it as:
function ActionLink() {
  function handleClick(e) {
      e.preventDefault();
      console.log('You had clicked a Link.');
  }
  return (
      <a href="#" onClick={handleClick}>
            Click_Me
      </a>
  );
}
In the above example, e is a Synthetic Event which defines according to the W3C spec.

Now let us see how to use Event in React.

onClick Event handler in React

The React onClick event handler enables you to call a function and trigger an action when a user clicks an element, such as a button, in your app.

To listen to events in React, add the onClick attribute, which is the event handler, to the target element. This specifies the function to be executed when that element is clicked.

import React, { Component } from "react";
class ShowAlert extends Component {
  showAlert() {
    alert("I'm an alert");
  }
  render() {
    return <button onClick={this.showAlert}>show alert</button>;
  }
}
export default ShowAlert;

Output:

In the example above, the onClick attribute is set to the showAlert function, which alerts a message. This means that whenever the button is clicked, the showAlert function is called, which, in turn, shows the alert box.

Handling events in class components

In JavaScript, class methods are not bound by default. Therefore, it’s necessary to bind functions to the class instance.

Binding in the render() method: One way to resolve the problem of binding is to call bind in a render function. This is done by binding it in the render() function. This method requires calling .bind(this) in the render() function.

<button onClick={this.showAlert.bind(this)}>show alert</button>

Binding in the constructor() method: If binding in the render doesn’t work for you, you can bind in the constructor. See an example below:

class ShowAlert extends Component {

constructor(props) {

super(props);

this.showAlert = this.showAlert.bind(this);

}

The first this.showAlert refers to the showAlert method. Since this is done in the constructor, this refers to the ShowAlert class component.

The second this.showAlert is also referring to the same showAlert() method, but we are now calling .bind() on it.

The final this is the context we are passing to .bind(), and it refers to the ShowAlert class component.

It’s also important to note that if showAlert isn’t bound to the class instance, it won’t be able to access this.setState because this will be undefined. This is another important reason to bind event handling functions.

Binding in the arrow function: You can handle events in class components by binding them with the fat arrow function. ES7 class properties enable bindings at the method definition, as shown in the example below. By definition, an arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target.

showAlert=()=> {

alert("I'm an alert");

}

onChange Event handler in React

In the below example, we have used only one component and adding an onChange event. This event will trigger the changeText function, which returns the company name.

import React, { Component } from "react";
class DemoOnChange extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tutorialName: "",
    };
  }
  changeText(event) {
    this.setState({
      tutorialName: event.target.value,
    });
  }
  render() {
    return (
      <div>
        <h2>onChange Event Example</h2>
        <label htmlFor="name">Enter Tutorial name: </label>
        <input
          type="text"
          id="companyName"
          onChange={this.changeText.bind(this)}
        />
        <h4>You entered: {this.state.tutorialName}</h4>
      </div>
    );
  }
}
export default DemoOnChange;

Output

When you execute the above code, you will get the following output.

After entering the name in the textbox, you will get the output as like below screen.

onSubmit Event handler in React

You can control the submit action by adding an event handler in the onSubmit attribute:

Example

import React, { Component } from "react";

class MyForm extends React.Component {

constructor(props) {

super(props);

this.state = { username: "" };

}

mySubmitHandler = (event) => {

event.preventDefault();

alert("You are submitting " + this.state.username);

};

myChangeHandler = (event) => {

this.setState({ username: event.target.value });

};

render() {

return (

<h2>onSubmit Event Example</h2>

<p>Enter your name, and submit:</p>

<h1>{this.state.username}</h1>

</form>

);

}

export default MyForm;

Note that we use event.preventDefault() to prevent the form from actually being submitted.

React Hooks

2021-02-27T13:31:00.007+05:30

Earlier on in React, components were either class components or functional components. Functional components were Javascript functions that accepted props (data) to display and returned JSX.

Class components typically required more code but could store state variables and could use lifecycle methods. This made class components the go-to option for making API calls, processing user input, etc. Functional components became useful helpers for class components.

With the release of React 16.8 in 2019, React Hooks have finally become available to use in our production applications. This allows React developers to make functional components stateful. Instead of using a class component to hold stateful logic, we can use functional components.

React Hooks are not available in class-based components — but instead they allow you to use React without JavaScript classes. If you prefer to use functions instead of classes (which is recommended in JavaScript) you can simply start using Hooks without worrying about migrating your whole apps to classes.

Hooks enable you to use “class-features” In React by providing a set of built-in functions such as:

The useState() hook for using states from function components,
The useEffect() hook for performing side effects from function components (It's equivalent to life-cycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in React classes).

Hook State

let’s set up a component with state, the hooks way.

import React from "react";
const HookDemo = () => {
  return (
    <div>
      <h2>React Hooks</h2>
    </div>
  );
};
export default App;

And now, let’s use a React hook. We’ll add in some state to the component . To do so, we’ll import the useState hook from React at the top of the App.js file:

import React, { useState } from 'react';

Then we’ll apply the useState hook at the top of the App component function, to set up state functionality for the stuRoll:

const HookDemo = () => {
const [stuRoll, setStuRoll] = useState();
 

There are three aspects to the useState hook:

1. The argument to useState is its initial value. Therefore, with useState(), we are setting the initial value of stuRoll to a blank value.

2. The useState method destructures your state object into an array of two values. The first one is the current value of the variable that is being tracked in the component state. Therefore, in const [stuRoll, setStuRoll] = useState(), stuRoll represents that current value. It becomes a constant that can be used in the component code.

3. The second value returned from the useState function is a function itself. This function updates the paired state variable. So setStuRoll updates the stuRoll value.

Within the App component, let’s create a helper method, called updateData. With this method, the input element will set the stuRoll in the hook state. How?

This helper will call the new setStuRoll function and update the student Rollno.

const ReactDemo = () => {

const [stuRoll, setStuRoll] = useState(0);

  const updateData = () => {

    setStuRoll(10);

    console.log("Updated RollNo", stuRoll);
  };

  return (
    <div>
       <h2>Hooks | Function Component Based</h2>
      <h3>RollNo: {stuRoll}</h3>
      <button onClick={updateData}>Update</button>
    </div>
  );
};

export default ReactDemo;

Comparison to traditional class Component state

Let’s compare the App component function above with the more traditional class component state approach:

import React, { Component } from "react";

class StateDemo extends React.Component {
  constructor() {
    super();
    this.state = {
      stuRoll: 0,
    };
  }
  updateData = () => {
    this.setState({ stuRoll: 10 });
  };
  render() {
    return (
      <div>
        <h2>State | Class Component Based </h2>
        <h3>RollNo: {this.state.stuRoll}</h3>
        <button onClick={this.updateData}>Update</button>
      </div>
    );
  }
}
export default StateDemo;

Take note of the differences between this function version and the class version. It’s already much more compact and easier to understand than the class version, yet they both do exactly the same thing. Let’s go over the differences:

The entire class constructor has been replaced by the useState Hook, which only consists of a single line.
Because the useState Hook outputs local variables, you no longer need to use the this keyword to reference your function or state variables. Honestly, this is a major pain for most JavaScript developers, as it’s not always clear when you should use this.
The JSX code is now cleaner as you can reference local state values without using this.state.

Hook with Multiple states

import React, { useState, useEffect } from "react";

const ReactDemo = () => {
  const [stuRoll, setStuRoll] = useState(0);
  const [stuName, setStuName] = useState("---");

  // Update the data of the component
  const updateData = () => {
    setStuRoll(10);
    setStuName("Pankaj");
  };

  return (
    <div>
      <h2>Hooks with Multiple States</h2>
      <h3>RollNo: {stuRoll}</h3>
      <h3>Name: {stuName}</h3>
      <button onClick={updateData}>Update</button>
    </div>
  );
};

export default ReactDemo;

The Rules of Hooks

Hooks can only be called at the Top Level, it can't be called inside the loops or condition or nested functions.
Hooks can only be called in the React Function or Custom Hooks, never use hooks in the regular javascript function.

Hooks Effect

The Hooks Effect enables us to conduct collateral effects within the components function. The Hooks Effect will not use the lifecycle methods of the components, and these methods exist in the class components. Hooks Effect is similar to componentDidUpdate(), componentDidMount() lifecycle methods.

import React, { useState, useEffect } from "react";

const ReactDemo = () => {
  const [stuRoll, setStuRoll] = useState(0);
  const [stuName, setStuName] = useState("---");

  // Similar to componentDidMount() and componentDidUpdate

  useEffect(() => {
    console.log("Hooks Effects called ");
  });

  // Update the data of the component
  const updateData = () => {
    setStuRoll(10);
    setStuName("Pankaj");
  };

  return (
    <div>
      <h2>Hooks with UseEffect</h2>
      <h3>RollNo: {stuRoll}</h3>
      <h3>Name: {stuName}</h3>
      <button onClick={updateData}>Update</button>
    </div>
  );
};
export default ReactDemo;

In the above code, we invoke “useEffect” to inform the React to execute the “effect” method after reddening the modifications in the DOM. As we declare the effects in a component, the effects can use the state and props. React implements the effects after each render. Effects may also define how to do “clean up”.

Side effects contain usual properties that every web application have to conduct, like:

· DOM Updation

· Consuming and Retrieving data from an API Server.

· Establishing Subscription

Side Effects

we categorize side effects into two types:

Effects with Cleanup: After updating the DOM, we have to clean up some effects. For example, when we need to establish a subscription for any explicit data source, it is essential to clean up the memory to ensure that there is no memory leak.
Effects without Cleanup: We use Effects without Cleanup in effect that does not obstruct the browser in screen updation. Examples of Effects that do not need cleanup are Network requests, Manual DOM mutations, etc.

React Components Lifecycle

2021-02-21T18:00:00.004+05:30

We have learned so far that the React web applications are actually a collection of independent components that run according to the interactions made with them. Each component in React has a life-cycle that you can monitor and change during its three main phases. There are three phases: Mounting, Updating, and Unmounting. You can use life-cycle methods to run a part of code at particular times in the process or application. You can refer to the below diagram to get a visual idea of the life-cycle methods and their interactions in each phase.

Mounting

Mounting is the phase when the component is mounted on the DOM and then rendered on the webpage. We call these methods in the following order when an element is being created and inserted into the DOM:

componentWillMount()
render()
componentDidMount()

componentWillMount(): This function is called right before we mount the component on the DOM. So after this method executes, the component gets mounted on the DOM. It executes this method before the first render of the React application. So all the tasks that have to be done before the component mounts are defined in this method.

render(): This function mounts the component on the browser.

componentDidMount(): We invoke this function right after the component is mounted on the DOM i.e., this function gets called once after the render() function is executed for the first time. Generally, in React applications, we do the API calls within this method.

Updating

We call the methods in this phase whenever State or Props in a component get updated. This allows the React application to “react” to user inputs, such as clicks and pressing keys on the keyboard, and ultimately create a responsive web user interface. These methods are called in the following order to carry on the update of the component:

componentWillReceiveProps()
setState()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

componentWillRecieveProps(): We call This function before a component gets its props reassigned.

setState(): This function can be called explicitly at any moment. This function is used to update the state of a component.

shouldComponentUpdate(): This function is called before rendering a component and tells React whether it should update the component on receiving new props or state. It takes the new Props and new State as the arguments and returns whether or not to re-render the component by returning either True or False.

componentWillUpdate(): This function is called once before the render() function is executed after the update of State or Props.

render(): The component gets rendered when this function is called.

componentDidUpdate(): This function is called once after the render() function is executed after the update of State or Props.

Unmounting

This is the last phase of the life-cycle of the component where the component is unmounted from the DOM. This phase has only one method:

componentWillUnmount(): This function is called once before we remove the component from the page and this marks the end of the life-cycle.

Now that we are familiar with all the life-cycle methods of React components, let us now look at an example to see how each function is implemented in the application code:

DisplayCycle.js

import React from "react";
import DisplayChild from "./DisplayChild";

class DisplayCycle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "Pankaj" };
    console.log("Constructor");
  }
  componentWillMount() {
    console.log("componentWillMount Parent");
  }
  componentDidMount() {
    console.log("componentDidMount Parent");
  }
  shouldComponentUpdate() {
    console.log("shouldComponentUpdate parent");
    return true;
  }
  componentWillUpdate() {
    console.log("componentWillUpdate() called");
  }

  componentDidUpdate() {
    console.log("componentDidUpdate() called");
  }
  componentWillUnmount() {
    console.log("componentWillUnmount() called");
  }
  switchState = () => {
    this.setState({ name: "pankaj Kapoor" });
  };
  render() {
    console.log("render Parent");
    return (
      <div>
        <input type="text" value={this.state.name} />
        <DisplayChild firstname={this.state.name} />
        <button onClick={this.switchState}>Click Me</button>
      </div>
    );
  }
}

export default DisplayCycle;

Output:

React State

2021-02-20T13:40:00.004+05:30

Props are pieces of data passed into a child component from the parent while state is data controlled within a component

What is State?

The state is an updatable structure that is used to contain data or information about the component. The state in a component can change over time. The change in state over time can happen as a response to user action or system event. A component with the state is known as stateful components. It is the heart of the react component which determines the behavior of the component and how it will render. They are also responsible for making a component dynamic and interactive.

Here is an example showing how to use state:

import React, { Component } from "react";
class Test extends React.Component {
  constructor() {
    super();
    this.state = {
      id: 1,
      name: "Pankaj",
    };
  }

  render() {
    return (
      <div>
        <p>{this.state.id}</p>
        <p>{this.state.name}</p>
      </div>
    );
  }
}
export default Test;

Update a component’s state

State should not be modified directly, but it can be modified with a special method called setState( ).

this.state.id = "2021"; // wrong
this.setState({         // correct
    id: "2021"

});

What happens when state changes? OK, why must we use setState( )?

A change in the state happens based on user-input, triggering an event, and so on. Also, React components (with state) are rendered based on the data in the state. State holds the initial information. So when state changes, React gets informed and immediately re-renders the DOM – not the whole DOM, but only the component with the updated state. This is one of the reasons why React is fast.

And how does React get notified? You guessed it: with setState( ). The setState( ) method triggers the re-rendering process for the updated parts. React gets informed, knows which part(s) to change, and does it quickly without re-rendering the whole DOM.

In summary, there are 2 important points we need to pay attention to when using state:

State shouldn’t be modified directly – the setState( ) should be used
State affects the performance of your app, and therefore it shouldn’t be used unnecessarily

Important: Can I use state in every component?

Another important question you might ask about state is where exactly we can use it. In the early days, state could only be used in class components, not in functional components.

That’s why functional components were also known as stateless components. However, after the introduction of React Hooks, state can now be used both in class and functional components.

If your project is not using React Hooks, then you can only use state in class components.

Example

Test.js

import React, { Component } from "react";
class Test extends React.Component {
  constructor() {
    super();

    // Define your state object here
    this.state = {
      id: 1,
      name: "Pankaj",
    };
  }

  //Event Handler
  upDate = () => {
    // setState() that update state of component
    this.setState({
      id: 10,
      name: "Sachin",
    });
  };

  // Define your render method here
  render() {
    return (
      <div>
        <p>{this.state.id}</p>
        <p>{this.state.name}</p>
        <button onClick={this.upDate}>Click me</button>
      </div>
    );
  }
}
export default Test;

Output:



Differences between props and state
 Finally, let’s recap and see the main differences between props and state:
Components receive data from outside with props, whereas they can create and manage their own data with state
Props are used to pass data, whereas state is for managing data
Data from props is read-only, and cannot be modified by a component that is receiving it from outside
State data can be modified by its own component, but is private (cannot be accessed from outside)
Props can only be passed from parent component to child (unidirectional flow)
Modifying state should happen with the setState ( ) method

React Props

2021-02-16T12:34:00.008+05:30

Props are an optional input, and can be used to send data to the component. Props are a way of making components easily and dynamically customizable. It’s important to note that props are read-only and that a component must never modify the props passed to it. This also makes them come in handy when you want to display fixed values.

Now that you know about props, make use of them in the components that we have just created with a custom name appended to it.

Make changes to the code between the script tags in your App.js document to make it look like this:

import MyComponent1 from "./MyComponent1";
import MyComponent2 from "./MyComponent2";

function App() {
  return (
    <div className="App">
      <MyComponent1 name="Beta-Labs" />
      <MyComponent2 name="Beta-Labs" />
    </div>
  );
}
export default App;

This renders the text “Beta-Labs” to the screen. Go ahead and play around with this by switching out the name for yours. Using props added some new syntax to your app.

Using Props with Function Components

1. An argument (props) is passed to the functional component. Recall that since a single argument is being passed to function. Passing this argument lets the component know to expect some data to be passed to it.

2. Within MyComponent1.jsx, the name you want rendered to the screen is passed in by specifying {props.propValue} within the component’s tag.

3. In the h3 tag, {} are used to print the name that is added to the props object when it’s passed in via the component’s tag. Notice that the name attribute is accessed using the dot syntax.

There is no limit to how many props can be supplied to a component. Now Make changes to the code of MyComponent1.jsx to pass props to the class component:

MyComponent1.js

import React from "react";
function MyComponent1(props) {
  return (
    <div>
      <h1>This is Function Component </h1>
      <h3>created by: {props.name}</h3>
    </div>
  );
}
export default MyComponent1;

Using Props with Class Components

Adding props to class components is a very similar process to the one used in the functional component above. There are three notable changes:

1. Props is not passed as an argument to the class

2. The name attribute is accessed using this.props.name instead of props.name

3. To pass props to the class component, We just define the normal constructor function (which receives a props object) and call the super method to honour the inheritance of the component.

Now Make changes to the code of MyComponent2.jsx to pass props to the class component:

MyComponent2.js

import React from "react";

class MyComponent2 extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>This is Class Component </h1>
        <h3>created By: {this.props.name}</h3>
      </div>
    );
  }
}
export default MyComponent2;

React Fragment

2021-02-15T14:51:00.005+05:30

We know that we make use of the render method inside a component whenever we want to render something to the screen. We may render a single element or multiple elements, though rendering multiple elements will require a ‘div’ tag around the content as the render method will only render a single root node inside it at a time.

Example: Create a React app and edit the App.js file from the src folder as:

import React from "react";
function App() {
  return (
    // Extraneous div element
    <div>
      <h1>Importance of React Fragment</h1>
      <p>
        Fragments let you group a list of children without adding extra 
        nodes  to the DOM.
      </p>
    </div>
  );
}
export default App;

Output:

Reason to use Fragments: As we saw in the above code when we are trying to render more than one root element we have to put the entire content inside the ‘div’ tag which is not loved by many developers. So in React 16.2 version, Fragments were introduced, and we use them instead of the extraneous ‘div’ tag.

Syntax:

<React.Fragment>

      <h2>Child-1</h2>
      <p> Child-2</p>
</React.Fragment>;

Example: Open App.js and replace the code with the below code.

import React from "react";
function App() {
  return (
    // Simple rendering with fragment syntax
    <React.Fragment>
      <h1>Importance of React Fragment</h1>
      <p>
        Fragments let you group a list of children without adding extra 
        nodes to the DOM.
      </p>
    </React.Fragment>
  );
}
export default App;

Output:

Shorthand Fragment: The output of the first code and the code above is the same but the main reason for using is that it is a tiny bit faster when compared to the one with the ‘div’ tag inside it, as we didn’t create any DOM node. Also, it takes less memory. Another shorthand also exists for the above method in which we make use of ‘<>’ and ‘</>’ instead of the ‘React.Fragment’.

Note: The shorthand syntax does not accept key attributes in that case you have to use the <React.Fragments> tag.

Syntax:

<>
    <h2>Child-1</h2>
    <p> Child-2</p>
</>;

Example: Open App.js and replace the code with the below code.

import React from "react";
function App() {
  return (
    // Simple rendering with fragment syntax
    <>
      <h1>Importance of React Fragment</h1>
      <p>
        Fragments let you group a list of children without adding extra 
        nodes to the DOM.
      </p>
    </>
  );
}
export default App;

React Components

2021-02-13T12:55:00.006+05:30

Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e., properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

Every React component have their own structure, methods as well as APIs. They can be reusable as per your need. For better understanding, consider the entire UI as a tree. Here, the root is the starting component, and each of the other pieces becomes branches, which are further divided into sub-branches.

In ReactJS, we have mainly two types of components. They are

Functional Components
Class Components

Function Component

A function component is the simplest form of a React component. It is a simple function with a simple syntax.

MyComponent1.js

import React from "react";

function MyComponent1(props) {

return <h1>This is Function Component </h1>;

}

export default MyComponent1;

We have created a function called MyComponent1 that returned h1 tag as shown above. The name of the function acts as an element, as shown below:

The Component MyComponent1 is used as an Html tag, i.e., < MyComponent1 /> and same is exported using export.

Let us now use this component in index.js file as shown below:

app.js

import MyComponent1 from "./MyComponent1";

function App() {

return (

</div>

);

}

export default App;

Here is the output in the browser:

Class as Component

Class components are more complex than functional components. It requires you to extend from React. Component and create a render function which returns a React element. Here is a ReactJS example that uses a class as a component.

MyComponent2.js

import React from "react";

class MyComponent2 extends React.Component {

render() {

return <h1>This is Class Component </h1>;

}

export default MyComponent2;

The Component MyComponent2 is used as an Html tag, i.e., < MyComponent2 /> and same is exported using export. We can use MyComponent2 component in App.js file as follows:

App.js

import MyComponent1 from "./MyComponent1";

import MyComponent2 from "./MyComponent2";

function App() {

return (

</div>

);

}

export default App;

The Component MyComponent2 is used as an Html tag i.e., < MyComponent2 />

Here is the output of the same.

React JSX

2021-02-12T23:03:00.007+05:30

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. But instead of using regular JavaScript, React code should be written in something called JSX.

Let us see a sample JSX code:

const element = <h1>This is sample JSX</h1>;

JSX (JavaScript Extension), is a React extension which allows writing JavaScript code that looks like HTML. In other words, JSX is an HTML-like syntax used by React that extends ECMAScript so that HTML-like syntax can co-exist with JavaScript/React code. The syntax is used by preprocessors (i.e., transpilers like babel) to transform HTML-like syntax into standard JavaScript objects that a JavaScript engine will parse.

const element = React.createElement(
  "h1",
  null,
  "This is sample JSX"
);

JSX provides you to write HTML/XML-like structures (e.g., DOM-like tree structures) in the same file where you write JavaScript code, then preprocessor will transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.

Why JSX?

It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.
It makes it easier for us to create templates.
Instead of separating the markup and logic in separated files, React uses components for this purpose. We will learn about components in detail in further articles.

Using JavaScript expressions in JSX

In React we are allowed to use normal JavaScript expressions with JSX. To embed any JavaScript expression in a piece of code written in JSX we will have to wrap that expression in curly braces {}.

Consider the below program, written in the app.js file:

const name = "Learner";

function App() {
  return (
    <div className="App">
      <h1>Hello {name}, Welcome to Beta-Labs.</h1>
    </div>
  );
}
export default App;

Output:

In the above program we have embedded the javascript expression const name = “Learner”; in our JSX code. We embed the use of any JavaScript expression in JSX by wrapping them in curly braces except if-else statements. But we can use conditional statements instead of if-else statements in JSX. Below is the example where conditional expressing is embedded in JSX:

import React from 'react';
const i = 1;
const element = <h1>{i == 1 ? "Hello World!" : "False!"} </h1>;

function App() {
  return <div className="App">{element}</div>;
}
export default App;

Output:

In the above example, the variable i is checked if for the value 1. As it equals 1 so the string ‘Hello World!’ is returned to the JSX code. If we modify the value of the variable i then the string ‘False’ will be returned.

Wrapping elements or Children in JSX

Consider a situation where you want to render multiple tags at a time. To do this we need to wrap all of this tag under a parent tag and then render this parent element to the HTML. All the sub-tags are called child tags or children of this parent element.

Notice in the below example how we have wrapped ol, and li tags under a single div element and rendered them to HTML:

import React from "react";

const element = (
  <ul>
    <li>HTML5</li>
    <li>Css3</li>
    <li>JavaScript</li>
    <li>MongoDB</li>
    <li>ReactJS</li>
  </ul>
);

function App() {
  return (
    <div className="App">
      <h1>At Beta Labs You will Learn:</h1>
      {element}
    </div>
  );
}
export default App;

Output:

JSX Styling

React always recommends to use inline styles. To set inline styles, you need to use camelCase syntax. React automatically allows appending px after the number value on specific elements. The following example shows how to use styling in the element.

Example

import React from "react";

const cssStyle = {
  fontSize: "24px",
  color: "white",
  backgroundColor: "black",
  padding: "10px",
  width: "500px",
  textAlign: "center",
  borderRadius: "10px",
};
function App() {
  return (
    <div className="App">
      <h2 style={cssStyle}>Beta-labs-Lets Code Together</h2>
    </div>
  );
}
export default App;

Output:

JSX Comments

JSX allows us to use comments that begin with /* and ends with */ and wrapping them in curly braces {} just like in the case of JSX expressions. Below example shows how to use comments in JSX.

Example

import React from "react";
function App() {
  return (
    <div className="App">
      <h1>Hello from Beta-Labs</h1>
      {/* This is a comment in JSX */}
    </div>
  );
}
export default App;

Create React App & Folder Structure

2021-02-10T23:34:00.006+05:30

In this Article, you will learn how to create a simple React app.

Prerequisites

1. Install Node.js and NPM

2. Install Visual Studio Code

Create React app

1. We will use create-React-app NPX tool to create a simple React app.

2. Open Node.js command prompt.

3. Navigate to the respective folder, where you want to create React app.

4. Type the command given below in a console to install create-React-app using NPX tool.

npx create-react-app myblog

5. Navigate to the myblog folder.

6. Type the command code . in a console to open the app in Visual Studio code.

7. React app will have the folder structure given below.

8. Type the command given below in a console to launch React app in the Browser.

npm start

In the previous section, you learned how to install and create a project in React. Now, whenever we create a React project, it automatically creates a lot of files and folders. So, in this article, I am going to explain what these files and folders are.

When we create a React project, our application's structure looks like this.

node_modules

The node_modules folder holds all the dependencies and sub-dependencies of our project. We only had React, React DOM and React scripts but React scripts have a lot of other dependencies which are present inside this folder.

Public folder

Basically, this folder contains 3 files as we have seen.

favicon.ico - it is an icon file which contains an icon which displays on the browser.
index.html - it is an important file. Due to this file, the public folder, known as “root folder”, gets served by the web server in the end. Index.html is a single HTML page present in this project.
manifest.json - this file contains a lot of information related to our application like short_name, name, icons, start_url, display etc. We can also define other metadata about our application.

src folder

This folder contains actual source code for developers. This is the place where our React application is present. We can create our own subdirectory inside this directory. For faster rebuilds, files inside only this folder are processed by Webpack. However, this folder already contains the following files.

App.css - this file gives some CSS classes or we can say some styling which is used by App.js file.
App.js - App.js is a sample React component called “App” which we get for free when creating a new app.
App.test.js - this is the test file which basically allows us to create the unit tests for different units or we can say for different components.
index.css - it stores the base styling for our application.
index.js - index.js stores our main Render call from ReactDOM (more on that later). It imports our App.js component that we start with and tells React where to render it (remember that div with an id of root?).
logo.svg - this is Scalable Vector Graphics file which contains the logo of Reactjs. By this file, we are able to see ReactJS logo on the browser.
registerServiceWorker.js - as its name applies, it is important for registering a service which is generated automatically and creates Progressive Web Apps which are necessary for mobile React Native apps.

Package.json

It is a standard file found in every project. It contains the information like the name of project, versions, dependencies etc. Whenever we install a third party library, it automatically gets registered into this file.

Example - content of package.json file

A point to be remembered at the time of working with React applications is that, for the project to build, these files must exist with exact filenames.

public/index.html is the page template;
src/index.js is the JavaScript entry point.

We can delete or rename the other files.

MongoDB vs Mongoose

2021-02-03T23:27:00.007+05:30

Mongoose is an Object Data Modelling Library(ODM) for MongoDB and Node.js, providing a higher level of abstraction. It is similar to the relationship between Express and Node, as Express is a layer of abstraction over Node.js while Mongoose is a layer of abstraction over the regular MongoDB driver.

And basically, an object data modelling library is simply a way for us to write our JavaScript code that will interact with the database. We use Mongoose over several other MongoDB drivers, because of the out of box functionalities, that allows for faster and simpler development of our applications. Some of the features that Mongoose provides us are schemas to structure and model our data and relationship, easy data validation, simple query APIs and much more.

⭐ Installing Mongoose and Connecting it to our Database

1. Create a new project, and use the command npm init to initialize the project.

  npm init

2. To install Mongoose, use the command npm install mongoose

  npm install mongoose

3. Now, let us connect our MongoDb database to Mongoose

a) Create a file called app.js and include the following code –

 // Requiring mongoose
 const mongoose = require("mongoose");

 // Connecting to Database
 mongoose.connect("mongodb://localhost:27017/studentDB");

Here, we have first created an instance of mongoose and then saved our MongoDb connection string in the Db object. Make sure that the mongo shell is running, while you do operations on the database.

b) Connecting to the database -

Include the following code -

 mongoose
   .connect("mongodb://localhost:27017/studentDB", {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     useFindAndModify: false,
   })
  .then(() => console.log("Connection Successfull...!!"))
  .catch(() => console.log("Error, Not Connected"));

Here, mongoose.connect() returns a promise, we have used then here to receive the promise, but we can also use async-await here.

4. Now, run node app.js to run the app. We get the following output in the console –

 node app.js

So, Mongoose is now successfully connected to our database.

⭐ Mongoose Schema vs Model

While Mongo is schema-less, SQL defines a schema via the table definition. A Mongoose ‘schema’ is a document data structure (or shape of the document) that is enforced via the application layer. In Mongoose, a schema is where we model our data, where we describe the structure of the data, the default values, the constraints, and validation.

Now, Mongoose is all about Models and a model is like a blueprint that we use to create, query, update and delete documents. To perform any CRUD operations, we need a Mongoose model, and to create a model, we need a schema.

For instance, let us create a schema for Student. A student will surely have a name, course, and duration.

 const studentSchema = new mongoose.Schema();

Here, we have created an instance of the mongoose schema, but it isn't completed yet. We need to pass in the object of the required schema to it.

 const studentSchema = new mongoose.Schema({
    name: String
    });

Here, we have specified our first attribute, or the first field for the document, name. Mongoose uses native JavaScript datatypes, so here we can specify any data type - String, Number, Array, Date or Boolean. This is the most basic way of describing our data. Now, let us add more fields for this schema.

 const studentSchema = new mongoose.Schema({
   name: 
   {
   type: String,
   required: true
   },
   course: String,
   duration: Number,
   reg: Boolean,
   date: {
     type: Date,
     default: Date.now,
   },
 });
 

Note how we have made the name as required, but the other fields need not be necessarily there except date as default, if user not enter anything, it will be set as default.

Now, for the required attribute, we can also pass in the error statement that we want to be displayed when we're missing the field. We just need to pass an array to the required field, as follows -

const studentSchema = new mongoose.Schema({
  name: {
    type: String,
    required: [true, "Name field Missing"],
    }
  }); 

We can also specify default values, for instance, let's save the default value of our date as Date.now which will store the current date and time of student admission.

So, this is our very basic schema, and let's now create a model out of it.

 const Student = new mongoose.model("Student", studentSchema);

📝 Creating Documents -

We use our Student modal to create a new document, just like we create an object using classes in Javascript.

To create a new student with values :

  name: "pankaj",
  course: "btech",
  duration: 4,
  reg: true,
 

To create this as a document, include the following code -

 const stu1 = new Student({
   name: "pankaj",
   course: "btech",
   duration: 4,
   reg: true,
 });
 

This creates a new document and stores it to stu1. To save the document, we use the save() method.

 stu1.save()
   .then((doc) => console.log(doc))
   .catch((error) => console.log(err));

save() method also returns a promise when we save the document.

Now, run the app - node app.js, we get the following output in the console.

You may verify that the document is saved, by running db.students.find() in the mongo shell, to see all the documents in the database.

📝 Creating Multiple Documents -

Now, let us try to save multiple documents to the collection -

 const stu2 = new Student({
   name: "manish",
   course: "mba",
   duration: 4,
   reg: true,
 });

 const stu3 = new Student({
   name: "sachin",
   course: "mca",
   duration: 2,
   reg: true,
 });

 const stu4 = new Student({
   name: "sneha",
   course: "bca",
   duration: 3,
   reg: true,
 });

 Student.insertMany([stu2, stu3, stu4])
   .then((doc) => console.log(doc))
   .catch((err) => console.log(err));

Now, let us try to save a document in which name of the student is missing as name is required field –

Now, if we try to run node app.js, we get the following error -

Now, correct your data and run the command Student.insertMany() to insert multiple records in the collection. app, and we get the following output on the terminal -

And also from the mongo shell, we can verify that our document has been saved -

📝 Reading documents -

We have the find() method to read documents from a collection. To read documents, we use all of the methods directly on the model object.

For instance, to read all documents from the Student model, include the following code:

  const docs = Student.find()
   .then((doc) => console.log(doc))
   .catch((error) => console.log(err));

This gives the following output -

To search for a particular document, we may specify the required attributes and values and pass it as an object to the find() method.

For instance, if we want to find the student with course btech', the following code would work -

 const docs = Student.find({ name: "manish" })
   .then((doc) => console.log(doc))
   .catch((error) => console.log(err));

This gives the following output -

📝 Updating documents -

To update a document, we need its _id which in our case is automatically created by MongoDB.

To update a document, we use the method findByIdAndUpdate() on the model object. The method takes in the _id as a parameter.

For instance - to update the duration of MCA, include the following code in the program -

 const docs = Student.findByIdAndUpdate("601acc5f7275a622ec3b3a03", {
   duration: 2,
 })
   .then((doc) => console.log(doc))
   .catch((err) => console.log(err));
 

Here, "5d794e71922481309c8e6883" is the id of the document. We can verify if the document has been updated using db.students.find() in the mongo shell.

We get the following output -

The duration for course of MCA has been successfully updated.

📝 Deleting Documents -

Deleting a document through Mongoose is very easy. We use the method findByIdAndDelete and pass the id of the document to be deleted as the parameter -

For instance, if we want to delete our first document, include the following code -

 const docs = Student.findByIdAndDelete("601acc5f7275a622ec3b3a05")

This deletes the document with _id="5d794e71922481309c8e6883". We may verify the delete operation through our mongo shell.

We get the following results-

The document has been successfully deleted.

And we are all done ! 🎉

MongoDB Indexes

2021-02-01T13:57:00.006+05:30

Student Collection: Download Student.json

> show dbs
CRUD     0.000GB
admin    0.000GB
config   0.000GB
local    0.000GB
> use CRUD
switched to db CRUD
> show collections
skill
student
test
> db.student.getIndexes()
[
        {
                "v" : 2,
                "key" : {
                        "_id" : 1
                },
                "name" : "_id_",
                "ns" : "CRUD.student"
        }
]
> db.student.createIndex({id:1},{unique:true})
{
        "createdCollectionAutomatically" : false,
        "numIndexesBefore" : 1,
        "numIndexesAfter" : 2,
        "ok" : 1
}
> db.student.createIndex({sec:1},{unique:true})
{
        "ok" : 0,
        "errmsg" : "E11000 duplicate key error collection: CRUD.student index: sec_1 dup key: 
        { sec: \"A\" }",
        "code" : 11000,
        "codeName" : "DuplicateKey",
        "keyPattern" : {
                "sec" : 1
        },
        "keyValue" : {
                "sec" : "A"
        }
}
> db.student.getIndexes()
[
        {
                "v" : 2,
                "key" : {
                        "_id" : 1
                },
                "name" : "_id_",
                "ns" : "CRUD.student"
        },
        {
                "v" : 2,
                "unique" : true,
                "key" : {
                        "id" : 1
                },
                "name" : "id_1",
                "ns" : "CRUD.student"
        }
]
> db.student.find({"id":3})
{ "_id" : ObjectId("601193736aed415ccc1d4bc1"), "name" : "kamal", "lastName" : "sharma", "age" : 11, 
    "averageScore" : 6.4, "id" : 3, "sec" : "A", "gender" : "male" }
>
> db.student.explain().find({id:3})
{
        "queryPlanner" : {
                "plannerVersion" : 1,
                "namespace" : "CRUD.student",
                "indexFilterSet" : false,
                "parsedQuery" : {
                        "id" : {
                                "$eq" : 3
                        }
                },
                "queryHash" : "6DAB46EC",
                "planCacheKey" : "801B9D84",
                "winningPlan" : {
                        "stage" : "FETCH",
                        "inputStage" : {
                                "stage" : "IXSCAN",
                                "keyPattern" : {
                                        "id" : 1
                                },
                                "indexName" : "id_1",
                                "isMultiKey" : false,
                                "multiKeyPaths" : {
                                        "id" : [ ]
                                },
                                "isUnique" : true,
                                "isSparse" : false,
                                "isPartial" : false,
                                "indexVersion" : 2,
                                "direction" : "forward",
                                "indexBounds" : {
                                        "id" : [
                                                "[3.0, 3.0]"
                                        ]
                                }
                        }
                },
                "rejectedPlans" : [ ]
        },
        "serverInfo" : {
                "host" : "LAPTOP-7HHTVTQF",
                "port" : 27017,
                "version" : "4.2.2",
                "gitVersion" : "a0bbbff6ada159e19298d37946ac8dc4b497eadf"
        },
        "ok" : 1
}
> db.student.explain().find({age:25})
{
        "queryPlanner" : {
                "plannerVersion" : 1,
                "namespace" : "CRUD.student",
                "indexFilterSet" : false,
                "parsedQuery" : {
                        "age" : {
                                "$eq" : 25
                        }
                },
                "queryHash" : "3838C5F3",
                "planCacheKey" : "3838C5F3",
                "winningPlan" : {
                        "stage" : "COLLSCAN",
                        "filter" : {
                                "age" : {
                                        "$eq" : 25
                                }
                        },
                        "direction" : "forward"
                },
                "rejectedPlans" : [ ]
        },
        "serverInfo" : {
                "host" : "LAPTOP-7HHTVTQF",
                "port" : 27017,
                "version" : "4.2.2",
                "gitVersion" : "a0bbbff6ada159e19298d37946ac8dc4b497eadf"
        },
        "ok" : 1
}
> db.student.createIndex({age:1},{name:"myAgeIndex"})
{
        "createdCollectionAutomatically" : false,
        "numIndexesBefore" : 2,
        "numIndexesAfter" : 3,
        "ok" : 1
}
> db.student.getIndexes()
[
        {
                "v" : 2,
                "key" : {
                        "_id" : 1
                },
                "name" : "_id_",
                "ns" : "CRUD.student"
        },
        {
                "v" : 2,
                "unique" : true,
                "key" : {
                        "id" : 1
                },
                "name" : "id_1",
                "ns" : "CRUD.student"
        },
        {
                "v" : 2,
                "key" : {
                        "age" : 1
                },
                "name" : "myAgeIndex",
                "ns" : "CRUD.student"
        }
]
> db.student.insert({id:20, "name":"pankaj"})
WriteResult({
        "nInserted" : 0,
        "writeError" : {
                "code" : 11000,
                "errmsg" : "E11000 duplicate key error collection: CRUD.student index: id_1 dup key: 
                { id: 20.0 }"
        }
})
> db.student.insert({id:21, "name":"pankaj"})
WriteResult({ "nInserted" : 1 })
> db.student.insert({id:22, "name":"pankaj", age:31})
WriteResult({ "nInserted" : 1 })

> db.student.dropIndex({age:1})
{ "nIndexesWas" : 3, "ok" : 1 }

> db.student.getIndexes()
[
        {
                "v" : 2,
                "key" : {
                        "_id" : 1
                },
                "name" : "_id_",
                "ns" : "CRUD.student"
        },
        {
                "v" : 2,
                "unique" : true,
                "key" : {
                        "id" : 1
                },
                "name" : "id_1",
                "ns" : "CRUD.student"
        }
]
> db.student.dropIndexes()
{
        "nIndexesWas" : 2,
        "msg" : "non-_id indexes dropped for collection",
        "ok" : 1
}

Chapter 1 "Playing with Loops to Impress"

2021-01-31T22:55:00.000+05:30

COMPETITIVE PROGRAMMING

Chapter 1 "Playing with Loops to Impress"

After a resound success of Virtual tech webinars, we are back to enhance your Programming skills for placements with a 15 individual chapter series.

Objective:

1. To crack coding round in campus placements.

2. To follow the right path and practice coding in initial years

Register now: http://bit.ly/3j4g6Hd

Whatsapp group link:

https://chat.whatsapp.com/IQhwTO3FgmCEePV6SC1KPQ

Instagram:

https://instagram.com/hacknation.in?igshid=ofm103xcl2ml

MongoDB Aggregation

2021-01-27T10:54:00.003+05:30

Student Collection: Download Student.json

// Function to Count no. of Documents in a Collection
db.student.count()


db.student.aggregate([
    //stage-1
    {$match: {sec:"B"} },
    //stage-2 
    {$count: "Total-Student in Sec:B"}
])

db.student.aggregate([
    //stage-1
     {$match: {sec:"B"} },
     //stage-2
     {$group: {_id:"$gender", total_st: {$sum:1}, max_age:{$max:"$age"} } },
     //stage-3
     {$match: {_id:"male"}},
       //stage-4
     {$project: {"max_age":1}}
 ])


 db.student.aggregate([
     //stage-1
     {$group:{_id:"$sec", total_stu:{$sum:1}}},
     //stage-2
     {$sort: {_id:1}},
     //stage-3
     {$skip:1},
     //stage-4
     {$limit:2},
     //stage-5
     {$out: "FilteredCollection"}
 ])


// -------------------Example------------------------
db.skill.insert([
    {name:"pankaj", skills:["c","c++", "python", "java", "web"]},
    {name:"sachin", skills:["web", "python", "java"]},
    {name:"manish", skills:["ml", "Iot", "web"]}
])

Problem: Find the name of the students who are having "web" as their skills.

db.skill.find({skills:"web"})

// Using Aggregation 

db.skill.aggregate([
    {$group:"$skills"}
])

// ----
// $unwind stage
// ----

db.skill.aggregate([
    {$unwind:"$skills"}
])

// ----
// $unwind and group stage
// ----

db.skill.aggregate([
    {$unwind:"$skills"}
    {$group:{_id:"$skills"}}
])

// --------Solution to the Problem ------------------------

db.skill.aggregate([
    {$unwind:"$skills"},
    {$group:{_id:"$skills",count:{$sum:1}, names:{$push:"$name"}}}
    {$match:{_id:"web"}}
])

MEAN vs MERN (Elementary Class-2)

2021-01-08T14:12:00.002+05:30

Beta-Labs

What is Python?

Fullstack Web Development

Introduction to Bootstrap

Bootstrap Grid System

Container – .container or .container-fluid

Row – .row

Column – .col-*-*

Bootstrap Containers

Introduction to JQuery

What is jQuery?

Why jQuery?

jQuery History

JQuery Prerequisite

How to use jQuery?

HTML Crud with FireBase

Website Development Process

Why FullStack Web Development?

React Router

As opposed to traditional multi-page applications, SPAs only maintain one HTML file, commonly index.html. Instead of serving a different HTML file for each path, SPAs depend on client-side routing. React Router is a popular client-side routing library.

Step 1: Install React Router

Step 3: Setup App.js for Routing

Route

Step 4: Adding Navigation Link

Link

Displaying List in React

React Events

onClick Event handler in React

Handling events in class components

Binding in the render() method: One way to resolve the problem of binding is to call bind in a render function. This is done by binding it in the render() function. This method requires calling .bind(this) in the render() function.

Binding in the constructor() method: If binding in the render doesn’t work for you, you can bind in the constructor. See an example below:

onChange Event handler in React

onSubmit Event handler in React

React Hooks

Hook State

Comparison to traditional class Component state

The Rules of Hooks

Hooks Effect

Side Effects

React Components Lifecycle

React State

React Props

React Fragment

React Components

React JSX

Create React App & Folder Structure

MongoDB vs Mongoose

MongoDB Indexes

Chapter 1 "Playing with Loops to Impress"

MongoDB Aggregation

MEAN vs MERN (Elementary Class-2)

Container – `.container` or `.container-fluid`

Row – `.row`

Column – `.col--`