<h2 id="content"><a href="#content" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Content</h2>
<ul>
<li><a href="#content">Content</a></li>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#1-isolate-user-interface-ui-into-independent-components">1. Isolate User Interface (UI) into independent components</a></li>
<li><a href="#2-create-an-hierarchical-data-relationship">2. Create an hierarchical data relationship</a></li>
<li><a href="#3-think-about-where-the-state-should-live">3. Think about where the state should live</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<h2 id="introduction"><a href="#introduction" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Introduction</h2>
<p>When working with React.js, one of the most important thing you need to do is to shift your thinking.</p>
<p>React.js introduces a new mental model for developers to think and approach developing User interfaces (UI) in an easy and understandable way.</p>
<p>It gives developers the ability to declare how your HTML should look and act without worrying about the details.</p>
<p>The best part ? React.js handles all the details of the HTML like rendering, updating and removing elements from the HTML DOM for you.</p>
<p>The documentation refers to this as “Thinking in React”.</p>
<p>In this article, we’ll walk through that process, and to understand that means.</p>
<p>Let’s get to it!</p>
<h2 id="1-isolate-user-interface-ui-into-independent-components"><a href="#1-isolate-user-interface-ui-into-independent-components" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>1. Isolate User Interface (UI) into independent components</h2>
<p>The first step is to identify “components” within an User Interface (UI).</p>
<p>These are smaller parts that make up a whole.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/reactjs-thinking-in-components.png" alt="Isolate User Interface (UI) into independent components" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Isolate User Interface (UI) into independent components</blockquote>
  </div>
</div>
<p>In this example, this <strong>LinkedIn Page Card</strong> will be composed of:</p>
<ul>
<li>Card</li>
<li>Button</li>
<li>Image</li>
<li>Typography</li>
</ul>
<p>All of these individual “components” add up to the whole of the User Interface (UI).</p>
<h2 id="2-create-an-hierarchical-data-relationship"><a href="#2-create-an-hierarchical-data-relationship" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>2. Create an hierarchical data relationship</h2>
<p>Now that we have our individual components, we need to think about how they relate to each other.</p>
<p>So, how will the “data flow” through out these components and eventually end up on the screen.</p>
<div id="survey-2dc68b7d-9e6a-4918-8b1c-12f60f34d3b3">
  <survey id="2dc68b7d-9e6a-4918-8b1c-12f60f34d3b3"></survey>
</div>
<p>In this example, Card will be the parent, and the data will flow downwards (pass via props) to the children (Button, Image).</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/reactjs-data-flow.png " alt="Create an hierarchical data relationship" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Create an hierarchical data relationship</blockquote>
  </div>
</div>
<h2 id="3-think-about-where-the-state-should-live"><a href="#3-think-about-where-the-state-should-live" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>3. Think about where the state should live</h2>
<p>Within React.js, each components can have their own state (using <code class="language-">useState
</code>).</p>
<p>The question comes down to: Where should we put the state ?</p>
<p>Looking at the “Follow” button, we may need an external API which means we may need some loading state while that gets processed.</p>
<p>So, in this case, the state is better kept within the Card component.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/reactjs-state-flow.png" alt="Think about where the state should live" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Think about where the state should live</blockquote>
  </div>
</div>
<h2 id="conclusion"><a href="#conclusion" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Conclusion</h2>
<p>That’s the process for “Thinking In React”, and the last part is to build it all out!</p>
<p>Before we part, let’s do a quick review.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/reactjs-takeaways.png" alt="Thinking In React takeaways" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Thinking In React takeaways</blockquote>
  </div>
</div>
<p>If you enjoyed that or learned something new, please share this article with a friend or co-worker 🙏❤️! (Thanks!)</p>
<p>Also, feel free to connect with me on social media, and let me know which part you found most interesting!</p>
<p><strong>Connect with (or Follow) me on LinkedIn</strong> - <a href="https://www.linkedin.com/in/ijerrychang" target="_blank" rel="nofollow noopener noreferrer">https://www.linkedin.com/in/ijerrychang</a> 🤝</p>


Jerry Chang

Go Back

Thinking In React

Enjoy the content ?