<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ali AbdElbagi</title>
    <description>The latest articles on DEV Community by Ali AbdElbagi (@ali007depug).</description>
    <link>https://dev.to/ali007depug</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2838560%2F2c18e462-9d69-4d30-abea-a4fe6c44753c.png</url>
      <title>DEV Community: Ali AbdElbagi</title>
      <link>https://dev.to/ali007depug</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ali007depug"/>
    <language>en</language>
    <item>
      <title>Soft Skills Summarize Part 2</title>
      <dc:creator>Ali AbdElbagi</dc:creator>
      <pubDate>Mon, 27 Jul 2026 19:46:54 +0000</pubDate>
      <link>https://dev.to/ali007depug/soft-skills-summarize-part-2-2mfp</link>
      <guid>https://dev.to/ali007depug/soft-skills-summarize-part-2-2mfp</guid>
      <description>&lt;h3&gt;
  
  
  Why is this book unlike any other book you've read?
&lt;/h3&gt;

&lt;p&gt;The author begins the first chapter with this question, saying that most books related to software development are about software development, but this book is not like that; it is not just about software development, but about making you a good developer.&lt;/p&gt;

&lt;p&gt;By “good” he means that you will not only be excellent at solving software problems and detecting errors, but also at developing your career path, achieving your goals, and living a better life.&lt;/p&gt;

&lt;p&gt;He mentions a very important point, which is that this book is not about what you can do, but about you , yourself, about your career, your life, your body, your mind, and also your soul.&lt;/p&gt;

&lt;p&gt;The author adopts an approach to software development based on the belief that if you want to become better, you need to focus on yourself as a whole, not on one or two aspects of your life.&lt;/p&gt;

&lt;p&gt;Then he goes on to mention the seven chapters of the book, where he says:&lt;/p&gt;

&lt;p&gt;The book begins with the career path, explaining why he chose to start with this particular topic. He justifies this by stating that developers don't manage their careers well, and mentions that this chapter will help them climb the career ladder, start an investment company, or even become entrepreneurs and create their own project. The author says he did all three of these things and will share his mistakes so you can avoid them. He will also cover important topics such as:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;How to write a compelling resume&lt;/li&gt;
&lt;li&gt;Mastering job interviews&lt;/li&gt;
&lt;li&gt;Working remotely&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In the second chapter, entitled “Marketing Yourself,” the author mentions that developers feel uncomfortable with the word “marketing,” but the author assures the reader that by the end of this chapter, your view of this word will change, and you will understand its importance. He says that this chapter will not include topics such as how to become rich in a short period or the like, but it will contain practical advice on building a personal brand for yourself, and how to become known by speaking, teaching others, or writing, and some methods that you have not considered.&lt;/p&gt;

&lt;p&gt;In the third chapter, which is the chapter on “Learning”, which talks about the skill of self-learning, and how developers should teach themselves in the right way, he says that the teaching methods we used to take in schools and universities are deficient, because they make you get used to someone else teaching you and giving you lessons. He clarifies that he does not mean that having a teacher is wrong, but in the first place you should rely on your abilities and curiosity to get as much knowledge as possible, instead of sitting to listen to a boring lecture and taking notes.&lt;/p&gt;

&lt;p&gt;The author will guide you through a self-learning method using 10 steps. These ten steps are his own creation, which he used in his professional life to acquire knowledge. He mentions that he used these steps to create more than 50 training courses over a two-year period. He also mentions that this chapter covers other important topics such as:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;How do you find a good mentor, and how can you be a mentor to others?&lt;/li&gt;
&lt;li&gt;Do you need traditional education or a certificate to be successful?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In the fourth chapter, which is the "Productivity" chapter, which is the thing that software developers suffer from the most, and it is the first obstacle on your path to success, and sometimes you are good at everything except overcoming procrastination, chaos and laziness.&lt;/p&gt;

&lt;p&gt;In this chapter, the author shares a method for improving productivity, and also addresses topics such as: burnout, watching too much television, finding motivators, and working hard.&lt;/p&gt;

&lt;p&gt;As for the fifth chapter, which is the "Financial" chapter, the author believes that this topic is ignored by many, and he says that you can be the most successful software developer in the world, but if you do not manage money well, you will end up bankrupt and sitting on the side of the road begging.&lt;/p&gt;

&lt;p&gt;The author takes you on a world tour of economics and personal finance, telling you the basics of making financial decisions and planning your financial future. The author explains that he may not be a financial expert, but since the age of 18 he has been a real estate investor. He says that he will not go into much detail on this subject because it requires books and chapters, but he will be content with explaining the basics of managing financial income, avoiding debt, and the story of his retirement at the age of 33. He says that this is not difficult, but anyone can retire early.&lt;/p&gt;

&lt;p&gt;In the “Fitness” chapter, which is the sixth chapter, the writer talks about losing weight, gaining muscle, and obtaining excellent physical fitness.&lt;br&gt;
The writer takes you through the basics of diet and nutrition, explains how the food you eat affects your body, and how to develop a plan to lose weight, gain muscle, or both.&lt;/p&gt;

&lt;p&gt;Finally, in the "spiritual aspect," which is the last chapter, the author focuses on helping you reprogram your brain to create positive behavior for success, and briefly touches on the emotional aspect and relationships, because most people who work in the technical field suffer in this aspect. The writer provides a selection of books, and these books are recommended by a group of successful people whom the writer has met, so that he is asked to recommend a book that everyone should read.&lt;/p&gt;

&lt;p&gt;The chapter has ended: “Why is this book not like any other book you have read?”&lt;/p&gt;

</description>
      <category>career</category>
      <category>learning</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Soft Skills Book Summarize Part 1</title>
      <dc:creator>Ali AbdElbagi</dc:creator>
      <pubDate>Sun, 26 Jul 2026 09:52:26 +0000</pubDate>
      <link>https://dev.to/ali007depug/soft-skills-book-summarize-part-1-5712</link>
      <guid>https://dev.to/ali007depug/soft-skills-book-summarize-part-1-5712</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Book Title is : &lt;em&gt;Soft Skills,The software developer's life manual&lt;/em&gt; &amp;amp; the author is &lt;em&gt;John Z. Sonmez&lt;/em&gt; .&lt;br&gt;
The book start with great introudction which is : &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"To all developers who strive for continuous self-improvement . Who are not satisfied with good enough . Who always seek every opportunity to expand their horizons and explore the unkonown . Whose thirst for knowledge is never fully quenched . Who believe that software development means more than just writing code . Who know that failure is not the end , but merely a step in the journey . Who struggles at times, and sometimes fall , but always get back up again . Who have the will and determination to seek the harder path in life . And, most importantly, who are willing to help others along the way "&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This was the introduction to the book which I will summarize -God Willing’ on series and I will publish it on &lt;a href="http://ali-abd-elbagi-v2.vercel.app/en-US/blog" rel="noopener noreferrer"&gt;My Blog&lt;/a&gt; and also on My &lt;a href="https://www.linkedin.com/in/ali-abdelbagi-02313b223/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; and in &lt;a href="https://dev.to/ali007depug"&gt;dev.to&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Contents of The Book : &lt;/p&gt;

&lt;p&gt;The book contains 7 sections which are as follows :&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Career&lt;/li&gt;
&lt;li&gt;Marketing Yourself&lt;/li&gt;
&lt;li&gt;Learning&lt;/li&gt;
&lt;li&gt;Productivity&lt;/li&gt;
&lt;li&gt;Financial&lt;/li&gt;
&lt;li&gt;Fitness&lt;/li&gt;
&lt;li&gt;Spirit&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>book</category>
      <category>development</category>
      <category>software</category>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>Ali AbdElbagi</dc:creator>
      <pubDate>Tue, 26 May 2026 20:32:12 +0000</pubDate>
      <link>https://dev.to/ali007depug/-4b6l</link>
      <guid>https://dev.to/ali007depug/-4b6l</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/lovestaco/what-happens-when-you-run-npm-run-dev-ae9" class="crayons-story__hidden-navigation-link"&gt;What Happens When You Run `npm run dev`&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/lovestaco" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1002302%2F9dbe5057-f6da-4c08-9b5d-37fe9d281476.png" alt="lovestaco profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/lovestaco" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Athreya aka Maneshwar
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Athreya aka Maneshwar
                
              
              &lt;div id="story-author-preview-content-3703180" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/lovestaco" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1002302%2F9dbe5057-f6da-4c08-9b5d-37fe9d281476.png" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Athreya aka Maneshwar&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/lovestaco/what-happens-when-you-run-npm-run-dev-ae9" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;May 19&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/lovestaco/what-happens-when-you-run-npm-run-dev-ae9" id="article-link-3703180"&gt;
          What Happens When You Run `npm run dev`
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/javascript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;javascript&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/beginners"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;beginners&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/lovestaco/what-happens-when-you-run-npm-run-dev-ae9" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;61&lt;span class="hidden s:inline"&gt;&amp;nbsp;reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/lovestaco/what-happens-when-you-run-npm-run-dev-ae9#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              12&lt;span class="hidden s:inline"&gt;&amp;nbsp;comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            6 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial crayons-icon c-btn__icon"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success crayons-icon c-btn__icon"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>beginners</category>
      <category>javascript</category>
      <category>node</category>
      <category>npm</category>
    </item>
    <item>
      <title>important to read</title>
      <dc:creator>Ali AbdElbagi</dc:creator>
      <pubDate>Sun, 26 Apr 2026 11:16:17 +0000</pubDate>
      <link>https://dev.to/ali007depug/important-to-read-46ai</link>
      <guid>https://dev.to/ali007depug/important-to-read-46ai</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/busypeoples/notes-on-typescript-conditional-types-4bh" class="crayons-story__hidden-navigation-link"&gt;Notes on TypeScript: Conditional Types&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/busypeoples" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F67537%2Fc7645259-060f-45b0-810c-b9e6825f58c9.png" alt="busypeoples profile" class="crayons-avatar__image" width="166" height="159"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/busypeoples" class="crayons-story__secondary fw-medium m:hidden"&gt;
              A. Sharif
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                A. Sharif
                
              
              &lt;div id="story-author-preview-content-83418" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/busypeoples" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F67537%2Fc7645259-060f-45b0-810c-b9e6825f58c9.png" class="crayons-avatar__image" alt="" width="166" height="159"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;A. Sharif&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/busypeoples/notes-on-typescript-conditional-types-4bh" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Feb 17 '19&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/busypeoples/notes-on-typescript-conditional-types-4bh" id="article-link-83418"&gt;
          Notes on TypeScript: Conditional Types
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/typescript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;typescript&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/types"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;types&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/busypeoples/notes-on-typescript-conditional-types-4bh" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;45&lt;span class="hidden s:inline"&gt;&amp;nbsp;reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/busypeoples/notes-on-typescript-conditional-types-4bh#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              4&lt;span class="hidden s:inline"&gt;&amp;nbsp;comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            4 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
    </item>
    <item>
      <title>Callback props in React</title>
      <dc:creator>Ali AbdElbagi</dc:creator>
      <pubDate>Wed, 26 Mar 2025 20:24:06 +0000</pubDate>
      <link>https://dev.to/ali007depug/callback-props-in-react-37m0</link>
      <guid>https://dev.to/ali007depug/callback-props-in-react-37m0</guid>
      <description>&lt;p&gt;What are Callback Props?&lt;/p&gt;

&lt;p&gt;Callback props are just regular props, but instead of passing data, they pass functions that handle specific events.&lt;/p&gt;

&lt;p&gt;What’s their exact purpose?&lt;/p&gt;

&lt;p&gt;Let’s say you have a component called A, which has a state that holds some data. Inside A, you also have another component, B, which is, for example, a Button.&lt;/p&gt;

&lt;p&gt;Now, if you want to execute a specific function when clicking the button in B, and that function should modify the state inside A, you can use callback props.&lt;/p&gt;

&lt;p&gt;This is essentially a way for components to communicate with each other.&lt;/p&gt;

&lt;p&gt;Explanation of the Example&lt;/p&gt;

&lt;p&gt;Looking at the example in the image, the idea is:&lt;/p&gt;

&lt;p&gt;When the user clicks the Button, it triggers an action that is passed as a prop (in this case, OnClickToChangeName).&lt;/p&gt;

&lt;p&gt;When rendering the Button inside the parent component (A), you pass a function (ChangeNameValue) to the OnClickToChangeName prop.&lt;/p&gt;

&lt;p&gt;This function then modifies the state of A from within B when the button is clicked.&lt;/p&gt;

&lt;p&gt;This demonstrates the benefit of callback props: allowing a child component to trigger a state update in its parent component.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Favr1oi9fwn6f1pjfo10h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Favr1oi9fwn6f1pjfo10h.png" alt="code snap" width="800" height="686"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I d love to hear any additional insights or corrections on this topic! This is really my baby steps in React, and I found this concept a bit tricky to understand at first.&lt;/p&gt;

</description>
      <category>react</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Why Should I Learn the React Library?</title>
      <dc:creator>Ali AbdElbagi</dc:creator>
      <pubDate>Wed, 19 Mar 2025 20:14:49 +0000</pubDate>
      <link>https://dev.to/ali007depug/why-should-i-learn-the-react-library-4lhk</link>
      <guid>https://dev.to/ali007depug/why-should-i-learn-the-react-library-4lhk</guid>
      <description>&lt;p&gt;When learning something new, you need to &lt;strong&gt;research&lt;/strong&gt; it first to get a &lt;strong&gt;general understanding&lt;/strong&gt;.&lt;br&gt;&lt;br&gt;
If you skip this step, you'll likely feel &lt;strong&gt;lost and confused&lt;/strong&gt;.  &lt;/p&gt;

&lt;p&gt;This is actually the &lt;strong&gt;first step&lt;/strong&gt; that author &lt;strong&gt;John Z. Sonmez&lt;/strong&gt; mentions in his book&lt;br&gt;&lt;br&gt;
📖 &lt;em&gt;"Soft Skills: The Software Developer’s Life Manual"&lt;/em&gt;, and he calls it &lt;strong&gt;"Get The Big Picture."&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;So, when I decided to learn &lt;strong&gt;React&lt;/strong&gt;, I didn’t really ask myself &lt;em&gt;why&lt;/em&gt; I should learn it.&lt;br&gt;&lt;br&gt;
I just followed the &lt;strong&gt;Frontend Learning Path&lt;/strong&gt; and saw React listed there.  &lt;/p&gt;

&lt;p&gt;But why should &lt;em&gt;you&lt;/em&gt; learn React? 🤔  &lt;/p&gt;

&lt;p&gt;Here’s what makes &lt;strong&gt;React better&lt;/strong&gt; than &lt;strong&gt;Vanilla JavaScript&lt;/strong&gt;:  &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;1️⃣ Reusability of Components = Cleaner &amp;amp; More Organized Code&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;With React, you can &lt;strong&gt;break the UI&lt;/strong&gt; into &lt;strong&gt;components&lt;/strong&gt; like buttons, cards, avatars, etc.
&lt;/li&gt;
&lt;li&gt;You &lt;strong&gt;write the code once&lt;/strong&gt; and reuse it &lt;strong&gt;anywhere&lt;/strong&gt;—so you don’t repeat yourself!
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;2️⃣ Faster UI Updates with Virtual DOM&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;React &lt;strong&gt;only updates the changed elements&lt;/strong&gt;, not the entire &lt;strong&gt;DOM&lt;/strong&gt;.
&lt;/li&gt;
&lt;li&gt;This makes UI updates &lt;strong&gt;much faster&lt;/strong&gt;.
&lt;/li&gt;
&lt;li&gt;In Vanilla JS, &lt;strong&gt;too much DOM manipulation&lt;/strong&gt; slows down performance.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;3️⃣ Easier Data Handling with Hooks&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;React makes &lt;strong&gt;state management&lt;/strong&gt; easier with &lt;strong&gt;useState Hook&lt;/strong&gt;,
while in Vanilla JS, you have to manually handle state updates.
&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Still not convinced? Here’s why React is worth learning:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;✅ &lt;strong&gt;1. React is in high demand&lt;/strong&gt; in the job market.&lt;br&gt;&lt;br&gt;
✅ &lt;strong&gt;2. Big companies&lt;/strong&gt; use React—especially &lt;strong&gt;Meta (Facebook, WhatsApp Web, Instagram)&lt;/strong&gt;, which originally developed it.&lt;br&gt;&lt;br&gt;
✅ &lt;strong&gt;3. Learning React opens the door to mobile app development&lt;/strong&gt; with &lt;strong&gt;React Native&lt;/strong&gt; (which I plan to learn next! 😉).&lt;br&gt;&lt;br&gt;
✅ &lt;strong&gt;4. React is popular and has a strong ecosystem&lt;/strong&gt; of tools and libraries.  &lt;/p&gt;

&lt;p&gt;So, do you think these are &lt;strong&gt;convincing reasons&lt;/strong&gt; to learn React? 🤔💡  &lt;/p&gt;

&lt;h1&gt;
  
  
  React #WebDevelopment #Frontend #JavaScript 🚀
&lt;/h1&gt;

</description>
    </item>
    <item>
      <title>Learning React Js</title>
      <dc:creator>Ali AbdElbagi</dc:creator>
      <pubDate>Sun, 16 Feb 2025 14:13:57 +0000</pubDate>
      <link>https://dev.to/ali007depug/learning-react-js-1p94</link>
      <guid>https://dev.to/ali007depug/learning-react-js-1p94</guid>
      <description>&lt;p&gt;I am going to share my React learning journey with you.&lt;/p&gt;

&lt;p&gt;i need some advice from people who went in this path before me&lt;/p&gt;

&lt;p&gt;i have good knowledge in HTML,CSS,JS,SASS,TAILWIND&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
