The only thing you need to master React! (from my 5 years of experience)

Shubham Gupta — Sat, 11 Nov 2023 14:52:32 +0000

I've been working in and around React since the time it got popular. I've dug in every corner of it, from reading the source code to creating my own libraries to simplify the mess React can create at times.

But this was all possible because of one thing I did, and even to this date, I continue to do it when I want to learn something at its core in the least time possible.

Create your own (mini) version of it.

whY?

React, at its core, is just a way to write HTML using JS. Why JS? Because it's a scripting language and you can write logic in it, while HTML is a declarative language and you can simply declare everything you want.

React combines the two. You can declare with logic, empowering everything. That's it. That's all the React ever was, is, and will be.

What to do?

I get it. The first thought of creating your own mini-version of React can seem both exciting and heart-pounding at the same time. Just like talking to your crush. But here, we will learn all about masterful flirting, i.e. how to masterfully create your own version of React.

Steps:

Let's stop calling it "your version of React.".
Let's call it "GoodAct".
Second, this is where you come in. I am not going to give you any code because reading my code won't make you "master" react. You will have to open up VS Code and write your own code. I, however, will do one thing for you. If you write your code, share the github repo with me. I'd give it a try and feature some good ones in an article. Also, shoot me any questions or if you're stuck somewhere. Let's get you resolved.

My email is shubham@goodgit.io

Basics to understand

To keep things simple, let's not use JSX. It's basically a really complex version of "replace". as in, replace this tag with this code all the way down to HTML.

<Blog title="Hello World" image="/static/image.png">

is replaced to

<div class="blog">
  <h1>Hello World</h1>
<image src="/static/image.png" />
</div>

What to build?

2 things. Virtual DOM and state That's it.

To keep things simple and core, all will be there in one HTML file only. The following weird-looking syntax should be understood by goodact:

<html>
  <head>
    <title>GoodAct</title>
  </head>
  <body>
    <h1>{{ title }}</h1>
    <p>{{ body }}</p>
    <script src="goodact.js"></script>
  </body>
</html>

<html>
  <head>
    <title>GoodAct</title>
  </head>
  <body>
    <input type="number" value="{{ userN }}"/>
    <h1>Your number times 2 is {{ userN * 2}}</h1>
    <script src="goodact.js"></script>
  </body>
</html>

<html>
  <head>
    <title>GoodAct</title>
  </head>
  <body>
    {% for i in range(10) %}
      <h1>Let's count {{ i }}. </h1>
    {% endfor %}
    <script src="goodact.js"></script>
  </body>
</html>

That's it. 😂 I know, I know. it's crazy. but I also know you can do it. It's not easy but it is going to ramp up all the muscles in your brain, but by the end of it, you'll be smarter, sharper and amaster.😉

start on a weekend. Think about how you can build something like this. For those of you familiar with Django or Flask, it will feel a lot of jinja-templating, and you're correct; that's where I drew my inspiration from.

Once you can build a system like this, you'll know exactly how React works under the hood, and you will have a newfound appreciation for the tool you are so used to using.

See you on the other side with your projects working. Shoot me an email if you need any help, just want to talk, or are excited to share what you built!

Also, also, also

Use GoodGit to push your code to GitHub.
Just install it with

pip install goodgit

and then

gg add.

GoodGit takes care of the rest. You don't even have to write a commit message. Just go and use it. You can read about it at https://goodgit.io.