Bably Rajput
333 posts
Bably Rajput retweetledi
Bably Rajput retweetledi
All Companies Placement Materials🔥😱
Just Free Of Cost!!
Simply:
1. Follow (So that I can DM)
2. Like and Repost
3. Comment "placement" to recieve your copies
English
Bably Rajput retweetledi
ALL THE HTML TAGS YOU NEED TO KNOW (grouped by their roles and use)🙋♂️
Document Structure:
: Specifies the HTML version.
: The root element of an HTML document.
: Contains metadata about the document.: Sets the title of the web page.
<meta>: Provides metadata about the document
(e.g., character encoding).
<link>: Links external resources like stylesheets.
<style>: Defines inline styles.
<script>: Embeds or links to JavaScript code.
<body>: Contains the visible content of the web
page.
Sections and Grouping:
<header>: Represents a container for introductory content or a set of navigation links.
<nav>: Defines a section for navigation links.
<main>: Represents the main content of the document.
<article>: Represents a self-contained composition (e.g., a news article).
<section>: Defines a generic section of content.
<aside>: Represents content that is tangentially related to the content around it.
<footer>: Contains footer information about a section or the document.
Text Content:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings of varying levels.
<p>: Represents a paragraph of text.
<a>: Defines hyperlinks.
<strong>: Represents strong importance.
<em>: Represents emphasized text.
<blockquote>: Represents a block of quoted text.
<q>: Defines inline quotations.
<abbr>: Represents an abbreviation or acronym.
<code>: Represents computer code.
<pre>: Preserves whitespace and line breaks.
<mark>: Highlights text.
<sub>: Defines subscript text.
<sup>: Defines superscript text.
<br>: Inserts a line break.
<hr>: Represents a thematic break or horizontal rule.
Lists:
<ul>: Defines an unordered (bulleted) list.
<ol>: Defines an ordered (numbered) list.
<li>: Represents a list item.
<dl>: Defines a description list.
<dt>: Defines a term in a description list.
<dd>: Defines a description of a term in a description list.
Forms and Input:
<form>: Represents an HTML form for user input.
<input>: Represents an input field.
<textarea>: Defines a multi-line text input control.
<select>: Defines a drop-down list.
<button>: Defines a clickable button.
<label>: Defines a label for an input element.
<fieldset>: Groups related form elements.
<legend>: Provides a caption for a <fieldset>.
<optgroup>: Groups related <option> elements in a <select>.
<option>: Represents an option in a <select>.
Media
<img>: Embeds images.
<audio>: Embeds audio content.
<video>: Embeds video content.
Tables:
<table>: Defines a table.
<tr>: Represents a table row.
<th>: Represents a table header cell.
<td>: Represents a table data cell.
<caption>: Provides a title for a table.
Interactive Elements:
<button>: Defines a clickable button.
<a>: Defines hyperlinks.
<input>: Represents an input field (can be used for form controls).
<label>: Defines a label for an input element.
<select>: Defines a drop-down list.
<textarea>: Defines a multi-line text input control.
<iframe>: Embeds an inline frame.
Alright, that's a wrap. Follow me <a href="/profile/mysticwillz">@mysticwillz</a> for more web development tips like this.🙌</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><!----><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/mysticwillz/status/1711000186133045311" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">7</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">100</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">362</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">41.9K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">516</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/mysticwillz" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/1674283130612592640/OoAWc0dx.jpg" alt="THE CODE SCIENTIST" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/mysticwillz" class="font-bold text-white hover:underline truncate">THE CODE SCIENTIST</a><svg class="w-4 h-4 text-violet-400 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z"></path></svg><span class="text-[#666] truncate">@mysticwillz</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Tue Oct 17 13:08:12 +0000 2023">17 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">TOP 20 HTML INTERVIEW QUESTIONS (for all developers)
🌐 What is HTML?
🆕 What is the latest version of HTML?
🏗️ What is the basic structure of an HTML document?
⚙️ What is an HTML tag?
🔄 Explain the difference between HTML and XHTML.
📜 What is the purpose of the <!DOCTYPE> declaration in HTML?
📄 What is the role of the <head> element in an HTML document?
🔗 How do you create a hyperlink in HTML?
🌟 What are semantic elements in HTML?
📦 What is the purpose of the <div> element?
🖼️ How do you embed an image in HTML?
🖋 What is the purpose of the alt attribute in the <img> element?
1️⃣ How can you create an ordered (numbered) list in HTML?
↔️ Explain the difference between <div> and <span> elements.
📝 What is the purpose of the HTML <form> element?
🤔 What is the difference between a <strong> tag and an <em> tag?
💬 How can you add comments in HTML?
©️ Explain the concept of HTML entities.
📊 What is the purpose of the <table> element in HTML?
🚀 How do you create a hyperlink that opens in a new tab or window?</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><!----><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/mysticwillz/status/1714267065031307735" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">1</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">38</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">130</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">13.2K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">119</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/mysticwillz" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/1674283130612592640/OoAWc0dx.jpg" alt="THE CODE SCIENTIST" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/mysticwillz" class="font-bold text-white hover:underline truncate">THE CODE SCIENTIST</a><svg class="w-4 h-4 text-violet-400 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z"></path></svg><span class="text-[#666] truncate">@mysticwillz</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Sat Oct 28 09:54:59 +0000 2023">28 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">You're interviewing for a web developer position. 🎯
The interviewer asked:
"Explain the role of Git and Github in web development projects."
Here's how to answer💯👇:</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><!----><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/mysticwillz/status/1718204706160365807" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">8</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">88</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">472</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">54.2K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">414</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/mysticwillz" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/1674283130612592640/OoAWc0dx.jpg" alt="THE CODE SCIENTIST" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/mysticwillz" class="font-bold text-white hover:underline truncate">THE CODE SCIENTIST</a><svg class="w-4 h-4 text-violet-400 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z"></path></svg><span class="text-[#666] truncate">@mysticwillz</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Tue Oct 31 08:55:11 +0000 2023">31 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">You're a frontend engineer. 🗣️
Your boss asked you this:
"For our project, should we use client-side or server-side rendering or both?"
Here's how to answer:👇👇</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><!----><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/mysticwillz/status/1719276821118595315" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">13</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">111</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">673</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">83.3K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">601</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/mysticwillz" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/1674283130612592640/OoAWc0dx.jpg" alt="THE CODE SCIENTIST" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/mysticwillz" class="font-bold text-white hover:underline truncate">THE CODE SCIENTIST</a><svg class="w-4 h-4 text-violet-400 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z"></path></svg><span class="text-[#666] truncate">@mysticwillz</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Fri Nov 03 09:12:34 +0000 2023">3 Kas</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">You're in a web developer internship interview. 💼
The interviewer asked:
"What's a DOM (Document Object Model) in web development?"
Here's how to answer:👇👇</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><!----><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/mysticwillz/status/1720368357856145680" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">9</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">61</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">365</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">48.3K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">287</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/mysticwillz" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/1674283130612592640/OoAWc0dx.jpg" alt="THE CODE SCIENTIST" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/mysticwillz" class="font-bold text-white hover:underline truncate">THE CODE SCIENTIST</a><svg class="w-4 h-4 text-violet-400 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z"></path></svg><span class="text-[#666] truncate">@mysticwillz</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Sun Sep 10 10:45:00 +0000 2023">10 Eyl</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">I compiled a list of top 50 React interview questions
Know these before that React Frontend Interview:
You may need to save it🤗📷
1. What is React, and how does it differ from other JavaScript frameworks/Libraries?
2. Explain the concept of a Virtual DOM in React.
3. What are React components?
4. Differentiate between functional and class components.
5. How can you pass data from a parent component t o a child component in React?
6. Explain the purpose of props in React.
State and Lifecycle:
7. What is the significance of the state in React components?
8. Describe the lifecycle methods of a class component.
9. What is the constructor method used for in a class component?
10.Explain the differences between componentDidMount and componentDidUpdate.
11. How can you update the state of a component in React?
Hooks:
12. What are React Hooks? Why were they introduced?
13. Explain the useState hook in React.
14. How does the useEffect hook work, and why is it used?
15. What is the purpose of the useContext hook?
16. Describe the useReducer hook and when it might be used.
Component Communication:
17. What is prop drilling, and how can you avoid it?
18.Explain how you can achieve component communication using context.
19. Describe the concept of lifting state up.
Routing:
20. How can you implement routing in a React application?
21. Explain the purpose of React Router.
State Management:
22. Compare local state management with external state management libraries like Redux.
21. What is Redux, and what problem does it solve?
22. Describe the core components of a Redux store: actions, reducers, and store.
Styling:
25. How can you style React components?
26. Compare inline styles, CSS modules, and styled- components.
Forms:
27. How can you handle forms in React?
28.Explain controlled components and uncontrolled components in form handling.
Optimization:
29. Describe the concept of code splitting in React.
30. How can you improve the performance of a React application?
Testing:
31. What is the significance of testing in a React application?
32. Explain the differences between unit testing and integration testing.
33. Describe the purpose of tools like Jest and Enzyme in React testing.
Server Communication:
34. How can you make asynchronous API calls in React?
35. Explain the purpose of the fetch API and how it works.
Context API and Providers:
36. Describe the Context API in React.
37. How can you create and use a custom context provider?
Higher-Order Components (HOCs) and Render Props:
38. Explain the concept of a Higher-Order Component (HOC) in React.
39. Describe the render props pattern and its use cases.
React Router:
40. How do you handle dynamic routing using React Router?
41. Explain the purpose of the <Link> component in React Router.
Error Handling:
42. How can you handle errors in React applications?
43. Describe the concept of Error Boundaries.
Lifecycle Changes :
44. How have component lifecycle methods changed with the introduction of React 16.3 and later?
Performance Optimization:
45. Explain the concept of memoization and how it can be used to optimize components.
Server-Side Rendering (SSR) and Static Site Generation (SSG):
46. What are SSR and SSG, and why might you use them in a React application?
Authentication and Authorization:
47. How can you implement user authentication and authorization in a React app?
React Best Practices:
48. What are some best practices for writing maintainable and performant React code?
49. Explain the importance of using keys when rendering lists of components.
50. How can you avoid unnecessary re-renders in React?
Alright that's a wrap. Follow me <a href="/profile/mysticwillz">@mysticwillz</a> for more posts like this.</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><!----><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/mysticwillz/status/1700822677622030517" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">12</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">140</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">557</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">72.3K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">1.2K</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/InterestingSTEM" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/1786861512293789696/gYjaEvP4.jpg" alt="Interesting STEM" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/InterestingSTEM" class="font-bold text-white hover:underline truncate">Interesting STEM</a><svg class="w-4 h-4 text-violet-400 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z"></path></svg><span class="text-[#666] truncate">@InterestingSTEM</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Sat Oct 28 18:03:31 +0000 2023">28 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">Components of a URL</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><div class="mt-3 rounded-xl overflow-hidden border border-[#1a1a1d]"><!--[--><!--[--><img src="https://pbs.twimg.com/media/F9i54yvXoAAzBzZ.jpg" alt="Interesting STEM tweet media" class="w-full object-cover" loading="lazy"><!--]--><!--]--></div><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/InterestingSTEM/status/1718327651515916650" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">8</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">248</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">1K</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">92.5K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">304</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/maybeshalinii" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/2028730839778156544/q25IesqO.jpg" alt="Shalini Tewari" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/maybeshalinii" class="font-bold text-white hover:underline truncate">Shalini Tewari</a><!----><span class="text-[#666] truncate">@maybeshalinii</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Mon Oct 16 04:49:34 +0000 2023">16 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">Selecting methods in JavaScript:
We can use various methods for selecting elements in the Document Object Model (DOM) or for querying data from arrays and objects. Here are some common methods and techniques:
- Document Object:
For selecting the document itself, you can use the document object. The Document Object is a fundamental part of the Document Object Model (DOM) in web development.
The DOM represents the structure and content of a web page, allowing you to interact with and manipulate the elements on the page using JavaScript. The Document Object, often referred to as the `document` object, is a global object that provides access to the entire web page's structure and content.
const theDocument = document;
1. getElementById():
This method allows you to select an element by its unique id attribute.
const element = document.getElementById("myElementId");
2.querySelector():
This method allows you to select the first element that matches a specified CSS selector.
const element = document.querySelector(".myClass");
3. querySelectorAll():
This method selects all elements that match a given CSS selector.
const elements = document.querySelectorAll(".myClass");
4. getElementsByClassName():
This method selects all elements with a specific class and returns an HTML Collection.
const elements = document.getElementsByClassName("myClass");
5. getElementsByTagName():
This method selects all elements with a specific tag name and returns an HTMLCollection.
const elements = document.getElementsByTagName("div");
6. Event Target:
When working with event listeners, you can access the target element that triggered the event.
element.addEventListener("click", (event) => {
const clickedElement = <a href="http://event.target" target="_blank" rel="nofollow noopener">event.target</a>;
});
7. getElementsByName():
This method selects all elements with a specific name attribute and returns an HTMLCollection.
const elements = document.getElementsByName("myName");
8. querySelectorAll() with Attribute Selectors:
You can select elements based on their attributes.
const elements = document.querySelectorAll("[data-attribute='value']");
9. Array Methods:
To select or filter elements from an array, you can use array methods like filter(), find(), map(), etc.
const filteredArray = myArray.filter(item => item.someCondition);</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><!----><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/maybeshalinii/status/1713779192213491844" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">7</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">47</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">298</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">72.3K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">287</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/maybeshalinii" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/2028730839778156544/q25IesqO.jpg" alt="Shalini Tewari" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/maybeshalinii" class="font-bold text-white hover:underline truncate">Shalini Tewari</a><!----><span class="text-[#666] truncate">@maybeshalinii</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Fri Oct 13 04:30:36 +0000 2023">13 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">Day 18 of <a href="/search?q=%2320DaysOfReact">#20DaysOfReact</a>
Topic covered:
- Introduction to Server and Client side rendering
Server-side rendering (SSR) and client-side rendering (CSR) are two different approaches to rendering web applications, and they have their own advantages and use cases. In the context of React, you can use both of these rendering methods.
Server-Side Rendering (SSR):
- In SSR, the initial rendering of the web page occurs on the server before it is sent to the client's browser. The server generates the HTML content and sends it to the client, which can be displayed quickly as it arrives.
- React components are rendered on the server, and the resulting HTML is sent to the client.
SEO (Search Engine Optimization) benefits: Search engines can easily crawl and index SSR pages because the content is available in HTML form from the beginning.
- Faster initial load: SSR can provide faster initial page loads compared to CSR, especially on slow network connections or less powerful devices.
Imagine you're in a restaurant. With SSR, the chef (the server) prepares your meal completely in the kitchen (on the server) and brings it to your table (your web browser) as a fully cooked dish. You can start eating right away because it's ready.
Use SSR when you want your web page to appear quickly and be easy for search engines to understand. It's like getting a ready meal.
Use Cases for SSR:
1. Content-driven websites or blogs.
2. E-commerce sites.
3. Any application where SEO is crucial.
4. Sites that require fast initial rendering.
Client-Side Rendering (CSR):
In CSR, the initial HTML content is minimal, and JavaScript (including React) runs on the client-side to render the rest of the content. The client browser is responsible for rendering the UI.
CSR is often used in single-page applications (SPAs), where the initial load is relatively lightweight, and subsequent content updates are handled by JavaScript.
CSR is often associated with a faster and more interactive user experience after the initial load, as only the data needs to be fetched from the server, not the entire HTML structure.
Picture a different restaurant where the chef (the server) only brings you a plate with some ingredients (basic web page) and gives you a small kitchenette (JavaScript in your browser). You, the customer (your browser), have to put everything together and cook the meal (render the web page) before you can start eating.
Use CSR when you want your web page to be more interactive and can wait a bit for it to load initially. It's like cooking your own meal; it takes a little more time, but you have more control over it.
Use Cases for CSR:
1. Interactive web applications.
2. Dashboards and data-driven applications.
3. Applications that rely on real-time data updates.</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><div class="mt-3 rounded-xl overflow-hidden border border-[#1a1a1d]"><!--[--><!--[--><img src="https://pbs.twimg.com/media/F8Sv8ULXAAAp_Au.png" alt="Shalini Tewari tweet media" class="h-64 w-full object-cover" loading="lazy"><!--]--><!--[--><img src="https://pbs.twimg.com/media/F8Sv8U9XQAAp4Qs.png" alt="Shalini Tewari tweet media" class="h-64 w-full object-cover" loading="lazy"><!--]--><!--]--></div><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/maybeshalinii/status/1712687257029603838" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">17</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">92</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">576</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">96.9K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">310</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/maybeshalinii" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/2028730839778156544/q25IesqO.jpg" alt="Shalini Tewari" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/maybeshalinii" class="font-bold text-white hover:underline truncate">Shalini Tewari</a><!----><span class="text-[#666] truncate">@maybeshalinii</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Thu Oct 12 04:29:36 +0000 2023">12 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">DAY 17 of <a href="/search?q=%2320DaysOfReact">#20DaysOfReact</a>
Topics Covered :
- Concurrent React
- <suspense>
With the introduction of Concurrent Mode in React, developers now have a powerful tool at their disposal to create even more responsive and efficient web applications.
What is Concurrent React?
Concurrent React is a set of new features in React designed to help apps stay responsive and gracefully adjust to the user's device capabilities and network speed. In simple terms, it's like React's way of ensuring that your web app continues to work smoothly, even when faced with complex and resource-intensive tasks.
Or we can say, concurrent React might sound complex, but at its core, it's not a visible feature you interact with directly in your code. Instead, it's like a secret worker behind the scenes that helps React get things done more efficiently.
Imagine you have a chef in a restaurant who can prepare multiple dishes at once without getting overwhelmed. That's what React does with your user interface. It's like having a chef who can work on many orders simultaneously.
React uses some smart strategies, kind of like the chef's recipe book, to manage this efficiently. It organizes tasks, deciding which ones to work on first, and stores some extra information to avoid any delays. But as a developer, you don't need to worry about these behind-the-scenes details. You just benefit from a faster and more responsive user interface, which is what matters most.
Why is it essential?
- Improved User Experience: With Concurrent Mode, your app becomes more responsive and user-friendly. Slow-loading components or data won't hinder the user experience as React can manage these operations efficiently.
- Better Performance: Concurrent React's ability to prioritize and split work into smaller pieces means that your app's performance remains consistent even during resource-heavy tasks.
- Adaptability: Concurrent Mode allows your app to adapt to varying network conditions and device capabilities, making it ideal for creating progressive web apps (PWAs) that can work on different devices and connections.
How to get started?
- Ensure you're using a version of React that supports Concurrent Mode.
- Use Suspense: Familiarize yourself with the Suspense component and its usage to control data loading and rendering.
- Optimize Components: Split your components into smaller, more manageable parts. This makes it easier for React to prioritize and render them efficiently.
Suspense:
" <Suspense> lets you display a fallback until its children have finished loading. "
Which means, it is like a helper that makes dealing with things that take time, like getting data from the internet or loading parts of a website, much easier. It also makes sure your website doesn't look broken while it's waiting for these things to finish.
Think of it as a way to say, "Hey, while we're waiting for something to happen, show this message or picture to keep the user informed." So, it's like giving your users a "Loading..." sign instead of a blank screen, which is much friendlier.
It's all about making your web apps smoother and more user-friendly, especially when they need to fetch data or do complex tasks in the background.
Key Aspects of Suspense:
- Declarative Data Handling: Easily load data within your components, improving code organization and reducing the need for complex data management.
- Smoother User Experience: Show loading indicators or user-friendly content while data loads, keeping your app responsive.
- Error Handling: Handle errors gracefully when data fetching goes wrong.
- Simplified Data Coordination: Manage the loading of multiple data pieces effortlessly, ensuring everything is ready before rendering a component.</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><div class="mt-3 rounded-xl overflow-hidden border border-[#1a1a1d]"><!--[--><!--[--><img src="https://pbs.twimg.com/media/F8NmH2bWoAAZjRd.jpg" alt="Shalini Tewari tweet media" class="w-full object-cover" loading="lazy"><!--]--><!--]--></div><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/maybeshalinii/status/1712324615131873587" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">22</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">65</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">465</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">117.8K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">250</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/maybeshalinii" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/2028730839778156544/q25IesqO.jpg" alt="Shalini Tewari" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/maybeshalinii" class="font-bold text-white hover:underline truncate">Shalini Tewari</a><!----><span class="text-[#666] truncate">@maybeshalinii</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Wed Oct 11 12:09:13 +0000 2023">11 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">Javascript Notes and Cheatsheets [Handmade]🔥</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><div class="mt-3 rounded-xl overflow-hidden border border-[#1a1a1d]"><!--[--><!--[--><img src="https://pbs.twimg.com/media/F8KFpdDacAA9tK5.jpg" alt="Shalini Tewari tweet media" class="h-64 w-full object-cover" loading="lazy"><!--]--><!--[--><img src="https://pbs.twimg.com/media/F8KFqL5bkAAmngz.jpg" alt="Shalini Tewari tweet media" class="h-64 w-full object-cover" loading="lazy"><!--]--><!--[--><img src="https://pbs.twimg.com/media/F8KFrTDbkAAQ-lO.jpg" alt="Shalini Tewari tweet media" class="h-64 w-full object-cover" loading="lazy"><!--]--><!--[--><img src="https://pbs.twimg.com/media/F8KFrvBaIAAeX_S.jpg" alt="Shalini Tewari tweet media" class="h-64 w-full object-cover" loading="lazy"><!--]--><!--]--></div><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/maybeshalinii/status/1712077892757422324" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">56</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">510</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">3K</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">417.9K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">2.4K</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/maybeshalinii" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/2028730839778156544/q25IesqO.jpg" alt="Shalini Tewari" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/maybeshalinii" class="font-bold text-white hover:underline truncate">Shalini Tewari</a><!----><span class="text-[#666] truncate">@maybeshalinii</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Wed Oct 11 04:34:26 +0000 2023">11 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">DAY 16 of <a href="/search?q=%2320DaysOfReact">#20DaysOfReact</a>
HOW TO STRUCTURE YOUR FRONTEND CODE IN REACT.
[with explanation]
📁src
|
|_ 📁components
| |_ 📁Cards
| | |_ 📄MainCards.jsx
| |_ 📁Buttons
|_ 📁api
| |_ 📄Auth.js
| |_ 📄Event.js
|_ 📁Pages
| |_ 📁HomePage
| | |_ 📄HomePage.jsx
| |_ 📁LoginPage
| |_ 📄LoginPage.jsx
|_ 📁contexts
| |_ 📄AuthContext.js
| |_ 📄EventContext.js
|_ 📁hooks
| |_ 📄useAuth.js
| |_ 📄useEvent.js
|_ 📁utils
| |_ 📄HelperFunctions.js
| |_ 📄Date.js
|_ 📁assets
| |_ 📁images
| | |_ 📄logo.svg
| | |_ 📄background.jpg
| |_ 📁styles
| |_ 📄global.css
| |_ 📄theme.js
|_ 📄App.jsx
|_ 📄index.js
Here is a brief explanation:
- src: This is the main folder where your React app lives.
- components: Think of this like a box of LEGO pieces. It holds small, reusable parts of your app, like building blocks. Inside, you have separate folders for different types of blocks:
Cards: These are special blocks that you can use to create things like information cards.
Buttons: Here, you keep different types of buttons you can use in your app.
- api: This is like a special toolbox where you keep tools for talking to the internet.
Auth.js: It probably has stuff for logging in and keeping your app secure.
Event.js: This could handle things like scheduling events or activities in your app.
- Pages: Imagine this as a storybook with different pages of your app.
HomePage: This page contains all the stuff for your app's main screen.
LoginPage: This is where users can log in to your app.
- contexts: Think of these like invisible helpers that carry messages between different parts of your app.
AuthContext.js: It helps parts of your app know if someone is logged in or not.
EventContext.js: This one helps your app share information about events.
- hooks: These are like shortcuts or tricks to make parts of your app work better.
useAuth.js: It helps with all the stuff related to logging in and out.
useEvent.js: This one makes working with events easier.
- utils: This is your toolbox of handy tools for your app.
HelperFunctions.js: Contains tools for doing all sorts of jobs in your app.
Date.js: It might help you handle dates and times in your app.
- assets: This is where you keep pictures, designs, and styles for your app.
images: Stores the pictures your app uses, like a logo or background.
styles: Holds the rules for how your app should look.
- App.jsx: Imagine this as the main stage where your app comes to life. It decides what to show and how everything should work.
- index.js: This is like the stage manager. It tells your app to get ready and appear on the screen for everyone to see.
This organized structure helps you build and manage your website in a neat and organised way, making it easier to understand and work on, especially when your project gets bigger and more complex and you have to make changes very often.
I am not saying that this is the only or the best way, this is what I usually follow and thought about sharing it.</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><!----><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/maybeshalinii/status/1711963445405311354" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">51</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">447</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">2.4K</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">474K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">2K</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/maybeshalinii" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/2028730839778156544/q25IesqO.jpg" alt="Shalini Tewari" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/maybeshalinii" class="font-bold text-white hover:underline truncate">Shalini Tewari</a><!----><span class="text-[#666] truncate">@maybeshalinii</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Tue Oct 10 04:28:35 +0000 2023">10 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">DAY 15 of <a href="/search?q=%2320DaysOfReact">#20DaysOfReact</a>
Topic Covered :
- Higher order components
What are Higher order components?
A higher-order component is a function that takes a component and returns a new component.
Or we can say that, A higher-order component (HOC) is like a helper function in React that makes it easier to reuse certain parts of your component code. It's not something built into React itself; it's just a technique or pattern that developers use because of the way React works.
Imagine you have a bunch of components in your app, and some of them share similar logic or behaviour. Instead of copying and pasting that same code into each component, you can create a higher-order component.
Here's how it works:
-You create a regular JavaScript function (the HOC) that takes one of your components as an input.
-Inside this function, you can add extra functionality, like handling data loading or setting up event listeners.
-Then, the HOC returns a new component that includes this extra functionality.
-Now, you can use this new component in your app just like any other component, and it automatically has the extra features you added with the HOC.
So, in simpler terms, a higher-order component is like a tool you use to easily share and reuse code among different components in your React app, making your code more efficient and maintainable.
In a nutshell, a higher-order component is a function that takes a component as its argument and returns a new component with additional props, behaviour, or other modifications. HOCs allow you to abstract and reuse logic and functionality that can be shared across multiple components. They are a way to achieve composition and separation of concerns in your React applications.</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><div class="mt-3 rounded-xl overflow-hidden border border-[#1a1a1d]"><!--[--><!--[--><img src="https://pbs.twimg.com/media/F8DSqfiX0AAPChW.jpg" alt="Shalini Tewari tweet media" class="w-full object-cover" loading="lazy"><!--]--><!--]--></div><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/maybeshalinii/status/1711599583480979557" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">12</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">55</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">357</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">60.2K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">168</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/maybeshalinii" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/2028730839778156544/q25IesqO.jpg" alt="Shalini Tewari" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/maybeshalinii" class="font-bold text-white hover:underline truncate">Shalini Tewari</a><!----><span class="text-[#666] truncate">@maybeshalinii</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Mon Oct 09 10:55:17 +0000 2023">9 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">Frequently Asked Questions:
1. What is the difference between React & React Native?
React (React.js):
Used for building websites and web applications.
It uses regular web components like <div> and <input>.
Styling is typically done with CSS.
Development happens in web browsers with web development tools.
Apps are deployed to web servers and accessed through web browsers.
React Native:
Used for creating mobile apps for iOS and Android.
It uses mobile-specific components like <View> and <Text>.
Styling is done using JavaScript-like styles.
Development requires mobile development tools, simulators, or physical devices.
Apps are distributed through app stores (Apple App Store, Google Play).
Code Reusability:
In React, code isn't directly reusable in React Native.
In React Native, you can share some code and components between iOS and Android apps.
Performance:
React apps perform well in web browsers, using the virtual DOM.
React Native apps also perform well due to native components, but complex animations might require native code.
In short, React is for web, React Native is for mobile. React uses web components and CSS, while React Native uses mobile components and JavaScript-like styles. React Native lets you share some code between iOS and Android apps, but they have different development and deployment processes.
2. Explain React Lifecycle Methods vs. Effects
React Lifecycle Methods:
Imagine a React component as a machine with different parts that move and work together. In the past, React used something called "lifecycle methods" to control how this machine behaved. These methods were like levers you could pull or buttons you could push at specific times during the machine's life.
For example, there was a method called componentDidMount that would be triggered when the machine was "born," or when it was first put on the web page. You could use this method to do things like load data from a server.
Another method, componentDidUpdate, was like a button you could press whenever something about the machine changed. You could use it to respond to changes in the machine's state or props.
useEffect Hook:
Now, React has a new tool called the useEffect hook. It's like a more versatile and flexible way of controlling the machine's behavior. Instead of having different levers and buttons for different situations, you have one tool that can do it all.
With useEffect, you can say, "Hey, React, I want to do something when certain conditions are met." You tell React what conditions to watch, like when a specific piece of data changes or when the component is first created.
For example, you can use useEffect to say, "When this component is born (componentDidMount), do this thing." Or, "Whenever this piece of data changes (componentDidUpdate), do this other thing."
In Simpler Terms:
Lifecycle methods are like separate buttons and levers for controlling your component's behavior at specific moments in its life.
useEffect is like a more flexible tool that you can use to specify when and how you want to do something with your component, whether it's when it's born, when it changes, or in other situations.
In modern React development, the useEffect hook is generally preferred because it offers more control and simplifies how you manage side effects (like data fetching, subscriptions, or DOM manipulation) in your components.
3. What is key prop in lists?
Imagine you have a list of items in a React component. It could be a list of names, products, or anything else. React wants to keep track of these items efficiently, especially when they change or are reordered. It needs a way to recognize which item is which, even when the list gets updated.
Think of it like this: Imagine you have a set of keys to unlock different doors. Each key is unique, and it corresponds to one specific door. If you shuffle the keys or get new ones, you still need to know which key fits which door.
In React, the "key" prop is like these unique keys for the items in your list. When you render a list of elements, you give each element a "key" that tells React, "This element is unique, and here's how you can recognize it."
For example, if you have a list of names, each name could have a unique ID as its "key." It's like saying, "Hey React, this name with this ID is different from the others." React uses these keys to efficiently update and reorder the list without re-rendering everything.
In Simpler Terms:
The "key" prop in React lists is like a tag or label you attach to each item in a list.
It helps React understand which item is which, even when the list changes, so it can update the list smoothly.
Remember that keys should be unique among sibling elements in the list, but they don't need to be globally unique across your entire application. React uses them to identify elements within the specific list you're rendering.</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><!----><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/maybeshalinii/status/1711334511613542684" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">16</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">172</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">905</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">188.2K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">749</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><article class="px-4 py-3 border-b border-[#1a1a1d] hover:bg-[#0d0d0f] transition-colors cursor-pointer" data-v-b2e047a1><!----><div class="flex items-center gap-2 text-[#666] text-[12px] mb-1.5 ml-7"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg> Bably Rajput retweetledi</div><div class="flex gap-3"><a href="/profile/mysticwillz" class="shrink-0"><img src="https://pbs.twimg.com/profile_images/1674283130612592640/OoAWc0dx.jpg" alt="THE CODE SCIENTIST" class="w-10 h-10 rounded-full object-cover" loading="lazy"></a><div class="flex-1 min-w-0"><div class="flex items-center gap-1 text-[14px]"><a href="/profile/mysticwillz" class="font-bold text-white hover:underline truncate">THE CODE SCIENTIST</a><svg class="w-4 h-4 text-violet-400 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z"></path></svg><span class="text-[#666] truncate">@mysticwillz</span><span class="text-[#444]">·</span><time class="text-[#666] shrink-0" datetime="Mon Oct 09 13:40:10 +0000 2023">9 Eki</time></div><div class="mt-1 text-[15px] text-[#e0e0e0] leading-[21px] whitespace-pre-wrap break-words tweet-text">You're in a Web development interview, you're asked
Do you recommend using OAuth or JWT (JSON Web Tokens) for secure user authorization?
Explain your authentication approach.
Here is how to answer, touching use cases and how it works 💯🪵
OAuth:
Use Case: OAuth is ideal when you want to enable third-party applications.
It's commonly used for social login and for authorizing API access by external clients.
How it works: OAuth involves multiple roles: the Resource Owner (user), Client (third-party app), Authorization Server and Resource Server .
The OAuth flow allows users to grant permissions to external apps without sharing their credentials.
JWT (JSON Web Tokens):
Use Case: JWT is useful for internal authentication within your application.
It's often used to securely represent user ID, roles in a compact, stateless format.
How it works: JWTs consist of three parts: a header, payload, and a signature.
They are typically issued to a client after successful authentication and can be included in subsequent requests for authorization.
Authentication Approach Recommendation:
Choose OAuth when your project involves granting access to user data or actions by third-party applications.
Choose JWT for internal authentication and maintaining stateless sessions within your application.
Combining Both: In some cases, you might use OAuth for external authentication (e.g., social login) and then issue a JWT to the client after successful authentication.
Alright, that's a wrap. Follow me <a href="/profile/myticwillz">@myticwillz</a> for more tips on web development.</div><!----><button class="flex items-center gap-1 mt-1 text-[11px] text-[#555] hover:text-violet-400 transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg><span>Çevir</span></button><!----><!----><!----><div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-[11px] text-[#555]"><!----><!----><span class="flex items-center gap-1 text-[#444]"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path></svg> English</span></div><div class="flex items-center gap-5 mt-3 -ml-1"><a href="/mysticwillz/status/1711376007922381028" class="group flex items-center gap-1.5 text-[#666] hover:text-violet-400 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"></path></svg><span class="text-[12px]">25</span></a><div class="flex items-center gap-1.5 text-[#666] hover:text-emerald-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.77 15.67a.749.749 0 00-1.06 0l-2.22 2.22V7.65a3.755 3.755 0 00-3.75-3.75h-5.85a.75.75 0 000 1.5h5.85a2.25 2.25 0 012.25 2.25v10.24l-2.22-2.22a.749.749 0 10-1.06 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5a.747.747 0 000-1.06zm-10.66 3.28H7.26a2.25 2.25 0 01-2.25-2.25V6.46l2.22 2.22a.752.752 0 001.062 0 .749.749 0 000-1.06l-3.5-3.5a.747.747 0 00-1.06 0l-3.5 3.5a.749.749 0 101.06 1.06l2.22-2.22V16.7a3.755 3.755 0 003.75 3.75h5.85a.75.75 0 000-1.5z"></path></svg><span class="text-[12px]">268</span></div><div class="flex items-center gap-1.5 text-[#666] hover:text-pink-400 transition-colors cursor-default"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path></svg><span class="text-[12px]">1.3K</span></div><div class="flex items-center gap-1.5 text-[#555]"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span class="text-[12px]">191.8K</span></div><button class="text-[#555] hover:text-violet-400 flex items-center gap-1.5 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg><span class="text-[12px]">1.3K</span></button><button class="text-[#555] hover:text-amber-400 flex items-center gap-1.5 transition-colors" title="Tweeti Arşivle"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg></button></div></div></div><!--teleport start--><!--teleport end--></article><!--]--><!----><div class="flex justify-center py-4" data-v-b2e047a1><button class="h-9 px-6 text-[13px] font-bold text-violet-400 border border-violet-500/30 rounded-full hover:bg-violet-500/10 transition-colors disabled:opacity-50 flex items-center gap-2" data-v-b2e047a1><!----> Daha Fazla Yükle</button></div><!--]--><!----><!----><!----><!----><!----></div><div class="mt-6 mb-8" data-v-b2e047a1><h3 class="text-[14px] font-bold text-[#666] mb-3 px-1" data-v-b2e047a1>Keşfet</h3><div class="flex flex-wrap gap-2" data-v-b2e047a1><!--[--><a href="/profile/ajitcodes" class="px-3 py-1.5 text-[12px] font-semibold bg-[#111113] border border-[#1a1a1d] rounded-full text-[#888] hover:text-violet-400 hover:border-violet-500/30 transition-colors" data-v-b2e047a1> @ajitcodes</a><a href="/profile/mysticwillz" class="px-3 py-1.5 text-[12px] font-semibold bg-[#111113] border border-[#1a1a1d] rounded-full text-[#888] hover:text-violet-400 hover:border-violet-500/30 transition-colors" data-v-b2e047a1> @mysticwillz</a><a href="/profile/elonmusk" class="px-3 py-1.5 text-[12px] font-semibold bg-[#111113] border border-[#1a1a1d] rounded-full text-[#888] hover:text-violet-400 hover:border-violet-500/30 transition-colors" data-v-b2e047a1> @elonmusk</a><a href="/profile/BarackObama" class="px-3 py-1.5 text-[12px] font-semibold bg-[#111113] border border-[#1a1a1d] rounded-full text-[#888] hover:text-violet-400 hover:border-violet-500/30 transition-colors" data-v-b2e047a1> @BarackObama</a><a href="/profile/taylorswift13" class="px-3 py-1.5 text-[12px] font-semibold bg-[#111113] border border-[#1a1a1d] rounded-full text-[#888] hover:text-violet-400 hover:border-violet-500/30 transition-colors" data-v-b2e047a1> @taylorswift13</a><a href="/profile/cristiano" class="px-3 py-1.5 text-[12px] font-semibold bg-[#111113] border border-[#1a1a1d] rounded-full text-[#888] hover:text-violet-400 hover:border-violet-500/30 transition-colors" data-v-b2e047a1> @cristiano</a><a href="/profile/BillGates" class="px-3 py-1.5 text-[12px] font-semibold bg-[#111113] border border-[#1a1a1d] rounded-full text-[#888] hover:text-violet-400 hover:border-violet-500/30 transition-colors" data-v-b2e047a1> @BillGates</a><a href="/profile/NASA" class="px-3 py-1.5 text-[12px] font-semibold bg-[#111113] border border-[#1a1a1d] rounded-full text-[#888] hover:text-violet-400 hover:border-violet-500/30 transition-colors" data-v-b2e047a1> @NASA</a><!--]--></div></div></div><!--teleport start--><!--teleport end--></div><!--]--></main><footer class="border-t border-[#1a1a1d] mt-auto" role="contentinfo"><div class="max-w-[1200px] mx-auto px-4 lg:px-6 py-10"><div class="grid grid-cols-2 sm:grid-cols-4 gap-8 mb-8"><div class="col-span-2 sm:col-span-1"><div class="flex items-center gap-2 mb-3"><img src="/logo.svg" alt="Zamantika" width="24" height="24" class="w-6 h-6 rounded-md"><span class="text-[14px] font-extrabold text-white tracking-tight">zamantika - Mersobahis - Locabet</span></div><p class="text-[12px] text-[#888] leading-relaxed max-w-[280px] mb-4">Twitter/X profillerini, tweetleri ve trendleri anonim olarak görüntüleyin. Hesap gerekmez.</p><div class="flex flex-wrap gap-1.5"><!--[--><button class="text-[11px] px-2 py-1 rounded-md transition-colors bg-violet-500/10 text-violet-400 border border-violet-500/20">🇹🇷 TR</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇺🇸 EN</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇩🇪 DE</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇫🇷 FR</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇪🇸 ES</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇸🇦 AR</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇷🇺 RU</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇧🇷 PT</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇯🇵 JA</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇰🇷 KO</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇮🇩 ID</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇨🇳 ZH</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇮🇳 HI</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇻🇳 VI</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇵🇰 UR</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇹🇭 TH</button><button class="text-[11px] px-2 py-1 rounded-md transition-colors text-[#888] hover:text-white border border-transparent">🇵🇭 TL</button><!--]--></div></div><nav aria-label="Footer navigation"><h3 class="text-[12px] font-bold text-[#999] uppercase tracking-wider mb-3">Gezinti</h3><ul class="space-y-2 text-[13px]"><li><a href="/" class="text-[#888] hover:text-white transition-colors">Ana Sayfa</a></li><li><a href="/trending" class="text-[#888] hover:text-white transition-colors">Trendler</a></li><li><a href="/archive" class="text-[#888] hover:text-white transition-colors">Tweet Arşivi</a></li><li><a href="/blog" class="text-[#888] hover:text-white transition-colors">Blog</a></li><li><a href="/about" class="text-[#888] hover:text-white transition-colors">Hakkımızda</a></li><li><a href="/contact" class="text-[#888] hover:text-white transition-colors">İletişim</a></li></ul></nav><nav aria-label="Popular profiles"><h3 class="text-[12px] font-bold text-[#999] uppercase tracking-wider mb-3">Popüler Profiller</h3><ul class="space-y-2 text-[13px]"><!--[--><li><a href="/profile/elonmusk" class="text-[#888] hover:text-white transition-colors">@elonmusk</a></li><li><a href="/profile/BarackObama" class="text-[#888] hover:text-white transition-colors">@BarackObama</a></li><li><a href="/profile/taylorswift13" class="text-[#888] hover:text-white transition-colors">@taylorswift13</a></li><li><a href="/profile/cristiano" class="text-[#888] hover:text-white transition-colors">@cristiano</a></li><li><a href="/profile/NASA" class="text-[#888] hover:text-white transition-colors">@NASA</a></li><!--]--></ul></nav><nav aria-label="Legal links"><h3 class="text-[12px] font-bold text-[#999] uppercase tracking-wider mb-3">Yasal</h3><ul class="space-y-2 text-[13px]"><li><a href="/terms" class="text-[#888] hover:text-white transition-colors">Kullanım Şartları</a></li><li><a href="/privacy" class="text-[#888] hover:text-white transition-colors">Gizlilik Politikası</a></li></ul></nav></div><div class="pt-6 border-t border-[#1a1a1d] flex flex-col sm:flex-row items-center justify-between gap-3"><p class="text-[11px] text-[#888]">© 2025 Zamantika. Tüm hakları saklıdır.</p><p class="text-[11px] text-[#888]">zamantika.com</p></div></div></footer><span></span></div></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{apiBase:"/api",siteName:"Zamantika",siteUrl:"https://zamantika.com",i18n:{baseUrl:"https://zamantika.com",defaultLocale:"tr",rootRedirect:"",redirectStatusCode:302,skipSettingLocaleOnNavigate:false,locales:[{code:"tr",name:"Türkçe",dir:"ltr",language:"tr-TR"},{code:"en",name:"English",dir:"ltr",language:"en-US"},{code:"de",name:"Deutsch",dir:"ltr",language:"de-DE"},{code:"fr",name:"Français",dir:"ltr",language:"fr-FR"},{code:"es",name:"Español",dir:"ltr",language:"es-ES"},{code:"ar",name:"العربية",dir:"rtl",language:"ar-SA"},{code:"ru",name:"Русский",dir:"ltr",language:"ru-RU"},{code:"pt",name:"Português",dir:"ltr",language:"pt-BR"},{code:"ja",name:"日本語",dir:"ltr",language:"ja-JP"},{code:"ko",name:"한국어",dir:"ltr",language:"ko-KR"},{code:"id",name:"Bahasa Indonesia",dir:"ltr",language:"id-ID"},{code:"zh",name:"中文",dir:"ltr",language:"zh-CN"},{code:"hi",name:"हिन्दी",dir:"ltr",language:"hi-IN"},{code:"vi",name:"Tiếng Việt",dir:"ltr",language:"vi-VN"},{code:"ur",name:"اردو",dir:"rtl",language:"ur-PK"},{code:"th",name:"ไทย",dir:"ltr",language:"th-TH"},{code:"tl",name:"Filipino",dir:"ltr",language:"tl-PH"}],detectBrowserLanguage:{alwaysRedirect:false,cookieCrossOrigin:false,cookieDomain:"",cookieKey:"i18n_lang",cookieSecure:false,fallbackLocale:"",redirectOn:"root",useCookie:true},experimental:{localeDetector:"",typedPages:true,typedOptionsAndMessages:false,alternateLinkCanonicalQueries:true,devCache:false,cacheLifetime:"",stripMessagesPayload:false,preload:false,strictSeo:false,nitroContextDetection:true,httpCacheDuration:10},domainLocales:{tr:{domain:""},en:{domain:""},de:{domain:""},fr:{domain:""},es:{domain:""},ar:{domain:""},ru:{domain:""},pt:{domain:""},ja:{domain:""},ko:{domain:""},id:{domain:""},zh:{domain:""},hi:{domain:""},vi:{domain:""},ur:{domain:""},th:{domain:""},tl:{domain:""}}}},app:{baseURL:"/",buildId:"427b048c-d2a2-4dda-917e-7df7d93f4511",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
<script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":4,"once":49,"_errors":50,"serverRendered":9,"path":52,"pinia":53},["ShallowReactive",3],{},["Reactive",5],{"$si18n:cached-locale-configs":6,"$si18n:resolved-locale":42,"$sauthModal":43,"$ssite-config":44},{"tr":7,"en":10,"de":12,"fr":14,"es":16,"ar":18,"ru":20,"pt":22,"ja":24,"ko":26,"id":28,"zh":30,"hi":32,"vi":34,"ur":36,"th":38,"tl":40},{"fallbacks":8,"cacheable":9},[],true,{"fallbacks":11,"cacheable":9},[],{"fallbacks":13,"cacheable":9},[],{"fallbacks":15,"cacheable":9},[],{"fallbacks":17,"cacheable":9},[],{"fallbacks":19,"cacheable":9},[],{"fallbacks":21,"cacheable":9},[],{"fallbacks":23,"cacheable":9},[],{"fallbacks":25,"cacheable":9},[],{"fallbacks":27,"cacheable":9},[],{"fallbacks":29,"cacheable":9},[],{"fallbacks":31,"cacheable":9},[],{"fallbacks":33,"cacheable":9},[],{"fallbacks":35,"cacheable":9},[],{"fallbacks":37,"cacheable":9},[],{"fallbacks":39,"cacheable":9},[],{"fallbacks":41,"cacheable":9},[],"",false,{"currentLocale":45,"defaultLocale":45,"env":46,"name":47,"url":48},"tr","production","Zamantika","https:\u002F\u002Fzamantika.com",["Set"],["ShallowReactive",51],{},"\u002Fprofile\u002FBablyRajput",["Reactive",54],{"auth":55,"dm":58},{"user":56,"isAuthenticated":43,"unreadNotifications":57},null,0,{"conversations":59,"activeConversationId":56,"messages":60,"totalUnread":57,"isOpen":43,"loading":43,"messagesLoading":43,"socketConnected":43},[],[]]</script></body></html>