4 React UI Components Libraries You Should Be Using

Tremor - https://www.tremor.so/components
Radix-UI - https://www.radix-ui.com/
ShadCN - https://ui.shadcn.com
Next UI - https://nextui.org/

https://github.com/streamich/react-use

Collection of essential React Hooks

npm i react-use

A very great feature in optional chaining.
Naturally, it is for objects. Check if this property exists or not.
But there is something that will benefit you.
It works with function as well
Like this
callback?.()

If this callback function exists? It will be implemented.
If it is not there. Nothing will happen

Here you will need it when you create a custom hook and pass a function to it as another parameter

and take a look at #rules_of_hooks
https://react.dev/reference/rules/rules-of-hooks

https://github.com/pomber/didact
Didact
Build your own React

https://overreacted.io/
Some articles about React.
and the most famous questions about it

https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/?ref=jonas.io

Complete Guide to React Rendering Behavior

https://angularindepth.com/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react

Inside Fiber: in-depth overview of the new reconciliation algorithm in React

https://thoughtspile.github.io/2021/05/17/everything-about-react-refs/

Everything about React refs
What you should and shouldn't do with useRef

https://react.dev/reference/react/useSyncExternalStore

https://twitter.com/sebastienlorber/status/1615329010761842689


useSyncExternalStore ➡️ good way to prevent React hydration issues

⭐And take a look at this⭐️
https://julesblom.com/writing/usesyncexternalstore?ref=jonas.io

https://alexsidorenko.com/blog/react-render-always-rerenders/

A Visual Guide to React Rendering - It Always Re-renders

⭐️Methodology of how useReducer work⭐️

⭐️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.

⭐️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 (★‿★)

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>

⭐️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

⭐️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

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

⭐️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;" } ]
}