Front-End technologies to master before React JS

22 Jul, 2021 · 5 min read

"From my personal experience hopefully, this can assist new developers starting in the tech space."

New developers in the tech space are often overwhelmed by the fundamentals of programming languages, algorithms and data structures.

As a result, they fail to grasp the basics of a programming language and immediately focus on frameworks or library to make the coding process faster and much easier.

Don't get me wrong there is nothing wrong with using frameworks or a library, not only do they speed up your coding process but they can also go as far as to you writing clean code.

However, such developers are often limited by frameworks source code and hence, do not know how to alter code to make their product or web page unique so it stands out from competitors.

Find a roadmap of technology to learn before proceeding to React or any JavaScript framework for that matter.

1. Version Control System
2. HTML
3. CSS
4. CSS Framework
5. JavaScript
6. jQuery

Version Control Systems

Before starting your coding journey I suggest it is best you learn how version control tools work.

The purpose of a version control system is to store and keep track of your code to ensure reverting back to previous versions if the current source code does not function as expected.

It also ensures easy collaboration among developers.

Open-source version control software tools such as GitHub or GitLab will not only assist you in landing a job in the future but will also document your coding journey from the very beginning.

This should be done in conjunction with learning HTML so you have files to store on GitHub.

HTML

When starting with HTML or any programming language most developers make the mistake of trying to memorize everything from HTML elements and attributes, CSS properties to even built-in JavaScript objects, methods and properties.

Most of the time you will hardly ever use that HTML element or CSS property in the future so why spend hours trying to memorize them.

Just make sure you go over the fundamentals.

Do not just read over it or watch tutorials explaining concepts but you should also understand the content.

Programming also involves consistent practice.

Nevertheless, when going over HTML make sure you familiarize yourself with HTML semantic tags, attributes associated with these tags and values that apply to them.

CSS

Before starting with Cascading Style Sheets (CSS) it is important for you to understand the concept of responsive web design.

Responsive web design not only ensures your website looks good across all devices but is also one of the main ranking factors used by Google in their search results.

Therefore, it is of utmost importance you familiarize yourself with media queries, box-model, flexbox and grid layouts.

Ideally, I would suggest going over flexbox and grid layouts before other CSS properties such as HTML element transformations, transitions or positioning because outlining the layout of your website at the start sets the tone for the rest of your project.

CSS Framework *(optional)

Learning a CSS framework allows making beautifully styled websites much quicker than custom styles and easier.

I would suggest you go over at least two frameworks to deduce which frameworks classes you understand and best suits your coding practices.

Bootstrap and Tailwind CSS are good shouts in my opinion.

JavaScript

When encountering JavaScript as your very first programming language it can often overwhelm developers.

JavaScript can be quite tricky to grasp since it has numerous unexpected results.

Hence, before touching any book on JavaScript or any programming language for that matter, you should ensure that you first watch a crash course on that specific programming language.

This ensures that you have a high-level overview of the programming languages and topics usually encountered in that specific programming language.

Thereafter, you can proceed to either watch more in-depth tutorials or go over a textbook on JavaScript.

TIP: Familiarize yourself with ES6 features such as variable declarations, template literals, arrow functions, object destructuring, classes as well as promises.

TIP: Make sure you do not fall into the trap of "tutorial hell".

Building projects are the best way to put what you've learned into practice.

jQuery *(optional)

Finally, just like CSS frameworks, jQuery is another optional library to learn in your web development journey.

jQuery simplifies pure JavaScript code since it takes a lot of common tasks that require many lines of JavaScript code to accomplish just by calling a single line of code.

Closing thoughts

Once you have gone over all these technologies then learning and building projects in React JS will sure be a breeze.

I am aware the roadmap might not be suit all developers since version control systems could be overwhelming at the start of your coding journey or even learning grid layouts and flexbox before going over other CSS properties.

However, I can assure you it would benefit you in the tech space if you focus on key concepts because time is your most valuable resource in this industry.

Let me know in the comments if you've found this article helpful.