React UI Built with Functions Not HTML Pages

DAY 7 OF POSTING REACT CONTENT ⚛️ WHY DOES REACT CODE LOOK LIKE HTML INSIDE JAVASCRIPT? 🤔 It looks like HTML, but it’s not HTML. React understands only JavaScript. So this syntax is just a clean way to write JavaScript for UI. This is called JSX. JSX exists only to make UI code: 👉 easier to read 👉 easier to write 👉 easier to manage Behind the scenes, JSX is converted into normal JavaScript. 💬 Did this explanation make JSX feel simpler? #ReactJS #ReactBasics #JavaScript #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

DAY 16 OF POSTING REACT CONTENT ⚛️ React didn’t start with Hooks. Earlier, React components were written using classes. They worked, but understanding this, lifecycle methods, and structure took time. In 2018, React introduced Hooks. Hooks allowed developers to write components as simple functions, manage state without classes, and avoid this completely. Classes are still supported. But Hooks became the preferred way because they made React easier to read, write, and maintain. React didn’t remove classes — it just found a simpler way forward. #ReactJS #ReactBasics #JavaScript #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

DAY 14 OF POSTING REACT CONTENT ⚛️ WHY DOES REACT TAKE VALUES OUT OF OBJECTS DIRECTLY? 🤔 In JavaScript, data usually comes as objects. Accessing the same object again and again makes code harder to read. So JavaScript allows us to pick only what we need from an object and use it directly. React uses this everywhere to keep code: 👉 clean 👉 readable 👉 less repetitive That’s why React code often looks shorter without doing anything extra. 💬 Did destructuring confuse you the first time you saw React code? #ReactJS #JavaScript #ReactBasics #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

DAY 20 OF POSTING REACT CONTENT ⚛️ WHAT DOES await REALLY DO? 🤔 await tells JavaScript: 👉 “Wait here until the Promise finishes.” It pauses the function until the result is ready. Example: async function getData() { const data = await fetchData(); console.log(data); } The code waits for fetchData() before moving to the next line. Cleaner than .then() Easier to read Same result #ReactJS #JavaScript #AsyncAwait #Promises #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

DAY 19 OF POSTING REACT CONTENT ⚛️ WHAT DOES async REALLY DO? 🤔 When we add async before a function, we are telling JavaScript: 👉 “This function will return a Promise.” Even if we return a normal value, JavaScript automatically wraps it inside a Promise. So: async does not pause anything. It just prepares the function to work with asynchronous tasks. #ReactJS #JavaScript #AsyncJavaScript #Promises #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

😅 When a JavaScript developer discovers React for the first time… At first: “Wait… HTML inside JavaScript???” 🤯 Then: “What is JSX?” “Why is everything a component?” “What is this useState thing?” After a few days: “Ohhhh… this is actually powerful.” With React, you stop thinking in pages… and start thinking in components. Instead of rewriting the whole DOM, you update only what changes. That’s when it clicks 💡 From: • Manipulating elements manually To: • Building reusable UI blocks • Managing state • Creating scalable frontend apps The confusion is normal. The growth is worth it. 💬 What confused you most when you first learned React? 📌 Save this if you're on your frontend journey #JavaScript #ReactJS #FrontendDevelopment #WebDevelopment #CodingJourney

When I started using React with Tailwind, I thought the hard part would be JavaScript. It wasn’t. (Not honestly 😄) But, it was deciding whether mt-4 or mt-5 deserved to exist 😄 My components worked perfectly… but my UI kept asking for emotional support. Spacing issues. Alignment mysteries. The classic: “why does this look fine there but broken here?” React taught me how to break problems into components. Tailwind taught me how fast good UI is built when you stop fighting CSS. I really learned: • Smaller components = easier debugging • Utility classes look ugly at first, then save hours • Styling close to logic improves clarity • Consistent UI scales better than creative chaos Once I focused on structure over perfection, everything got smoother. Less tweaking pixels. More building features. (Though I still change gap-4 to gap-6 at least five times 😄) #ReactJS #TailwindCSS #FrontendDevelopment #LearningInPublic

DAY 8 | OF POSTING REACT CONTENT ⚛️ HOW DOES REACT CHANGE THE SCREEN WITHOUT REFRESHING THE PAGE? 🤔 In normal websites, any change usually reloads the page. React works differently. When something changes, React updates only that part of the screen —not the whole page. So: 👉 no full reload 👉 no flickering screen 👉 smoother experience This is one of the biggest reasons React feels fast. You don’t control the update manually. React handles it for you. 💬 Does this idea feel clearer ? #ReactJS #ReactBasics #FrontendDevelopment #JavaScript #LearnInPublic #WebDevelopment #CodingJourney

While starting to learn React, I decided to keep things simple. I built the same Todo List twice with the same UI design: First using pure JavaScript, Then rebuilding it with React. This helped me clearly see the difference between: • JavaScript DOM manipulation • React’s component-based thinking Project features: • Add new tasks • Delete tasks • Toggle task completion • Search tasks • Filter tasks (All / Completed / Not Completed) Small project, but a big learning step for me. Live Demo: JS version: https://lnkd.in/ebWQRNar React version: https://lnkd.in/eJt2Svj7 #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #TodoApp

DAY 13 OF POSTING REACT CONTENT ⚛️ WHY REACT PREFERS ARROW FUNCTIONS ⚛️ 👉 Function behavior should not change based on who calls it. With normal functions: behavior can change context can change confusion increases Arrow functions say: “I don’t care who calls me” “I stay tied to where I was created” “My behavior stays the same” That’s why React prefers arrow functions: predictable behavior fewer bugs simpler mental model This is not about syntax. This is about reliability. #ReactJS #JavaScript #ReactBasics #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney