Forem: Sushil Bishnoi

React Router DOM 6.0:

Sushil Bishnoi — Mon, 05 Feb 2024 08:52:38 +0000

Npm install react-router-dom@latest

Dive into the latest React Router DOM 6.0

inside the browser router ...

NavLink in the Navbar component. 🚦💡

One of the strengths of Next.js is its convention-based routing system

Sushil Bishnoi — Wed, 31 Jan 2024 09:09:53 +0000

How does the folder structure look like!!

Link tag in next js

Import the navigation inside the page component

npm run dev (ready to go)

Javascript: A roadmap to learn Javascript🔥🚀

Sushil Bishnoi — Fri, 14 Jul 2023 10:50:47 +0000

Unlocking the Path to JavaScript Mastery: A Self-Taught Programmer's Guide to Starting Strong and Avoiding Common Pitfalls

To give a little context about javascript:

Primarily javascript is for the web. So, When you go to any website or web application there you will see all the content that will get populated using HTML (layout) & CSS (Design).

Whereas javascript plays a role when you try to interact with that application. Let's say you want to fill the form, upload/download a file, enter details, etc. everything is the interaction that you do with that application handled by javascript (behavior).

Hope that clarifies what can javascript actually does.

Mastering JavaScript Fundamentals: A Comprehensive Guide to Syntax:

Variables
Data Types
Operators
Conditional Statements - if, if-else, switch.. etc
Comments
Loops - while, for, etc.

Once is Enough: Mastering Javascript fundamentals for lasting knowledge and understanding.

Unveiling the Language's Building Blocks: A Comprehensive Exploration of

Strings
Arrays
Dates
Math
Regular expression

Practicing Several examples several times make you an expert in using them.

Exploring Essentials Javascript Features:

Functions
Objects
Classes
DOM Manipulation
JSON
Async JavaScript
Modules
other javascript-specific handling like using this, coercion, errors, hoisting, style guide, etc.

Getting the concept of these items is very much important. Learning and practicing with simple examples for 1-2 times enough. You would easily grasp what each one does as per its context.

Inner Workings and Mechanics of the Language.

Browser APIs
Web APIs
javascript execution context
Memory handling
Interpreter/compiler

Go through them once and keep in mind what each does

Keep practicing the below items

Array methods
String methods
Date methods
Regex methods
Math methods

There are couple more things we usually have to follow:

Trying any programming paradigms like functional programming
Going through different javascript blogs
Going through interview questions or programming examples
Doing simple projects

This path makes you a better javascript developer.

Do follow only one website or tutorial or youtube channel where all these contents are covered.
Going through each of them in order will be very much helpful.

Thankyou
All the very best🔥

7 libraries you should know as a React developer🔥🚀

Sushil Bishnoi — Thu, 06 Jul 2023 02:57:05 +0000

As you progress in your quest to become a skilled React developer, you will encounter countless libraries, which may leave you feeling disoriented and bewildered.
However, here's a curated list of seven essential libraries that you can't go wrong with when expanding your React skillset:

1.React joyride

It is an incredible tool to showcase new features to existing users & onboarding new users to your app.
Website: https://react-joyride.com
NPM: https://www.npmjs.com/package/react-joyride

2.React PDF Renderer

React PDF Renderer is a library that helps you create PDF files using React components, thus making the tedious process of creating PDFs a walk in the park.

Website: https://react-pdf.org/
NPM: https://www.npmjs.com/package/@react-pdf/renderer

3.React Beautiful DnD

React Beautiful DnD is a library that helps you create drag and drop interfaces in your React apps.

Website: https://react-beautiful-dnd.netlify.app
NPM: https://www.npmjs.com/package/react-beautiful-dnd

4.Material UI

This is a library that needs no introduction. Material UI is the largest component library for React. It is used by Spotify, Amazon, Netflix and countless other companies.

Website: https://material-ui.com/
NPM: https://www.npmjs.com/package/@mui/material

5.Swiper.js

Swiper.js, as the library name suggests, is a library that helps you create swipeable interfaces in your React apps.

Website: https://swiperjs.com/react
NPM: https://www.npmjs.com/package/swiper

6.React Query

React Query is a data management library which provides immense control of fetching, caching data, and error handling using simple hooks.

Website: https://tanstack.com/query/latest/
NPM: https://www.npmjs.com/package/@tanstack/react-query

7.React Spring

React Spring is a library that helps you create eye-candy animations in your React apps, which ensures high user engagement!

Website: https://react-spring.io/
NPM: https://www.npmjs.com/package/react-spring

To import images in a React app, you can follow these steps:

Sushil Bishnoi — Tue, 27 Jun 2023 06:22:04 +0000

Create a folder named images (or any other name of your choice) in the src directory of your React app. Place the images you want to import into this folder.

In your component file where you want to use the image, import the image using import statement. You can import the image as a variable or directly use it as a source for an tag.

import React from 'react';
import myImage from './images/myImage.jpg'; // Assuming your image file is named myImage.jpg

const MyComponent = () => {
  return (
    <div>
      <img src={myImage} alt="My Image" />
    </div>
  );
};

export default MyComponent;

Alternatively, you can directly use the image as a source for an tag without importing it as a variable:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <img src={require('./images/myImage.jpg')} alt="My Image" />
    </div>
  );
};

export default MyComponent;

export default MyComponent;
Note that when using require, the path to the image file is specified as a string.

Save your changes, and the image should now be imported and displayed in your React app.

Make sure the path to the image file is correct and relative to the component file where you are importing it. Also, ensure that the image file format is compatible with the tag (e.g., JPEG, PNG, GIF, etc.).

How to serve html file using nodejs

Sushil Bishnoi — Sat, 29 Apr 2023 11:20:03 +0000

//The folder structure looks like this 
>public
   >css
      .style.css
.index.html

This code snippet demonstrates how to serve static files using Node.js

const express = require("express")
const app = express()
const path  = require("path")
const port = process.env.PORT || 4000
require('./db/database.js')

const static_path = path.join(__dirname, '../public')

// using middlewares 
app.use(express.static(static_path))
// routes 
app.get("/", (req, res) => {
  res.send("<h1>Hello world</h1>")
});
// server port 
app.listen(port, () => {
  console.log("Server is running")
})

Buy me a coffee: https://www.buymeacoffee.com/sushilk132y