I tried React in 2021. Here are my thoughts
Tags: javascript, react, programming, productivity
Published: 2021-03-14 09:33:04

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:paragraph -->
<p><strong>Disclaimer</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>This article is based on my experience with React, and I don’t aim to hurt anyone’s intentions.</li><li>I tried React for 2 days, hence I’m no expert and don’t wish to mislead the readers.</li></ol>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Relax and Enjoy….:)</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p><strong>Here are 5 things that are worth sharing.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>What is&nbsp;React?</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*HitRmZW4ye5slGOHdXYi2A.png" alt="React Takeaways"/><figcaption>React Takeaways</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4>1. Small learning&nbsp;curve</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I was really amazed at how easy it was to get started with React.</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">npx create-react-app my-app<br>cd my-app<br>npm start</pre>
<!-- /wp:preformatted -->

<!-- wp:list -->
<ul><li>After following the above commands, I was able to see a sample React App running.</li><li>I feared that behind the scenes, there would be n number of files, coordinating together and including different packages, <strong>BUT</strong></li><li>I was wrong. As I started exploring the folders and their respective files, it was making sense to me.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>React starts off with minimum/essential configurations, and can be shaped as the features evolve.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>2. Instant Hot&nbsp;Reload</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This was truly up to the mark. I started the local server and began to do some minor changes in the existing codebase (like changing the title, etc)</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>As soon as I saved anything, it used to reflect almost instant.</li><li>In the console, it would prompt me to install <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en" rel="noreferrer noopener" target="_blank">extensions</a> for React.</li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>On a sidenote, I found after adding a new package, I would need to restart my server.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:heading {"level":4} -->
<h4>3. Component-based approach</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let’s take the below UI. If I start to program this, I would think of breaking it into components, and yes, <strong>React encourages this</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Note: I used the functional components.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*GyMe_axqMrti6ObMyO-8pg.png" alt="Component-based approach"/><figcaption>Component-based approach</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The components can look like this</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*1cuIsifmwXetmwsUwu3OVQ.png" alt="Component-based approach"/><figcaption>Component-based approach</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The next question is how do you know what should be a component? The answer lies in the <a href="https://en.wikipedia.org/wiki/Single_responsibility_principle" rel="noreferrer noopener" target="_blank">single responsibility principle</a>, that is, a component should ideally only do one thing.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If it starts growing, it should be decomposed into smaller subcomponents.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>What does a component look like</p></blockquote>
<!-- /wp:quote -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function Welcome(props) {<br>  return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;<br>}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Once a component is defined, we can use it anywhere, making it reusable.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>4. JS and&nbsp;Props</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>React resembles vanilla JavaScript, maybe one of the reasons for its popularity.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const element = &lt;h1&gt;Hello, world!&lt;/h1&gt;;</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>Ok, this is not HTML, nor it is Javascript. Its <strong>JSX (JavaScript XML)</strong></li><li>After compilation, JSX expressions become regular JavaScript function calls and evaluate into JavaScript objects.</li><li>React uses camelCase property naming convention over HTML attribute names.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>For instance, <code>class</code> becomes <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/className" rel="noreferrer noopener" target="_blank">className</a></code> in JSX</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Props</h4>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>Now, inside my components, I began wondering how to include component-specific properties.</li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Enter <strong>Props</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:list -->
<ul><li>Props are short for properties and work similarly to the HTML attributes.</li><li>Way to pass data from one component to others, in the same way as arguments are passed in a function.</li></ul>
<!-- /wp:list -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">&lt;Button onClick={btnOnClick} text="Fetch" /&gt;</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Here, <code>onClick</code> and <code>text</code> are properties of the Button Component.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>I also wanted to have type checking for those properties.</li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Enter <strong>PropTypes</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>React has some built-in type checking abilities. You can assign the <code>propTypes</code> property to the component-specific property</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">Button.propTypes = {<br>    text: PropTypes.string,<br>    onClick: PropTypes.func.isRequired,<br>}</pre>
<!-- /wp:preformatted -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Note: This <a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets" rel="noreferrer noopener" target="_blank"><strong>plugin</strong></a> helped me a lot.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:heading {"level":4} -->
<h4>5. Development Experience</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is one of the important factors which decides in continuing with a technology happily or forcefully.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>I liked the experience with React. It was fun and easy to use.&nbsp;</li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Maybe one of the reasons for being one of the popular frameworks today.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:heading {"level":4} -->
<h4>* Other&nbsp;mentions</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Hooks (useState)</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A Hook is a special function that lets you “hook into” React features.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><code>useState</code> is a Hook that allows you to add React state to function components.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p><strong>When to use a Hook?: </strong>If you write a function component and realize you need to add some state to it, you use a hook</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>import React, { useState } from 'react';<br><br>function Example() {<br>  const &#91;count, setCount] = useState(0);<br>  <br>  return (<br>    &lt;div&gt;<br>      &lt;p&gt;You clicked {count} times&lt;/p&gt;<br>      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;<br>        Click me<br>      &lt;/button&gt;<br>    &lt;/div&gt;<br>  );<br>}</code></pre>
<!-- /wp:code -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3>Final Thoughts</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I realized every technology has some things in common — like loops, functions. They only differ by their syntax and structure and the way that tech allows you to write your logic.</p>
<!-- /wp:paragraph -->

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>