2-year roadmap to becoming a professional ReactJS developer

Hello friends!

In this post, I will talk about how to learn to become a professional Reactjs programmer, I will not use specialized terms like Junior, Senior, Expert, … to express the level of proficiency in using. Reactjs, because these terms have been used by most people to describe years of experience, are rather not reflective of the true nature of the level we’re talking about in the post.

The article is the subjective opinion of the writer, so it may or may not be suitable for you. Please consider it before reading more!

So what is a Reactjs developer called a pro?

If you meet all 8 criteria below then congratulations! You are a professional Reactjs developer

1. Understand Reactjs

First of all, you must understand Reactjs (of course), you don’t have to understand everything about it, because if you do, then you are on a different level. Understanding Reactjs to such a degree that when it comes to any problem, you know what to do to solve it without having to ask others.

To achieve this in 2 years, you need:

• Read almost everything in reactjs.org ‘s docs : Read and ponder, sandbox anything that reads.
• Read a lot of open source projects using Reactjs: on Github there are dozens of great projects available for your reference. The cool stuff you’ll most likely learn here.
• Write a lot of sandbox: Sandbox helps you to quickly test a problem without having to spend a lot of effort, write hard sandbox!
• Participate in lots of open source projects: Try to create as many issues for each project you join. When creating an issue, you are really starting to delve into the project’s code. In addition, you will have the opportunity to communicate with professional coders, you will learn from them not only knowledge but also how to organize a repo, how to answer the issues of members.

2. Coding “Pro”

This skill is usually achieved when you have:

• Write code to wear out the keyboard, all hands
• Thinking of what I’m doing all the time, still thinking about it on the road. Sometimes the light is red and doesn’t know to stop
• Read almost all of the code of major Open sources about React – Not enough – Imitating rewriting their code, gradually becoming my knowledge, reaching out is immediately pulled out.
• Not enough yet! Some of the components that you like, opensource are not responsive, usually when you go to a commercial product and see them doing this very PRO, but of course things like that never have opensource. . So I advise you that in addition to reading Opensource, you must also read the code that has been built, minified. This is not easy at all, but stay calm, read through the article I will show you how to read the code that has been built.
• Code clean, no-comments: Code clean is also not difficult, there are many eslint, tslint can refer to right from the beginning of writing, it will take time to get used to your hands and become a habit. But no-comment is quite difficult. Practice gradually, less miscellaneous comments gradually go and then you will find that the comment is redundant. I usually only comment at the level of function, class, inside, it is very difficult to write comments in places especially complicated.

Some of you think that it is easy to code clean with a small project, but when the project grows up, it is difficult. These are just the thoughts of amateur coders (coders). No matter what level, small or large project, you must always code very clean, no matter how fast the progress is, no matter how fast you code 10 lines or 1000 lines you must always be clean. If your code is not clean => You are still not called a pro!

3. Code speed

Professional code, speed is also a must, at least:

• Typing with 10 fingers, “don’t cut the trigger”
• Type without having to look at the keyboard
• Use snippests (most IDEs support them) when writing code to minimize typing time in basic code.
• Limit maximum mouse use

4. Say no to packages

Some of you will think that these criteria are irrelevant, project requirements, progress, … forcing you to use UI packages. When I joined some Reactjs fanpages (Vietnamese language), I found the most frequently asked questions were:

Which library should this use? … Using the ABC of this XYZ library, do I have to configure ntn to xxxx? etc …

Looking back, my company employees also find that, when encountering a problem, most of you will think of the direction of finding a library to solve that problem.

Many of you think that any problem, there are libraries already written, installed and used. I will list some disadvantages when you use ready-made libraries:

• When you are a student using ready-to-eat library, it’s ok. After graduating a few years, I still keep that habit, so I should review myself. code 5 ~ 10 years is still a fan of ready-to-eat libraries so you should switch to another job (really recommended). I have met many people> 10 years of experience, all day, all day, I find ready-to-eat libraries. OMG !. If you think there’s nothing bad about using a ready-made library, as long as it’s done, check the next point:
• Well-built libraries, (build by myself probably won’t be as good as what people have done and used by many people), OK, but in most cases you’ll only use a very small portion. Small size of the library, also means that when you import it into your Project, the excess code is likely to be more than the amount of code you use. Imagine when your project grows up, those extra lines of code are really shit, it will greatly reduce the performance of the application! To verify this problem, you can use Chrome’s lighthouse tool and see the excess code in your projects (if you are a fan of ready-made libraries).
• If you love to use ready-to-eat libraries, even if you have code for 30 years, your level is still the same as a fresh graduate student. When you encounter a certain basic problem, you cannot solve it yourself, you and the student have the same solution: use Google to find a delicious library to use.

Start building your own libraries from the very beginning, from a young age, and build and upgrade over the years. Only by doing so will your level truly improve over time. If you find it too difficult to start, building simple things first, such as writing a Button component, to write it fully is not easy. You will see that it is also the Button component, this year looking back at the year I wrote it was just like Shit. If you really think so, congratulations because obviously this year you have improved over the previous year.

My real case study.

A few years ago, when I was working on a Chat project like Slack, when the application had to load a very long list of messages, rendering all those messages DOM would make the browser LAG. that’s clear. So I have to learn Windowing technique. This is a technique that renders the DOM only a certain number of elements (in the space of the user’s screen, usually plus a bit above and below). Then I found react-virtualized, at first I learned about it and found it very magic, but when implementing specifically in my project, it was impossible to configure that react-virtualized so it looks like Slack ( what I fell in love with). Specifically:

• To make an infinitive list with “2-way load (ie when scrolling to the top or bottom of the list, it must load more old or newer messages)” with react-virtualized is not easy, of course. Still can do it but not as I want. After a while of tinkering with the config loaded 2-way, there was a problem: When it was loaded down, everything was fine, but when loaded upwards, every time it was loaded, the scroll jumped a bit and didn’t stay the same. At first, this makes me uncomfortable, do you understand that shocking feeling?
• It is not possible to customize to add a skeleton to the top or bottom list while it is loading the same way as Slack
• In short, it was not as good as the one of his dreams, Slack. => I made up my mind to write a Virtualized list like Slack , indeed at that time I was a bit reckless, because at that time (and maybe now too) on opensource only react-virtualized and react-window are the 2 best libraries for handling windowing renderings. but both of these are from the same man.

1. To make this determination, I have saved all of Slack’s code (built code. Minify it), stole from their web html.
2. Use online tools to beautify the shit code you just stole, just make it easier to read, never decompile the js code you built!
3. Install the React addon into Chrome, inspect to see the Slack component’s structure:

These are exactly the keywords that I will use to find in the pile of Shit code just stole it: DynamicList, Scrollbar, ListItem, …. Where to escape!

4. From these keywords, I will filter out the code of the components I need, narrow the scope of research to save suffering!
5. Let’s start studying what code has been built:

Honestly, when I first started reading the JS code that was built, I was really confused because there were many places I didn’t understand what the hell it was. You try this paragraph offline!

Do you understand where this piece came from the Babel he built?

At that time I did not know who to ask, in fact I asked some people, but they did not understand what the original source was, so Babel would build this paragraph. So I decided to ask Mr. Babel: You build this from the club? It was so black that he didn’t answer me, so I had to go find out more about Babel. After a short time getting to know Babel, it was a problem. As follows:

That paragraph is in fact when a class inherits from another class, of course in the constructor must call the super function of the father. Just that, in fact the above code is from this one that builds (roughly):

The mother of it, the primitive React code that it builds up is so damn impressive. At that time it was a great blessing for me to understand Babel’s code. It gives me the motivation to pore over Slack’s code every day, I read it till I forget to eat, sleep (only going to the toilet, I still have to go), (in fact, it didn’t cut).

If I work hard to sharpen iron, one day will become golden, reading so much Babel code that nowadays looking at Babel code is no different from the source code, making me able to understand a lot of the source code of the giants. even though it conceals like a cat c * t (not open source).

In the end, I have written a component similar to Slack about 90%, dare not say it is identical, but the basic functions are no different from Slack. Of course, during the writing process, there are also many problems, sometimes depressed, I don’t find a solution, then I leave it alone, after a while I come back to find a solution. Every time you work on upgrading and improving like that, in the end it is also very delicious.

In short: Reading JS that has been built has helped me learn the code of many giants, making my level much better than reading Opensource!

5. Have skills in Debug, test, CI / CD, performance analytics, …

These things are obvious so I do not want to talk much here, just a little emphasis is that you need to know how to observe, measure the performance of things written by you, to know the way to improve it. A simple example like you write an e-commerce page that Performance <20 points is also considered to be thrown away.

6. Proficient, source code management and build tools

Mastering webpack is a problem, you have to read all the webpack Docs, configure many projects, try changing the parameters in the config to see the results. Until you can write the config file by yourself!

That is not enough, besides Webpack, you must also know Rollup, Parcel. If you can answer the question: When to use Webpack, when to use Rollup, when to use Parcel to build the source code, then you have met these criteria!

In addition, you will also need to master npm, yarn for managing the source code. Do you know when to use npm and when to use yarn?

7. Good English

Without saying much, a good programmer needs to use English well, that is natural. Everyone knows the reason, so it would be redundant to say it.

8. Contribution to the community

The last criterion I set out is “Contribution to the community”. If you are a professional programmer but keep your things, refuse to share with others, then still not professional. Remember that you live in a community, if you want to move forward, the community itself has to go. OK?

Conclusion

This article I wrote is quite long, I also guess there are a lot of opinions I made not satisfied with some of you. I hope you will contribute your opinion so this article will be more useful for young people! Thank you for taking the time to read all of my post!