Sangita Manna’s Post

Random post: 02 𝐓𝐢𝐭𝐥𝐞: How JSX is converted into JS? 🔍 𝗞𝗲𝘆 𝗛𝗶𝗴𝗵𝗹𝗶𝗴𝗵𝘁𝘀: • JSX, • React.createElement(), Whether you’re just starting with React or looking to deepen your knowledge, this post has something for everyone. 📖 𝐑𝐞𝐚𝐝 𝐭𝐡𝐞 𝐟𝐮𝐥𝐥 𝐚𝐫𝐭𝐢𝐜𝐥𝐞 𝐨𝐧 𝐌𝐞𝐝𝐢𝐮𝐦: https://lnkd.in/gmR6RTuC Feel free to leave your thoughts and comments! #𝐑𝐞𝐚𝐜𝐭 #𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 #𝐖𝐞𝐛𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 #𝐏𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐢𝐧𝐠 #𝐓𝐞𝐜𝐡𝐁𝐥𝐨𝐠

I'm excited to share my latest article on Medium. Title: "JavaScript: Single-Threaded But Not Stuck in Slow Lane (How Async Makes it Flow)" https://lnkd.in/gncBPD2E In this article, I delve into the world of concurrency and parallelism, explaining the key differences between the two. We'll then explore how JavaScript, despite being single-threaded, achieves concurrency using asynchronous programming techniques. Whether you're a seasoned JavaScript developer or just starting out, this article offers valuable insights into how JavaScript handles multiple tasks efficiently. Check it out and let me know what you think! #javascript #concurrency #asyncprogramming #medium Please feel free to add a personal touch to this template by mentioning what inspired you to write the article or what you found most interesting during your research.

I have not written an article for quite some while, but today I decided to go back to the roots and write an article on #reactjs. This article actually talks about the working react.js on the web and how it actually renders. It reminds of when I started my journey with react. Take a look #js #reactdeveloper #beginnerfriendly #javascript #frontenddeveloper

🚀 Exciting News, Devs! 🚀 I’m thrilled to share that I’ve just published my very first blog post! 🎉 In this post, I dove into the fascinating world of change detection in Angular and React. 🕵️♂️✨ I explored: 🔍 What Change Detection Is: How it helps keep our UIs in sync with the underlying data. 🔧 Why It Matters: The impact of efficient change detection on application performance. 🔄 Comparing Angular and React and Vanilla Javascript: Insights into how these popular frameworks handle change detection and what that means for developers. If you’re curious about how change detection works and why it’s crucial for modern web applications, check out the blog and join the discussion! 🔗 Read the full blog here https://shorturl.at/yC4E6 I’d love to hear your thoughts and any additional insights you might have. Feel free to share and comment! #Angular #React #WebDevelopment #ChangeDetection #JavaScript #FrontendDevelopment #Coding

🚀 Unknown facts about Arrays in Javascript 🚀 JavaScript arrays are so much more than they seem! Did you know that arrays are actually special kinds of objects in JavaScript? 🤔 This often leads to quirky and unexpected behavior that can surprise even seasoned developers. In my latest Medium blog, I dive deep into some of the strange consequences of this "Array is an Object" reality, covering: Custom properties on arrays 🤯 Non-sequential indexing 🧩 Confusing behavior with the length property 🔢 And more! If you're a developer looking to sharpen your JavaScript skills or just curious about the behind-the-scenes of how arrays work, check out the full article below! 🔗 👉 https://lnkd.in/grKMRFNn #JavaScript #WebDevelopment #Frontend #CodingTips #Arrays #TechBlog

#30daysofcodingReactJSChallenge Day 1 Today I gained more knowledge on JSX (JavaScript XML) and its relevance to React. JavaScript XML formally known as JavaScript Syntax extension is an extension to the Javascript language system. It is an XML-like extension that allows us to write HTML in React Js. JSX is a syntax extension for JavaScript, this means it is tightly coupled with JavaScript and React and it's not used in other programming language like Java and C++ . It focuses on building user interfaces and rendering components Few things to know about JSX: -Tag name, elements and Attribute: JSX been inspired by XML, uses a similar syntax, with elements and attributes represented in a similar way -Expressions are welcomed: React variable, or property, or any other valid JavaScript expression is recognised as expression and written within curly braces{}. The browser will perform whatsoever task is within the curly braces and display the result on the web. One Top Level Element: In JSX, only one top level element is accepted. In react, an error will be passed if you attempt to render two elements within the same component. Multiple element must be wrapped by a div or a fragment. Syntax Changes: Some keywords used in Javascript are not accepted in react. Most popular would be "class" which is now "className", "for" which is now "htmlFor" and so on. I hope this read achieved its purpose of sharing my new knowledge in React. I have little challenge to test your comprehension levels. Which of the following is JSX? Option A: const element = React.createElement('div', null, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); Option B: const element = <div>Hello, world!</div>; ReactDOM.render(element, document.getElementById('root')); Option C: const element = document.createElement('div'); element.textContent = 'Hello, world!'; document.getElementById('root').appendChild(element); Reply in the comment Section. Like, comment and connect. I am Akinola Emmanuel A software developer and fintech enthusiast. #react #reactjs #frontenddevelopment #frontenddeveloper #programming #coding #100daysofcode

🚀 Understanding JSX in React: A Quick Guide 🚀 JSX (JavaScript XML) is a syntax extension for JavaScript that allows us to write HTML-like code in our JavaScript files. It's a game-changer for developing React applications. Let's break it down: What is JSX and How Does It Work in React? 1. JSX Syntax: JSX lets us create React elements using HTML-like syntax. Example: const element = <h1>Hello, world!</h1>; 2. Transformation to JavaScript: JSX code is transformed into regular JavaScript objects by a compiler like Babel. Example: const element = React.createElement('h1', null, 'Hello, world!'); 3. Embedding Expressions: Embed any JavaScript expression within curly braces {}. Example: const name = 'John'; const element = <h1>Hello, {name}!</h1>; 4. JSX Attributes: JSX attributes follow camelCase naming conventions. Example: const element = <div className="myClass" />; 5. Child Components: Include components as children within JSX. Example: function Welcome(props) {  return <h1>Hello, {props.name}</h1>; } const element = <Welcome name="Sara" />; Benefits of Using JSX: - Readability: JSX is more readable and easy to understand. - Component Structure: Makes it easy to visualize and structure components. JSX simplifies the process of building UIs with React, making our code cleaner and more intuitive. #ReactJS #JSX #WebDevelopment #FrontendDevelopment

🌟 **What is JSX? Unveiling the Power Behind React's Syntax** 🌟 JSX, short for JavaScript XML, is the heart of React development! It's a syntax extension that allows us to write HTML-like code within JavaScript. Here’s a quick dive: 🔹 **JSX Syntax**: Looks like HTML, but under the hood, it’s pure JavaScript! ```jsx const element = <h1>Hello, world!</h1>; ``` 🔹 **Embedding Expressions**: Seamlessly integrate JavaScript expressions. ```jsx const name = "John"; const element = <h1>Hello, {name}!</h1>; ``` 🔹 **JSX & React.createElement**: JSX gets compiled to `React.createElement()`, simplifying complex UI code. ```jsx // JSX const element = <h1>Hello, world!</h1>; // Compiles to const element = React.createElement('h1', null, 'Hello, world!'); ``` Why is JSX so powerful? It enhances readability and integrates perfectly with React's component-based architecture, making it a developer's favorite! 🚀 #JSX #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #Coding

While developing the ttj-client Node.JS client library, we learned a lot about JSDoc type annotations. In this article, we share our aquired knowledge about JSDoc type annotations, how to import and export types, and how to use advanced types like generics and discriminated union types. https://lnkd.in/dzMY9zCX #Node_js #Node #JS #TypeScript #JavaScript #JSDoc #Type_Annotations #Code_Documentation #JSDoc_Best_Practices #Advanced_JavaScript_Techniques #Function_Signatures #Generics_in_JavaScript #Dynamic_Typing

I dive deep into one of the most frequently misunderstood topics in JavaScript Regular vs. Arrow Functions. If you aim to sharpen your JS skills, understanding these differences is crucial. https://lnkd.in/dFhvk7h5 #JavaScript #WebDevelopment #Programming #Tech #ArrowFunctions #RegularFunctions #Coding #JS #FrontendDevelopment