46 | );
47 | })}
48 |
49 | );
50 | }
51 | ```
--------------------------------------------------------------------------------
/ReactJS/day-10(JSON & methods).md:
--------------------------------------------------------------------------------
1 | ### Day-10 JSON its uses and Methods
2 |
3 | 👉 JSON its uses and Methods 🔆
4 |
5 | ⚙️ What is JSON?
6 | JavaScript Object Notation
7 | JSON is a lightweight data-interchange format
8 | JSON is language independent
9 | JSON is "self-describing" and easy to understand
10 |
11 |
12 | ⚙️ Where it is used?
13 | Used for data interchange 🛣️ through various forms of technology.
14 |
15 | The most common use of JSON data and files is to read 🤓 data from a server 🖥️ for a website or web application 📲 to display — and change data given the correct permissions.
16 |
17 | Computer applications, programs, mobile apps, and much more all use JSON files.
18 |
19 | ⚙️ Methods:
20 | JSON.stringify():- to convert objects into JSON.
21 | JSON.parse():- to convert JSON back into an object.
22 |
23 | Code Example:
24 |
25 | ```
26 | let student = {
27 | name: 'John',
28 | age: 30,
29 | isAdmin: false,
30 | courses: ['html', 'css', 'js'],
31 | spouse: null
32 | };
33 |
34 | let json = JSON.stringify(student);
35 | console.log(typeof json); // string
36 | console.log(json);
37 | // JSON-encoded object:
38 | // {
39 | // "name": "John",
40 | // "age": 30,
41 | // "isAdmin": false,
42 | // "courses": ["html", "css", "js"],
43 | // "spouse": null
44 | // }
45 | -------------------------------------------------------------
46 |
47 | var json = '{"name": "Peter", "age": 22, "country": "United States"}';
48 |
49 | // Converting JSON-encoded string to JS object
50 | var obj = JSON.parse(json);
51 |
52 | // Accessing individual value from JS object
53 | console.log(obj.name); // Peter
54 | console.log(obj.age); // 22
55 | console.log(obj.country); // United States
56 | ```
57 |
--------------------------------------------------------------------------------
/ReactJS/day-11(controlled and uncontrolled components in react):
--------------------------------------------------------------------------------
1 | ### Day-11 Controlled and Uncontrolled Components in React
2 |
3 | 👋 ⚛️ Controlled and Uncontrolled Components in React 🔆
4 |
5 | The React state will always act as "the source of truth".
6 |
7 |
8 | ⚙️ Controlled Components
9 | 👉 Controlled components are forms that are handled entirely by a React component and a hook called useState.
10 | 👉 useState is a hook that automatically refreshes the application whenever a change is made to its state variable (prop).
11 | 👉 Form elements become controlled elements once the value is set to a prop.
12 | 👉 It will track every change done to the form (every input down to the letter)
13 |
14 |
15 |
16 | ⚙️ Uncontrolled Components
17 | 👉 Uncontrolled components are controlled by the DOM instead of an individual component.
18 | 👉 Uncontrolled components use the useRef attribute. You can use useRef as a way to access values from the DOM.
19 | 👉 We first bring in the useRef hook then we use a ref attribute in our JSX to give the current value to our ref variable.
20 | 👉 This gives us access to the submitted form information.
21 |
22 |
23 | Code Example:
24 |
25 | ```
26 | // Controlled Components
27 |
28 | import React, { useState } from "react";
29 |
30 | function Form() {
31 | const [name, setName] = useState("");
32 |
33 | console.log(name);
34 |
35 | return (
36 |
41 | );
42 | }
43 |
44 | export default Form;
45 | -------------------------------------------------------------
46 | // Uncontrolled Component
47 |
48 | import React, { useRef } from "react";
49 |
50 | function Form() {
51 |
52 | const ref = useRef();
53 |
54 | const handleSubmit = (e) => {
55 | e.preventDefault();
56 | console.log(ref.current.value)
57 | };
58 |
59 | return (
60 |
65 | );
66 | }
67 |
68 | export default Form;
69 | ```
70 |
--------------------------------------------------------------------------------
/ReactJS/day-12:
--------------------------------------------------------------------------------
1 | ### Day-12 👋 ⚛️ React Query- The "missing" data-fetching library for React🔆
2 |
3 | React Query- The "missing" data-fetching library for React🔆
4 |
5 | React Query is a library for fetching and caching data in React applications.
6 |
7 | It provides a declarative API for fetching, storing, and retrieving data. React Query is designed to be used with React Hooks.
8 |
9 | ⚙️ Why React Query?
10 | 👉 It can help make your application more responsive by caching data and automatically refetching it when necessary.
11 |
12 | 👉 React Query can improve the performance of your application by batching requests and avoiding unnecessary network traffic.
13 |
14 | 👉 Makes it easier to handle errors by providing a builtin error handling mechanism.
15 |
16 |
--------------------------------------------------------------------------------
/ReactJS/day-13(importsAbsolut).md:
--------------------------------------------------------------------------------
1 | ### Day-13 Are you importing components like ../../../Components/Dashboard/Profile in React
2 |
3 | 👋 Are you importing components like ../../../Components/Dashboard/Profile in React ⚛️?
4 |
5 | The Problem with ../../../ imports:
6 | - you would need to update all of your imports in your project and add one extra ../ to all of your imports.
7 | - Hard to refactor.
8 | - It becomes worse as you get further deeper into it.
9 | - You need to change the entire codebase if you need to extract the code to be used externally as an NPM module.
10 |
11 | Benefits of Absolute Import:
12 | -You can move your existing code to other components with imports without any changes.
13 | -You can directly copy/paste code from a component and use it anywhere else without making any changes to the imports.
14 | -Using the import path, you can quickly identify where the component is actually placed.
15 | -Cleaner Code.
16 | -Easier to write.
17 |
18 |
19 | Code Example:
20 |
21 | ```
22 | // Without Absolute Import
23 |
24 | import React from "react";
25 | import Button from "../../Button/Button";
26 | import { LINKS, STRINGS } from "../../../utils/constants";
27 | import styles from "./App.module.css";
28 |
29 | function App() {
30 | return (
31 |
55 | );
56 | }
57 |
58 | export default App;
59 | ```
60 |
--------------------------------------------------------------------------------
/ReactJS/day-14(React.strictmode).md:
--------------------------------------------------------------------------------
1 | ### Day-14 Catch Bugs in React with Strictmode
2 |
3 | 👋 Catch Bugs in React with Strictmode
4 |
5 | StrictMode is a tool for highlighting potential problems in an application.
6 | Like Fragment, StrictMode does not render any visible UI.
7 | It activates additional checks and warnings for its descendants.
8 |
9 | Note: Strict mode checks are run in development mode only; they do not impact the production build.
10 |
11 |
12 | Features of React Strict Mode:
13 | -Identifying components with unsafe lifecycles in React.
14 | -Warning about Legacy String Ref API usage.
15 | -Warning about deprecated findDOMNode usage.
16 | -Detecting unexpected side effects.
17 | -Detecting legacy context API.
18 | -Ensuring a reusable state.
19 |
20 |
21 | Benifits of React Strict Mode:
22 | -Preventing Mutations of Values
23 | -Ease of use
24 | -Bug detection
25 | -Facilitating Clean Code
--------------------------------------------------------------------------------
/ReactJS/day-15.md:
--------------------------------------------------------------------------------
1 | ### Day-15 Lazy loading or code splitting is the ability to defer the loading of a chunk of code.
2 |
3 | Lazy loading or code splitting is the ability to defer the loading of a chunk of code.
4 |
5 | If you have some parts of your app that most of your users won't visit, it makes sense to load it lazily instead of increasing your bundle size and hence, decreasing the performance of your app.
6 |
7 | ⚙️ Benefits of lazy loading React component.
8 | 👉 Faster initial loading
9 | 👉 Better User Experience
10 | 👉 Less bandwidth consumption
11 | 👉 Preserving system resources
12 | 👉 Reduced work for the browser
13 |
--------------------------------------------------------------------------------
/ReactJS/day-16.md:
--------------------------------------------------------------------------------
1 | ### Day-16 React's strategy to compute minimal DOM operations when re-rendering the UI.⚛️ Virtual DOM?
2 |
3 | 👋 React's strategy to compute minimal DOM operations when re-rendering the UI.⚛️ Virtual DOM?
4 |
5 | Virtual DOM is just a copy of the original DOM kept in the memory and synced with the actual DOM
6 | by libraries such as React DOM. This process is called Reconciliation.
7 |
8 | React is fast because of its Virtual DOM. It renders everything in JavaScript and then changes only the things changed in the actual DOM.
9 |
10 | What happens when you try to update the DOM in React?
11 | 1. The entire virtual DOM gets updated.
12 | 2. The virtual DOM gets compared to what it looked like before you updated it.
13 | 3. React figures out which objects have changed.
14 | 4. The changed objects, and the changed objects only, get updated on the real DOM.
15 | 5. Changes on the real DOM cause the screen to change.
16 |
--------------------------------------------------------------------------------
/ReactJS/day-2(todo-app).md:
--------------------------------------------------------------------------------
1 | ## React-and-JS-Practice
2 | ### Day-2- Simple-to-do-App
3 |
4 |
5 | #### CodeSandbox Link : https://codesandbox.io/s/day-2-simple-to-do-app-5ys5hw
6 |
7 | ```
8 | import { useState } from "react";
9 |
10 | export default function App() {
11 | const [item, updateItems] = useState(["Read"]);
12 | const [todo, setTodo] = useState("");
13 |
14 | const handleSubmit = (e) => {
15 | e.preventDefault();
16 | if (todo.length === 0 || !todo) return;
17 | setTodo("");
18 | updateItems([...item, todo]);
19 | };
20 | const handleCancel = (index) => {
21 | const newTodos = [...item];
22 | newTodos.splice(index, 1);
23 | updateItems(newTodos);
24 | };
25 | return (
26 |
27 |
To Do Application
28 | setTodo(e.target.value)}
32 | />
33 |
34 |
35 | {item.map((data, index) => (
36 |
37 | {data}
38 |
39 |
40 | ))}
41 |
42 |
43 | );
44 | }
45 | }
46 | ```
--------------------------------------------------------------------------------
/ReactJS/day-3(debouncing).md:
--------------------------------------------------------------------------------
1 | ### Day-3-Debouncing
2 |
3 | #### CodeSandbox Link : https://codesandbox.io/s/day-3-debouncing-7mnmsv
4 |
5 |
6 | Debouncing is a performance optimization technique to reduce the rate at which events trigger functions.
7 |
8 | Very useful to improve the performance of large scale web applications.
9 |
10 | Frequent server API Calling.
11 |
12 | Code Example:
13 | ```
14 | import { useState } from "react";
15 | export default function App() {
16 | const [name, setName] = useState("");
17 |
18 | function debounce(fn, delay) {
19 | let timer;
20 | return function (...args) {
21 | clearTimeout(timer);
22 | timer = setTimeout(() => fn(...args), delay);
23 | };
24 | }
25 |
26 | const handleChange = debounce((e) => {
27 | console.log(e.target.value);
28 | setName(e.target.value);
29 | }, 1000);
30 |
31 | return (
32 |
33 |
34 |
Search
35 | handleChange(e)} />
36 |
{name}
37 |
38 |
39 | );
40 | }
41 | ```
42 | Create a high-order function that takes as arguments:
43 | 1. Callback function.
44 | 2. Delay in ms.
45 | then returns a new function that sets the timer to execute the callback after the timer done.
46 |
47 | Catch here is every call of the function returned from the debounce function will cancel the previous timer using "cleartimeout(timer)" and start a new timer.
48 |
49 | Reason: To insure that the callback function will be executed just once after the time that we passed as an argument in the last call.
--------------------------------------------------------------------------------
/ReactJS/day-4(throttling).md:
--------------------------------------------------------------------------------
1 | ### Day-4-Throttling (Throttle Message Send and Receive Display)
2 |
3 | #### CodeSandbox Link : https://codesandbox.io/s/day-4-throttling-18jeii
4 |
5 | Throttling is a performance optimization technique to reduce the rate at which events trigger functions.
6 |
7 | Throttling enforces a maximum number of times a function can be called over time.
8 |
9 | ## Implementing a throttle function
10 | The throttle function is implemented using a timer that puts the throttled function on cooldown:
11 | -Create a throttle function that accepts a callback and the cooldown duration arguments.
12 | -The throttle function returns a new function, which when executed, stores the call arguments and starts the cooldown timer.
13 | -When the timer finishes, execute the action with the cached arguments and clear them.
14 |
15 | ## Debounce vs. Throttle
16 | Debounce waits for a function to have not been called for a given interval before it will execute the given function, or return the given value. Throttle will execute the given function, or return a value straight away, but only once for a given interval.
17 |
18 |
19 | Frequent server API Calling.
20 |
21 | Code Example:
22 | ```
23 | import { useState } from "react";
24 | export default function App() {
25 | const [sentMessageText, setSentMessageText] = useState("");
26 | const [inputText, setInputText] = useState("");
27 | const [isButtonDisabled, setIsButtonDisabled] = useState(false);
28 |
29 | const throttle = (fun, delay) => {
30 | let run = false;
31 | return function (...args) {
32 | if (!run) {
33 | fun(...args);
34 | run = true;
35 | setTimeout(() => {
36 | run = false;
37 | setIsButtonDisabled(false);
38 | }, delay);
39 | }
40 | };
41 | };
42 | const handleChange = (e) => setInputText(e.target.value);
43 | const handleClick = throttle(() => {
44 | setIsButtonDisabled(true);
45 | setSentMessageText(inputText);
46 | setInputText("");
47 | }, 3000);
48 |
49 | return (
50 |
58 | );
59 | }
60 |
61 | ```
62 |
--------------------------------------------------------------------------------
/ReactJS/day-5(memoization).md:
--------------------------------------------------------------------------------
1 | ### Day-5 Simple Example of Memoization Using Square.
2 |
3 | #### CodeSandbox Link : https://codesandbox.io/s/day-5-memoization-b8yg06
4 |
5 | 👉 What is Memoization 💭 ? How and When to Memoize in JavaScript🔆?
6 |
7 | ⚙️ Memoization is an optimization technique that can help make heavy computation processes more efficient.
8 |
9 | ⚙️ Can help speed up our code, especially when dealing with repetitive and heavy computing functions. Makes applications more efficient and hence faster.
10 |
11 | 🎯 Concept Behind Memoization
12 | It does this by storing computation results in a cache(temporary data store) and retrieving that same information from the cache the next time it's needed instead of computing it again.
13 |
14 | 🔑 Every time our memoize method is executed, one of two things can occur:
15 |
16 | 1️⃣ If the input has been used before, locate it in the cache and immediately return the value stored without executing any further computations.
17 |
18 | 2️⃣ Use the input to execute any necessary computations, store the results in the cache, and return the result.
19 |
20 | If the input has been used before, locate it in the cache and immediately return the value stored without executing any further computations.
21 |
22 | Use the input to execute any necessary computations, store the results in cache, return the result.
23 |
24 | Code Example:
25 |
26 | ```
27 |
28 | function squared(number) {
29 | //Added A Fake Expesive Operation for checking...
30 | for (let i = 0; i < 50000; ++i);
31 | return number * number;
32 | }
33 |
34 | function memoize(cbFunc) {
35 | let cache = {};
36 | return (...args) => {
37 | let argsKey = JSON.stringify(args);
38 | if (!cache[argsKey]) {
39 | cache[argsKey] = cbFunc(...args);
40 | }
41 | return cache[argsKey];
42 | };
43 | }
44 |
45 | const memoizedSquare = memoize(squared);
46 |
47 | console.time("First call");
48 | console.log(memoizedSquare(2)); //returns 4
49 | console.timeEnd("First call"); // First call: 2.281005859375 ms
50 |
51 | console.time("Memoised Second call");
52 | console.log(memoizedSquare(2)); // returns cached value 4
53 | console.timeEnd("Memoised Second call"); // Memoised Second call: 0.031005859375 ms
54 |
55 |
56 | ```
57 |
--------------------------------------------------------------------------------
/ReactJS/day-6(useMemo).md:
--------------------------------------------------------------------------------
1 | ### Day-6 UseMemo- “remember” a computed value between renders.
2 |
3 | #### CodeSandbox Link : https://codesandbox.io/s/day-6-usememo-v3p57w
4 |
5 | 👉 UseMemo- “remember” a computed value between renders. 🔆?
6 |
7 | ⚙️ Each re-render is a snapshot 📸 of what the application's UI should look like 👰♀️ at a given moment in time, based on the current application state.
8 |
9 | ⚙️ Each “re-render” produces picture 🤳 of what the DOM should look like, based on the current state.
10 |
11 | 👉 By re-rendering, React creates a new snapshot, and it “find the differences” and figures out what needs to change.
12 |
13 | 🎯 Re-renders aren't a big deal. But, in certain situations, these snapshots do take a while to create. This can lead to performance problems, like the UI not updating quickly enough after the user performs an action.
14 |
15 | useMemo to resucue:
16 | 1️⃣ Reducing the amount of work that needs to be done in a given render.
17 | 2️⃣ Reducing the number of times that a component needs to re-render.
18 |
19 |
20 | Code Example:
21 |
22 | ```
23 | import React, { useState, useMemo } from "react";
24 | function fibonacci(x) {
25 | if (x <= 0) return 0;
26 | if (x === 1) return 1;
27 | return fibonacci(x - 1) + fibonacci(x - 2);
28 | }
29 |
30 | const App = () => {
31 | const [number, setNumber] = useState(1);
32 | const fib = useMemo(() => fibonacci(number), [number]);
33 |
34 | return (
35 | <>
36 |
37 | Fibonacci of {number} is 👉 {fib}
38 |
39 |
40 |
41 | );
42 | };
43 |
44 | export default App;
45 | ```
46 |
--------------------------------------------------------------------------------
/ReactJS/day-7(useCallback).md:
--------------------------------------------------------------------------------
1 | ### Day-7 useCallback- Avoid unnecessary re-renders with useCallback
2 |
3 | #### CodeSandbox Link : https://codesandbox.io/s/day-7-usecallback-s2z2pj
4 |
5 | 👉 Avoid unnecessary re-renders with useCallback ! 🔆
6 |
7 | ⚙️ Usage
8 | 🏃♀️ Skipping re-rendering of components
9 | 🎊 Updating state from a memoized callback
10 | 🔥 Preventing an Effect from firing too often
11 | 🛠️ Optimizing a custom Hook
12 |
13 |
14 | ⚙️ By default, when a component re-renders, React re-renders all of its children recursively..
15 |
16 | 👉 By wrapping a function in useCallback, you ensure that it’s the same function between the re-renders (until dependencies change).
17 |
18 | 🎯 The difference between useMemo and useCallback.
19 | 👉 useMemo caches the result of calling your function
20 | 👉 useCallback caches the function itself. Unlike useMemo, it does not call the function you provide. Instead, it caches the function you provided.
21 |
22 |
23 | Code Example:
24 |
25 | ```
26 | import React, { useState, useCallback } from "react";
27 |
28 | export default function App() {
29 | const [count, setCount] = useState(0);
30 |
31 | const onClick = useCallback((c) => {
32 | console.log("update!");
33 | setCount(c);
34 | }, []);
35 |
36 | return (
37 |
38 |
Count: {count}
39 |
40 |
41 | );
42 | }
43 | ```
44 |
--------------------------------------------------------------------------------
/ReactJS/day-8(LocalStorage):
--------------------------------------------------------------------------------
1 | ### Day-8 LocalStorage - Browsers Store-House
2 |
3 | #### CodeSandbox Link : https://codesandbox.io/s/day-8-localstorage-0jr2gl
4 |
5 | 👉 📦 LocalStorage - Browsers Store-House 🔆
6 |
7 | ⚙️ localStorage is a web storage object in JavaScript that allows users to save data as key-value pairs.
8 |
9 |
10 | ⚙️ localStorage is often used to add dark mode to applications or to save a to-do item in To-do lists apps and there are a bunch of other use cases.
11 |
12 | 👉 LocalStorage object consists of 5 main methods.
13 | 📦 etItem(): use to add data to localStorage
14 | 📦 getItem(): use to get data from localStorage
15 | 📦 removeItem(): use to remove data from localStorage
16 | 📦 clear(): use to delete all the data from localStorage
17 | 📦 key(): returns the name of the key from the Storage object.
18 |
19 | Code Example:
20 |
21 | ```
22 | import React, { useState, useCallback } from "react";
23 | import { React } from "react";
24 |
25 | function App() {
26 | //save data
27 | const saveData = () =>localStorage.setItem('Object 1', "test object");
28 |
29 | //get data
30 | const getData = () =>{
31 | var data = localStorage.getItem("Object 1")
32 | alert(data)
33 | }
34 | //delete data
35 | const deleteData = () =>localStorage.removeItem("Object 1")
36 |
37 | //delete All data
38 | const deleteAllData = () =>localStorage.removeItem("Object 1")
39 |
40 | return (
41 |
42 |
43 |
44 |
45 |
46 |
47 | );
48 | }
49 |
50 | export default App;
51 | ```
52 |
--------------------------------------------------------------------------------
/ReactJS/day-9(browser-storages).md:
--------------------------------------------------------------------------------
1 | ### Day-9 Cookies vs Local Storage vs Session Stora
2 |
3 |
4 | 👉 Cookies vs Local Storage vs Session Storage 🔆
5 |
6 | ⚙️ We are offered various options by which we store the website’s data on the user’s browsers, also known as browser storage
7 |
8 | ⚙️ It consists of JavaScript APIs that allow us to store data on the client (i.e., on the user's machine), and then it could be retrieved when needed.
9 |
10 | #### Why should we store data in the browser?
11 |
12 |
13 | ⚙️ Performance - data stored locally in the user's browser is instantaneously available.
14 |
15 | ⚙️ Persisting data from a previous browsing session like your username, storing the contents of a shopping cart from the previous session.
16 |
17 | ⚙️ Personalization of the site settings/preferences that affect how your page renders
18 |
19 | ⚙️ Settings like the user’s choice of color scheme, font size, whether some UI elements are visible or not.
20 |
21 | ⚙️ Saving data and assets you want to keep handy if the network connection goes offline or for the site to load quicker.
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------