React.js Notes

⭐️Hydration in React⭐️
https://medium.com/@gautamkiran123/hydration-in-react-8e8dff384f93

From here. You will know the difference between CSR and SSR more clearly.
Then we will know what Hydration is.

hydrateRoot() API will compare the rendered content and the server-rendered content and will warn you in case of any mismatches during hydration.

If HTML content is not rendered beforehand you can’t use hydrateRoot() .In this case , createRoot() has to be used.

createRoot() returns an object with two methods — render and unmount

root.unmount() is mostly useful when the root’s DOM node or any of its ancestors gets removed, we can stop removing everything inside that is related to it by calling the unmount method. In simple words, we are telling React to stop with removing the React nodes after we have removed what was necessary , by calling unmount() method.

Medium

hydration in React

diving deep into the concept of hydration

🥰2🔥1

891 viewsedited 17:29

React.js Notes

⭐️ESlint configuration at React with vite⭐️

When initialize React app with vite
npm create vite@latest

don't forget configure Eslint

npm install eslint vite-plugin-eslint eslint-config-react-app --save-dev

And create new file at globally
.eslintrc.json
This file to extend the default rules of ESlint with React rules.
The rules will be like this:
{
"extends": "react-app"
}

Then, in vite.config.js file
import eslint like this:
import eslint from "vite-plugin-eslint"
And add eslint() function inside plugins like this:
plugins: [react(), eslint()],

After that, ESlint will work at your app (★‿★)

🥰4👍2❤1

943 viewsedited 23:18

React.js Notes

⭐️Nested Routes and Index Route⭐️
with react-router-dom

Child Route like this:
<Route path={"/app/cities"} element={<CityList />}/>
The path: "/app/cities"
"/app" → Parent Route
"/citites" → Child Route

Nested Routes like this:

 <Route path={"/app"} element={<AppLayout/>}>
      // Child Routes here
 </Route>

So, <AppLayout /> is the element that's rendered in "/app" any components are exist in <Applayout />

We can use <Outlet /> in any components in AppLayout
<Outlet /> this to render elements that in Child Routes

Then, The elements at Child Routes will rendered at any place in "/app" by instead of <Outlet />

⭐️index Route⭐️
like this:

<Route index={true} element={<Cities />}/>

index={true} is same path={"/"}
or same path of Parent Route

🥰2👍1

1.1K views19:32

React.js Notes

What happen when enter wrong Route in URL ??
- We will add new Route in globally, his path will be "*"
like this:

<Route path={"*"} element={<PageNotFound/>}/>

this Route will be the last Route inside <Routes> ... </Routes>

🔥1🥰1

943 viewsedited 20:09

React.js Notes

⭐️Storing state in the URL⭐️
URL is the best place to store UI state and alternative to useState

(example): open or close panels - currently selected list item - list sorting order - applied list filter
- This useful to make bookmark and share the page

URL like this:
localhost:5173/app/cities/lisbon?lat=38.1242&lang=-9.8364
/app/cities → Path
/lisbon → params
?lat=38.1242&lang=-9.8364 → query string

params → very useful to pass data to the next page
query string → useful to store some global state

I recommend this topic that about DNS:
https://maryam-eid.medium.com/decoding-the-web-iv-dns-domain-names-9e0c5b3a0f27

❤1🔥1

1.03K viewsedited 22:09

React.js Notes

⭐️So to use Params with React Router⭐️
Step-1: Create a new Route
Step-2: Link to that Route (useParam)
Step-3: In that Route, we read the state from URL

1-

<Route path={"/app/cities/:id/:cityname"} element={<City/>}/>

Route example: localhost:5173/app/cities/83723/madrid
here "83723" is "id" param
and "madrid" is "cityname" param

2-

<Link to={`/app/cities/${ele.id}/${ele.cityName}`}> ...... </Link>

here must use template literals with params

3-
Then to get that data from URL.
We use useParams() hook.
We will use this hook only at component in the Route have param like this in step-1 in <City /> component.

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

const {id, cityname} = useParams();

useParams() provided by React Router

to install React Router (¬‿¬)
npm install react-router-dom@version

❤3

1.21K viewsedited 00:31

React.js Notes

Happy Eid with React.js Notes🥰🥰🎊🎊
I hope you have happy days🥰🥰

🎉3❤2👎1

2.01K viewsedited 00:18

React.js Notes

⭐️In Express.js⭐️
XSS-attack in Back-end.
This the best way to solve.
You can use xss library and this middleware instead.

to install xss library:
npm install xss

// 1. turning object into a big string using JSON.stringify
// 2. sanitize it using xss
// 3. parsing it after sanitization
app.use((req, res, next) => {
  const sanitizeBody = xss(JSON.stringify(req.body));
  req.body = JSON.parse(sanitizeBody);
  // 🫡dont forget to add req.params req.query and .... 
  next();
});

example:

// input:⚠️
{
  test: [
    {
      t: "this is my .md content. <strong>yo<strong> <script>alert('xss');</script>  ",
      a: "<script>alert('xss');</script>",
      ts: "<script>alert('xss');</script>",
      testing: [Array]
    }
  ]
}

// result:🧼
{
  t: "this is my .md content. <strong>yo<strong> &lt;script&gt;alert('xss');&lt;/script&gt;  ",
  a: "&lt;script&gt;alert('xss');&lt;/script&gt;",
  ts: "&lt;script&gt;alert('xss');&lt;/script&gt;",
  testing: [ { now: "&lt;script&gt;alert('xss');&lt;/script&gt;" } ]
}

👎1🔥1🥰1

1.7K viewsedited 21:00

React.js Notes

⭐Create a new Type using a Subset of an Interface⭐

"Omit" is a utility type in TypeScript
to construct a new type by passing a current type/interface and select the keys to be excluded from new type.

🔥1🥰1

1.35K views20:30

React.js Notes

⭐️ESlint configuration at React with vite⭐️ When initialize React app with vite npm create vite@latest don't forget configure Eslint npm install eslint vite-plugin-eslint eslint-config-react-app --save-dev And create new file at globally .eslintrc.json…

Update🔥
In React with Vite
Don't install eslint-config-react-app
Just install eslint and vite-plugin-eslint

This is because eslint-config-react-app is specific to create-react-app

eslint-config-react-app No longer for last version for vite.

So that, Only install this

npm install eslint vite-plugin-eslint --save-dev

🔥3

1.27K views14:35

React.js Notes

https://medium.com/@modywmbadr/introducing-the-ecmascript-safe-assignment-operator-simplifying-error-handling-74950fa3a295

https://github.com/arthurfiorette/proposal-safe-assignment-operator

ECMAScript Safe Assignment Operator (?=)

❤1🥰1

1.52K viewsedited 17:29

React.js Notes

⭐️React Native 0.76 with New Architecture⭐️

The New Architecture adds full support for modern React features, including Suspense, Transitions, automatic batching, and useLayoutEffect. The New Architecture also includes new Native Module and Native Component systems that let you write type-safe code with direct access to native interfaces without a bridge.

The New Architecture includes four main parts:
🔹 Synchronous Native Modules:
Type-safe access to native code without the bridge, written in C++ for speed and cross-platform compatibility.

🔹 New Renderer:
Multiple threads allow updates at various priorities, improving responsiveness and reducing jank.

🔹 Event Loop:
Prioritizes urgent updates, aligns with web standards, and lays the groundwork for browser features like microtasks and IntersectionObserver.

🔹 Bridge Removed:
Faster startup and enhanced performance by enabling direct JavaScript-native communication.

To see more details, Visit this site:
Full Blog Post
For detailed explanation:
Youtube Video

👍1🔥1🥰1

1.43K viewsedited 15:57

React.js Notes

⭐️Exploring the Power of the Reflect Object in JavaScript and Its Role in Nest.js Decorators⭐️

- The Reflect object in JavaScript is a versatile built-in object that allows developers to perform meta-programming tasks and interact with object properties and methods in a standardized way. It's particularly useful in frameworks like Nest.js, where it plays a critical role in enabling decorators.

- Nest.js leverages the reflect-metadata library, which works in tandem with the Reflect object to manage and retrieve this metadata.

🔗 Read the full article on Medium: Exploring the Reflect Object in JavaScript & Nest.js Decorators

I appreciate your time and curiosity. Enjoy reading! 💻📚

👍1🥰1👌1

1.45K viewsedited 01:33

About

Blog

Apps

Platform