Eng_Dk

21, Ex- Content Mang @X | Ex- Intern-@elocals, @cuirato | Soft. Engineer @Detroit_Software | Full Stack Developer|

[Eng_Dk @web_dev_Dk]

🚀 Unlock React.js' Hidden Gems! 💎 Ever explored the useReducer hook? 🔄 It's a powerhouse for state management, especially in complex apps. 💡 Dive into its magic with this shopping cart example. Share your insights! #ReactJS #useReducer #StateManagement

[Eng_Dk @web_dev_Dk]

🚀 Unraveling JavaScript magic! 💻✨ Did you know JavaScript's event loop, driven by the 'callback queue,' handles async operations? 🔄 Today, diving into event-driven programming and the logic of async code. Share your insights! #CodingLogic

[Eng_Dk @web_dev_Dk]

🌙 Late-night coding thoughts! 💻 Did you know 'Hello, World!' dates back to 1974 in the C Programming Language book? 🚀 Fascinated by code history. What inspired you today? Share! #CodingLate #TechHistory"

[Eng_Dk @web_dev_Dk]

@LearnersBucket @MeetApollo @yomeshgupta Congrats.

[Eng_Dk @web_dev_Dk]

@engineers_feed Happy Engineer's Day.

[Eng_Dk @web_dev_Dk]

@atShourya Great 👏

[Eng_Dk @web_dev_Dk]

@rite2riddhi Indeed 🙌

[Eng_Dk @web_dev_Dk]

Test hundred for king after almost 3 years, Great knock.

#ViratKohli𓃵

[Eng_Dk @web_dev_Dk]

@rite2riddhi @RishabhPant17 Seriously 😥

[Eng_Dk @web_dev_Dk]

Stay connected for more 🧑‍💻

[Eng_Dk @web_dev_Dk]

↪️ React Js JSX Concepts Recap🔥

1. JSX is a special syntax for React that makes it easier to represent your UI.
2. JSX code you write gets transformed into React.createElement.
3. JSX looks similar to HTML but it is not HTML.

[Eng_Dk @web_dev_Dk]

4. JSX is not part of your browser. You need a tool to transform it into valid JavaScript.
5. A JSX element is an object.
6. you can treat a JSX element like an object.
7. you can assign a JSX element to a variable.
8. you can return a JSX element from a function.

[Eng_Dk @web_dev_Dk]

Stay connected for more🧑‍💻

[Eng_Dk @web_dev_Dk]

↪️ JavaScript Problems🔥
// Quest-How to check two objects have same data using JavaScript ?

// Let's take an example
// const obj1 = {
// name: 'Dibyank',
// age: 21
// };

// const obj2 = {
// name: 'Dibyank',
// age: 22
// };

[Eng_Dk @web_dev_Dk]

Solution 🔥

[Eng_Dk @web_dev_Dk]

* Reconciliation is the process of syncing the Virtual
DOM to the actual DOM.
* ReactDOM completely manages the root element.
* You should not directly change/update the content of
the root element.
*Apps built with React have a single root element (The most common use case)

[Eng_Dk @web_dev_Dk]

React DOM Revisions ↩️

* ReactDOM is the glue between React and the DOM.
* ReactDOM is separate from React
* ReactDOM can be installed with npm install react-dom
* Import ReactDOM's createRoot method with import
{createRoot} from "react-dom/client"

[Eng_Dk @web_dev_Dk]

function createCard() {
const element = document.createElement("div");
element.className = "card";
return element
}

// sample usage (do not modify)
console.log(createCard());

[Eng_Dk @web_dev_Dk]

↪️JavJavaScript DOM
Document.createElement🔥

* Complete the function createCard such that it returns a <div class="card"></div> element ?