Give a Space for ReactJS

Wednesday, October 30, 2024

I’m a one of students of Josh Comeau’s course. I purchased his courses: CSS for JS Devs (that’s a great name for boost the SEO) in November 2022 and Joy of React in May 2024. The courses are livetime not subscribe (I’m very grateful of it). Honestly, without Purchasing Power Parity (PPP), it’s difficult to afford his courses.

Why I buy his courses?

  1. Interactive learning.
  2. His explaination suitable with my style from tone, demonstration, and his story about some features.
  3. The hard projects. But, he gives the solutions. Don’t worry. He suggests the students for take 10 to 15 minutes to figure out. If you stuck, then you can watch his solution then try to write the code program without re-watching his solution. I really like this approach.
  4. Unguided learning. Related with the point number 3. Please visit his post: How To Learn Stuff Quickly.

Anyway, let’s take a back into ReactJS. I know ReactJS in 2016 when I was in college. I remember at that time to create a React Component you must use class-based component NOT functional-based component. I forgot is that JSX already mention in ReactJS docs at that time. Then, in 2018 I try to purchase a React course from Udemy to get familiar with ReactJS. It’s exciting but I don’t see the use case where I should the ReactJS for personal or serious projects at that time.

Hmm, maybe the effect of guided learning? 🤔

Some folks I follow on Twitter has two opinions. First, React is great because it’s easy to make component in JSX and combine it with CSS in JS! Second, React is terrible because of the folks more familiar with HTML, CSS, and JavaScript to create a component and they see React is quite difficult to optimize and can lead to performance cost. I’m in the second position.

Then, in 2019, Svelte 3 comes with wonderful presenting by Rich Harris! Finally, we can create a component with the origin mother language of web: HTML, CSS, and JavaScript. The $ operator is cool. The plus point is the brevity syntax, thank you compiler. I want to try it at that time! I jump into Svelte Repl. So far, so good. But again, I’m clueless with what should I create with Svelte 3. Also, there are some uncomfortable things in Svelte 3 that I need my brain to process it like writable/store, createEventDispatcher, the $: and $: {}.

Four years pass, the next release of Svelte more like ReactJS by syntax. At that time, when Rich announces the Runes, the magical symbol that remind you with ReactJS. Then, my brains suddenly pause with word “Hmm, WHY?“. After Svelte 5 release in stable version in October 2024, then I try my self to translate the two mini projects using React: Wordle from Joy of React and Tree Markdown from Nathan into Svelte 5. The process is faster! By having a knowledge I received from Joy of React course, it takes around 10 to 20 minutes to translate the ReactJS functional component into Svelte 5 with Rune.

ReactJS Functional Components || Svelte 5 Runes
useState()                    => $state()
useEffect()                   => $effect()
onChange()                    => oninput

The performance, still Svelte 5 is great over ReactJS (just see KB of JS shipped by Svelte 5 and compare it with ReactJS). Well, until now. I don’t know what will happened if ReactJS already shipped React Compiler in production mode. Will it more smaller or even matched with Svelte 5? Let see.

Now, another reason why I buy the Joy of React course is a lot of big companies in around the world especially in Indonesia use ReactJS in production mode. As a human who want to get a better job and salaries, like it or not, I must learn ReactJS and understand the features behind it. I imagine my self in this scenario: I get a job in a big companies that use ReactJS production. Then, 6 months or 1 year later I create a proposal and tiny experiment to replace ReactJS into Svelte 5. If everything runs smooth then more big companies use Svelte 5. Until then, I give ReactJS space in my brain.

Oh, don’t forget the programming fundamentals. :)