🚀 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
🚀 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
🌙 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"
↪️ 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.
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.
* 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)
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"
function createCard() {
const element = document.createElement("div");
element.className = "card";
return element
}
// sample usage (do not modify)
console.log(createCard());