Forem: Devi

Dynamic routing in React

Devi — Tue, 27 Aug 2024 09:11:03 +0000

Dynamic routing in React allows you to create routes based on dynamic data or parameters, enabling more flexible and powerful navigation within your application. This is particularly useful for applications that need to render different components based on user input or other dynamic factors.

Setting Up Dynamic Routing with React Router
You’ll typically use the react-router-dom library to implement dynamic routing in React. Here’s a step-by-step guide:

Install React Router: First, you need to install react-router-dom if you haven’t already:
npm install react-router-dom

Create Routes: Define your routes using the component. Use dynamic segments in the path to capture parameters.
JavaScript

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

Access Route Parameters: Use the useParams hook to access dynamic parameters within your components.
JavaScript

import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

Example: Dynamic User Profiles
Let’s create a simple example where we navigate to different user profiles based on the user ID in the URL.

Home Component: This component will have links to different user profiles.
JavaScript

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

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <ul>
                <li><Link to="/user/1">User 1</Link></li>
                <li><Link to="/user/2">User 2</Link></li>
                <li><Link to="/user/3">User 3</Link></li>
            </ul>
        </div>
    );
};

export default Home;

UserProfile Component: This component will display the user ID from the URL.
JavaScript

import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

App Component: This component sets up the router and defines the routes.
JavaScript

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

Asynchronous JS

Devi — Sun, 25 Aug 2024 09:15:13 +0000

JavaScript is synchornous single threaded language.
But, We can acheive Asynchornous operation using following 3 methods

1.Callback
2.Promises
3.Async await

1. Callbacks
A callback is a function passed as an argument to another function, which is then executed inside the outer function to complete some kind of routine or action.

function fetchData(callback) {
    setTimeout(() => {
        callback('Data fetched');
    }, 1000);
}

function displayData(data) {
    console.log(data);
}

fetchData(displayData);

In this example, fetchData simulates an asynchronous operation using setTimeout. Once the data is “fetched,” it calls the displayData function.

2. Promises
Promises provide a more robust way to handle asynchronous operations. A Promise represents a value that may be available now, or in the future, or never.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

Here, fetchData returns a Promise that resolves after 1 second.The then method is used to handle the resolved value, and catch handles any errors.

3. Async/Await
Async/Await is syntactic sugar built on top of Promises, making asynchronous code look and behave more like synchronous code.async

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 1000);
    });
}

async function displayData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

displayData();

In this example, fetchData returns a Promise, and displayData uses the await keyword to wait for the Promise to resolve. The try/catch block is used to handle any errors.

Simple React Interview Questions and Answers 🔍

Devi — Thu, 04 Apr 2024 14:30:06 +0000

1.What is state & props / Difference between state and props:
In reacting while building an application we'll break the page into small reusable components to make it more readable and to manage easily,
State: we've to use state to manage data inside a component.
Props: Props are some data that a component receives from another component

2. What "create-react-app" will do?
create-react-app will create a react project with necessary packages and bundlers (react by default has a bundler called web pack). It'll compile and run the project in localhost.

3. what is the robot.txt file in react?
if web designers create something on their website and don't want Google or other search engines to access it, they'll write it in robot.txt and it will be helpful for SEO too.

4. Types of components in react?
Functional components: A normal JS function that can manage multiple functions inside that.
Class-based components: created using class keywords in Javascript.
Functional is a new way, easy to use compared to class components

5. What is JSX?
JavaScript XML, which will be used to create HTML elements inside DOM.

6. what are Hooks in react?
Hooks are utility functions. to manage a state in functional components we'll use state (useState hook) from react.

useState: to create a special dynamic variable by re-rendering automatically.
UseState will return an array
const [data,setData] = useState('')

JavaScript variables and scope

Devi — Tue, 02 Apr 2024 10:05:52 +0000

JavaScript Identifiers

In JavaScript, we can assign names to functions, variables, and objects. These names are used to reference and utilize the specific function, variable, or object.

Just as we all have names to identify us, functions, variables, and objects in JavaScript have unique names. These are called identifiers.

Rules for Identifiers:

Within a scope, the variable name must be unique. This applies to both block scope and global scope. If the same name is given to multiple variables, the most recently assigned value will be used.
Identifiers should start with an uppercase letter, lowercase letter, underscore, or dollar sign. This rule applies only to the first letter of an identifier.
Reserved keywords must not be used as identifiers.
Identifiers are case-sensitive: ‘helloWorld’ and ‘HelloWorld’ are different.
When using strict mode, certain keywords are also restricted.
Avoid using future reserved words.
Other reserved words should be avoided as well.

Variables and Scope

Any type of variable can be used; once it’s assigned, we can change the type of variable anywhere in the code.

To declare a variable, name it (using var, let, or const), and initialize it using the assignment operator:

var name = “Devi”;

=>The variable name should start with an uppercase letter, lowercase letter, underscore, or dollar sign. This rule applies only to the first letter of an identifier.

=> There should be no space within a single variable name (to avoid an ‘unexpected identifier’ syntax error).

=>While non-Latin words can be used, it’s best to avoid them.

=>Multiple variables can be declared using a single statement

var car = "Audi", name = "Devi";
We can reassign any type of value to a variable declared with let:
JavaScript

let a = 100;
a = "hello";
a = { name: "Devi", dept: "ECE" };
It’s possible to reference a variable before it’s declared:
JavaScript

name = "Devi";
console.log(name); // Outputs: Devi
var name;
However, in strict mode, this will not work due to hoisting.

Hoisting
JavaScript moves variable declarations to the top of the code, which prevents errors from occurring when a variable is used before it’s declared:

JavaScript

name = "Devi";
console.log(name);
var name;

useRef in react for beginners

Devi — Wed, 13 Mar 2024 15:12:08 +0000

UseRef will create a reference of a react element, by using that we can mutate the DOM element or a value that is used across the component. Also, we can store some data and that won’t cause a re-render on update.

Steps to use UseRef Hook:

step 1: import it from react

step2: declare it as a ref variable

step 3:pass the ref as an attribute to the JSX .

JS core concepts

Devi — Tue, 12 Mar 2024 13:54:02 +0000

Closures example:

The closure is a javascript nested function where we can access outerfunction variables inside the inner function by calling the innerfunction inside the outer function.

let outerfunction = ()=>{
var count = 0
let innerFunction=()=>{
count++;
console.log(count)
}
return innerFunction;
}

let increment = outerfunction()
increment();
increment();
increment();
increment();

NPM vs NPX

Devi — Tue, 12 Mar 2024 07:55:55 +0000

NPM:

=> Node Package Manager

=> As mentioned in name NPM is for install, delete, update JavaScript packages on your machine.

=> To install a package locally on a certain project we can use the comment

npm install package-name

NPX:

=>Node Package Executer

=> NPX is a tool that use to execute packages directly, without installing them.

=>npx comes bundled with npm version 5.2+ (or as a standalone package).

=>To execute the locally installed package package-name all you need to do is type:

npx package-name

React simple and unique interview questions which some experienced developers also don't aware

Devi — Tue, 12 Mar 2024 07:53:15 +0000

What's the purpose of keeping crossorigin in react cdn comments?

crossorigin attribute helps developers optimize the rates of CDN performance, at the same time, protecting the website code from malicious scripts.