Forem: k.Jyothi Prakash Reddy

React Router Migration From V5 to V6: A Comprehensive Guide 🚀

k.Jyothi Prakash Reddy — Wed, 27 Dec 2023 06:36:55 +0000

The react-router-dom-v5-compat package enables React Router web apps to incrementally migrate to the latest API in v6 by running it in parallel with v5. It is a copy of v6 with an extra couple of components to keep the two in sync

Incremental Migration

Instead of upgrading and updating all of our code at once (which is incredibly difficult and may cause bugs), we planned to release the react-router migration in two phases...

It looks something like this:

Setup the CompatRouter
Change a <Route> inside of a <Switch> to a <CompatRoute>
Update all APIs inside this route element tree to v6 APIs one at a time
Repeat for all routes in the <Switch>
Convert the <Switch> to a <Routes>
Repeat for all ancestor <Switch>s
Update <Links> You're done!

Phase 1: 📈

npm install react-router-dom-v5-compat

Install a Compatibility Package that is react-router-dom-v5-compat - This package includes the v6 API so that you can run it in parallel with v5. (This package helps migrate our code stages instead of making a big, and risky upgrade in our app )

import { BrowserRouter } from "react-router-dom";
import { CompatRouter } from "react-router-dom-v5-compat";

 export function App() {
   return (
     <BrowserRouter>
      <CompatRouter>
         <Switch>
           <Route path="/" exact component={Home} />
           {/* ... */}
         </Switch>
      </CompatRouter>
     </BrowserRouter>
   );
 }

CompatRouter that synchronizes the v5 and v6 APIs state so that both APIs are available.

Done 💥... We ready for migration

Phase 2:🗺️

Convert <Route> to <CompatRoute>

 import { Route } from "react-router-dom";
 import { CompatRoute } from "react-router-dom-v5-compat";

  export function SomComp() {
    return (
      <Switch>
       <Route path="/project/:id" component={Project} />
       <CompatRoute path="/project/:id" component={Project} />
      </Switch>
    )
  }

<CompatRoute> renders a v5 <Route> wrapped inside of a v6 context. This is the special sauce that makes both APIs available to the component tree inside of this route.

then Migrate below React Router APIs

Upgrade all elements to :

function App() {
  return (
    <BrowserRouter>  
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/products">
          <Products />
        </Route>
      </Switch>
 </BrowserRouter>   
)}

function Products() {
  let match = useRouteMatch();
  return (
    <div>
      <Link to={`${match.url}/me`}>My Profile</Link>
      <Switch>
        <Route path={`${match.path}/me`}>
          <Own />
        </Route>
        <Route path={`${match.path}/:id`}>
          <UserProfile />
        </Route>
      </Switch>
    </div>
  );
}

to (v6) :

function App() {
  return (
    <BrowserRouter>   
  <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Products />} />  
   </Routes>
    </BrowserRouter>   
)}


function Products() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<Product />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

We don’t use Component as a child anymore instead we will use Component in the element props

### what are the changes? ✅
* change all the `<Switch>` to `<Routes>`
* All `<Route>`s and `<Link>`s inside a `<Routes>` are relative. This leads to leaner and more predictable code in `<Route path>` and `<Link to>` 
* `<Route exact>` is gone. Instead, `<Route>` automatically finds the exact matches, and use a  * in their end of the path to indicate they match deeply

Valid route paths:
/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

Invalid route paths:
/users/:id?
/tweets/:id(\d+)
/files//cat.jpg
/files-

👉 Read from v6 useParams() instead of v5 props.match

+ import { useParams } from "react-router-dom-v5-compat";

function Project(props) {
-    const { params } = props.match;
+    const params = useParams();
     // ...
  }

Use ‘useNavigate()’ instead of ‘useHistory()’:

From (v5) :

import { useHistory } from "react-router-dom";

function App() {
  let history = useHistory();
  function gotoHome() {
    history.push("/home");
  }
  function backToLogin() {
    history.replace("/login");
  }
  return (
    <div>
      <button onClick={gotoHome}>go to Home</button
      <button onClick={backToLogin}>login</button>
    </div>
  );
}

to (v6) :

import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
 function gotoHome() {
    navigate("/home");
  }
  function backToLogin() {
    navigate("/login", { replace: true });
  }
  return (
    <div>
      <button onClick={gotoHome}>go to Home</button
      <button onClick={backToLogin}>login</button>
    </div>
  );
}

Use `<Navigate>` instead of `<Redirect>`:

From (v5) :

<Redirect to="about" />
<Redirect to="home" push />

to (v6) :

<Navigate to="about" replace />
<Navigate to="home" />

Replace `useRouteMatch` with `useMatch`:

useMatch is very similar to v5's useRouteMatch

NavLink ActiveClassName removed:

<NavLink
  to="/messages"
  className="nav-link"
  activeClassName="activated"
  className={({ isActive }) => "nav-link" + (isActive ? " activated" : "")}
>
  Messages
</NavLink>

Remove `<Prompt>`💔:

<Prompt> from v5 is not currently suppported in v6

👉 Remove the compatibility package

npm uninstall react-router-dom-v5-compat

👉 Uninstall react-router and history

npm uninstall react-router history

👉 Install React Router v6

npm install react-router-dom@6

Phase 3: 🚀

Once we migrated all of our code we can remove all the <CompatRoute>, <CompatRouter> and compatibility package (react-router-dom-v5-compat) and install React Router DOM v6 directly.

import { BrowserRouter } from "react-router-dom";

  export function App() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          {/* ... */}
        </Routes>
      </BrowserRouter>
    );
  }

Finally, we fully migrated to React Router V6 🎉 🎉

Don't forget to comment down if you're stuck, add your own tips, and help others with their questions 🙏

JavaScript Filter

k.Jyothi Prakash Reddy — Sat, 20 Nov 2021 05:09:33 +0000

Definition
Filter Tips
Conclusion

Definition

The filter() method returns new array with all the elements that pass the test implemented by provided function.

Filter Tips

Check below code for filter.

If you have array like this.

const data=[
  {name:"prakash",age:20},
  {name:"bhanu",age:21},
  {name:"mohan",age:40}
];

// Then instead of writing code like this 
const select_user=data.filter(function(user){
    if (user.name==="prakash"){
       return true
    }
    return false
});

You can simplify code as shown it below:


let selected_user=data.filter(function(user) {
    return user.name==="prakash"
})

The above code will return true,if the condition is satisfied otherwise it will return false

We can simplify above code much more simple and understandable using ES6 syntax.


let selected_user=data.filter((user)=> user.name==="prakash")

Conclusion

Filter method returns a new array consisting only those
elements that satisfied the provided function.
Filter method does not change original array.
Filter method does not execute function for empty elements.

I hope You will learn something from this post.If there are more usecases, please mention in below comment section.

Thanks.

Difference between forEach and map.

k.Jyothi Prakash Reddy — Thu, 18 Nov 2021 05:03:19 +0000

Javascript has some handy methods which is usefull to iterate arrays.The most two common methods is Array.prototype.forEach() and Array.prototype.map().we can iterate arrays with both methods but output is different.This methods is unclear for many developers, espescially for beginners.

Definition
1.Return value
2.The ability to chain other methods
4.When to use? what?
Final Thoughts

Definition

The map() method creates a new array every time with the populated results of calling a provided function on every element in the calling array.

The forEach() method executes with the provided function once for each array element.

Return value

The major difference between map() and forEach() is returning value.map returns new array with transformed elements based on the function which you written and even if they do same job, The returning value is undefined.

let users=["jyothiprakash","bhanu","nikitha"]
const newArray=users.map((d)=>{
  return {_id:d}
})
//>>>>[{_id: "jyothiprakash"},{_id: "bhanu"},{_id: "nikitha"}]

const newArray=users.forEach((d)=>{
  return {_id:d}
})
//>>>>>>>>>>>>>return value: undefined

Ability to chain

The difference between map() and forEach() is chain with other methods.map is chainable but forEach isn't.

This means map can chain with other methods like reduce(),sort() etc.But that is not possible with forEach because it will return undefined.

let data=[1,2,3,4,5]

let res=data.map((d)=>d*2).reduce((total,value)=>total+value)
// return value:30

let res=data.forEach((d)=>d*2).reduce((total,value)=>total+value)

//Cannot read properties of undefined (reading 'reduce')"

when to use `map()`? and when to use `forEach()`?

Choice between forEach and map is depends on your usecase.

If you want to change,alternate or use data you can pick map because it will return a new array.

If you don't want returning array you can use forEach or even for loop.

Final Thoughts

1.Just about anything you can with forEach() and map() methods.

2.map allocates memory and always stores return value.forEach through away return values and always return undefined.

3.forEach will allow a callback function to mutate current array but map won't mutate current array instead return new array.

I hope this post will clear difference between map and forEach methods.If there are more methods please mention in comment section.

If this post is helpful please click on ❤️ Tab.

Thanks.

JavaScript:What is Pure Functions and What is the use?

k.Jyothi Prakash Reddy — Mon, 19 Apr 2021 02:07:38 +0000

When I heard about the Pure Functions in JavaScript, I got shocked. What about the regular functions in JavaScript?. Is there any difference b/w Pure and regular functions?.

What is Pure Function?

1)The function always returns the same result if the same arguments passed in.it doesn't depend on any state, variable, data and change in program execution.it must only depends on program execution.

const data = (a, b) => a + b;
data(2, 4);

let a = 6;
const sum = (b) => {
  return (a += b);
};
sum(4);

Pure Functions:

If you see above first code block.it is not depending on any variable or state. Based on the input data it will give output without affecting.
if You pass 2 and 4 you will get 6.

So there is no side effects in pure functions.

ImPure Functions:

The second example returns nothing. It depends on the variable which is outside the scope.
You will get different results when you called function.the first time result is 10 and next time result is 12.

Side Effects:

1)mutating Input Directly.
2)HTTP Calls.
3)logging.
4)Manipulating DOM.

How to Convert Impure to Pure Functions?

####Impure Function.

const impurefunc = (name, key, mainobject) => {
  mainobject[key] = name;
};
const human = {
  name: "Jyothi Prakash",
};
let data = impurefunc("Mohan", 45, human);
console.log(data, human);

The variable human always changed because our function introduced as an assignment variable.

We Can purify the impurefunc as pure function with desire properties.

Converting to Pure:

const impurefunc = (key, name, mainobject) => {
  const newObject = { ...mainobject };
  newObject[key] = name;
  return newObject;
};
const human = {
  name: "Jyothi Prakash",
};
let data = impurefunc("Mohan", 45, human);
console.log(data, human);

Mutating your input can be dangerous, but copy of the original object no problem.

Summary:

1)You can clone and then mutate your input. Without touching the original one.
2)Spread Syntax (...object) is the easiest way for cloning shallowly objects

Thanks for reading this article.

ReactJS Dark mode using local storage(Part-2)

k.Jyothi Prakash Reddy — Fri, 22 May 2020 02:28:17 +0000

In previous blog post we discussed local storage, and how local storage is working and how data is stored in local storage and how retrieve data from ls.

In order to follow rest of the article, I would recommend to to read part-1 blog post.

ReactJS Dark mode using local storage(Introduction Part1)

Discussions: useState(),useEffect()

useState()

useState is a hook that let you add react state to functional components.since React hooks has been released functional components can use state.

syntax

const [dark, setDark] = useState("");

useEffect()

If you are familiar with class based lifecycles method then you will think about useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Life cycles method is very important in class based components and sometimes you want to fetch data from API and when render a component.
sometimes you want to do specific action when your component updates.In lifecycle methods most important methods are componentDidMount and componentDidUpdate.useEffect allow us to handle our logic in lifecycles methods.useEffect called every time when your component is changed.

Lets dive into code

index.js

import React, { useState, useEffect } from "react";
import "./App.css";
import ReactDOM from 'react-dom';



function App() {
  const [dark, setDark] = useState(getMode);

  useEffect(() => {
    localStorage.setItem("dark", JSON.stringify(dark));
  }, [dark]);

  function getMode() {
    const savedmode = JSON.parse(localStorage.getItem("dark"));
    return savedmode || false;
  }
  return(
    <div>
    <h1 style={{textAlign:"center"}}>Darkmode with ReactJS</h1>
    </div>
  )
}
ReactDOM.render(<App />,document.getElementById('root'));

Output

This is how local storage is working in live example and setItem() is used to set the value in localstorage and getItem() is used to retrive the data from localstorage.

App.css

.black {
  background-color: black;
  color: white;
}
.light {
  background-color: blanchedalmond;
  color: black;
}
.nav {
  background-color: blue;
  color: white;
}
.toggle-container {
  background-color: blue;
  padding: 20px;
  display: flex;
  justify-content: center;
}

This basic CSS what I did for dark mode.

return (
    <div className={dark ? "black" : "light"} style={{ height: "100vh" }}>
      <nav>
        <div className="toggle-container">
          <span style={{ color: dark ? "grey" : "yellow" }}>☀︎</span>
          <span className="toggle">
            <input
              checked={dark}
              onChange={() => setDark((prevMode) => !prevMode)}
              id="checkbox"
              className="checkbox"
              type="checkbox"
            />
            <label htmlFor="checkbox" />
          </span>
          <span style={{ color: dark ? "slateblue" : "grey" }}>☾</span>
        </div>
      </nav>

      <div style={{ textAlign: "center" }}>
        <h1>{dark ? "darkmode" : "lightmode"}</h1>
        <p>This is dark mode content</p>
        <h1>The darkmode is implemented by reactjs</h1>
      </div>
    </div>
  );

The logic behind dark mode in ReactJS and Iam checking previous mode is not equal to current mode then the display the mode based on logic.

Final code

import React, { useState, useEffect } from "react";
import "./App.css";
import ReactDOM from 'react-dom';



function App() {
  const [dark, setDark] = useState(getMode);

  useEffect(() => {
    localStorage.setItem("dark", JSON.stringify(dark));
  }, [dark]);

  function getMode() {
    const savedmode = JSON.parse(localStorage.getItem("dark"));
    return savedmode || false;
  }
  return (
    <div className={dark ? "black" : "light"} style={{ height: "100vh" }}>
      <nav>
        <div className="toggle-container">
          <span style={{ color: dark ? "grey" : "yellow" }}>☀︎</span>
          <span className="toggle">
            <input
              checked={dark}
              onChange={() => setDark((prevMode) => !prevMode)}
              id="checkbox"
              className="checkbox"
              type="checkbox"
            />
            <label htmlFor="checkbox" />
          </span>
          <span style={{ color: dark ? "slateblue" : "grey" }}>☾</span>
        </div>
      </nav>

      <div style={{ textAlign: "center" }}>
        <h1>{dark ? "darkmode" : "lightmode"}</h1>
        <p>This is dark mode content</p>
        <h1>The darkmode is implemented by reactjs</h1>
      </div>
    </div>
  );
}
ReactDOM.render(<App />,document.getElementById('root'));

Output

conclusion

I did this blog post for whom don't know about reactjs and localstorage.I thought you will learn little bit from this article.

Thank you guys!!!..

ReactJS Dark mode using local storage(Introduction Part1)

k.Jyothi Prakash Reddy — Thu, 21 May 2020 02:35:18 +0000

Discussions:React Hooks, local-Storage

Introduction:

Today I am going to discuss dark-mode in ReactJS, recently I started learning ReactJS, I struggled much time for how dark mode is working in local storage. After struggling, I made a post in ReactJS dark mode.

What is local-storage ?

local-Storage is a web storage that allows JS sites and apps to store and access data right in the browser with no expiration date.the data is stored in browser even after the browser window is closed.

Hooks

Hooks are functions, they let you use React without classes, we mean that hooks allow us to easily manipulate the state of our functional component without needing to convert them into class components.

There are three methods to choose from:

1) setItem(): Add key and value to localStorage
2) getItem(): Retrieve a value by the key from localStorage
3) removeItem(): Remove an item by key from localStorage

setItem()

It takes two parameters: a key and a value. The key can be referenced later to fetch the value attached to it.

localStorage.setItem('name', 'python');
Where name is key and Jyothi Prakash is value.note that local storage only store strings
To store arrays or objects you should convert them to strings.To do this we should use JSON.stringify() method before passing to SetItem().

const data={
name:"python",
framework:"Django"
}
localstorage.setItem("language",JSON.stringify(data))

getItem()

getItem() method is used to access the data stored in local storage object.

It accepts only key and returns a value as string

localstorage.getItem("language")

This return a string with the value:

“{“name”:” python”,” framework”:” Django”}”

To this value you have converted it back to object.
To do this we use JSON.parse() method which is convert JSON string to object.

const value=JSON.parse(localstorage.getItem("language"))

removeItem()

removeitem() is used to remove the key in local storage if it exists.if there is no key, the method will do nothing.

localstorage.removeItem("language")

localstorage Limitations

1) local storage is limited to 5 MB across all browsers.
2) Don't store sensitive information in local storage.
3) local storage can only be read by the client-side

I hope everyone likes this post, This is my first Blog post in DEV and Here is Part-2

Forem: k.Jyothi Prakash Reddy

React Router Migration From V5 to V6: A Comprehensive Guide 🚀

Incremental Migration

Phase 1: 📈

Phase 2:🗺️

Upgrade all elements to :

👉 Read from v6 useParams() instead of v5 props.match

Use ‘useNavigate()’ instead of ‘useHistory()’:

Use <Navigate> instead of <Redirect>:

Replace useRouteMatch with useMatch:

NavLink ActiveClassName removed:

Remove <Prompt>💔:

👉 Remove the compatibility package

👉 Uninstall react-router and history

👉 Install React Router v6

Phase 3: 🚀

JavaScript Filter

Definition

Filter Tips

Conclusion

Difference between forEach and map.

Definition

Return value

Ability to chain

when to use map()? and when to use forEach()?

Final Thoughts

JavaScript:What is Pure Functions and What is the use?

What is Pure Function?

Pure Functions:

ImPure Functions:

Side Effects:

How to Convert Impure to Pure Functions?

Converting to Pure:

Summary:

ReactJS Dark mode using local storage(Part-2)

ReactJS Dark mode using local storage(Introduction Part1)

Discussions: useState(),useEffect()

useState()

syntax

useEffect()

Lets dive into code

index.js

Output

App.css

Final code

Output

conclusion

ReactJS Dark mode using local storage(Introduction Part1)

Introduction:

What is local-storage ?

Hooks

There are three methods to choose from:

setItem()

getItem()

removeItem()

localstorage Limitations

Use `<Navigate>` instead of `<Redirect>`:

Replace `useRouteMatch` with `useMatch`:

Remove `<Prompt>`💔:

when to use `map()`? and when to use `forEach()`?