Beginner in Front-End? Don't Learn React, Angular or Vue

In the first steps as a programmer , people really lose their way trying to find their passion and they keep asking themself a lot of questions like: what should I learn? maybe front-end web development, or maybe Cloud computing, Machine learning engineering is better for me ,nah back-end web development is the one chosen for me .

However when it comes to the most fascinating field “front-end web development” people really get glamorized by how everyone is talking about this field , how they say : you don’t need any mathematics ,there’s no complexity you just need some Html CSS & Javascript and you are ready for that up coming job “, plus the fact that it seems easy to learn and understand in the first glance.

As a new person in the front-end development with some basics in Html,CSS, Javascript the first thing you hear in Facebook groups or Twitter “you are new !! Hop ! you better go learn some React ,Vue, or Angular", and because there’s a lot of hype around it, plus it’s popularity too ,and how it stands among most stared projects and Repositories in Github with other front-end/UI tools or toolkit and technologies like Bootstrap and Flutter, So you fail in that trap the trap of starting React or Vue, Angular without any prior or advanced knowledge in Javascript.

When you fail in the trap of starting a path in framework or library without prior or advanced knowledge in the language used to build that framework /libray .

As example React.js ,first of all, you look up for a book ,course in Udemy , Pluralsight or maybe a free tutorial in Youtube about React, in the case of the book , assuming you are in hurry like most beginner one of the things that you may do is skipping the prerequisites or the books introductions , so you just start with the first chapter Let’s say how to write the “Hello world” program ! and suddenly you get shocked by something like this(without any comment for highlighting ):

'use strict';
var Hello = React.createClass({

  render: function() {
    return React.createElement("h1", null, "Hello World!");
  },

});

var div = document.getElementById("hi");

ReactDOM.render(React.createElement(Hello), div);

Notice:

I’m talking here about people who have no familiarity with writing code in other words who just started their journey in Javascript.

In case you are like thousand of worries beginner out there who don’t quite facing a lot of odds or challenge trying to learn new things even learning about complex Algorithmes, or The State Management in Flutter may not stop you from going all the way.

You may get into learning a framework/library as a beginner without any prior knowledge in the language used to built that library you might even land a job but I promise you will struggle with easiest things while trying to build something.

I’m not here to scare you I’ve mentioned some words that may seem weird to you I’ll provide you with the resource in the end of the article so you could get a small idea about what you’ve seen.

To escape that trap that new front-end developer could fail into accidentally , I’m going to give you some advice before starting your journey with fron-tend frameworks, and furthermore, I’ll give some tips that should help you as a beginner or even if you are someone that want to fill that gap in the frontend:

Drink, eat and breath Javascript Html & CSS

As a front-end developer before trying to learn any front-end famework, first of all, you should have at least a strong background in:

1.Html(HyperText Markup Language):

So you could create a structure for your Html page ,learn as you can about semantic html ,even veteran web developers still learn different stuff everyday in html check W3C (World Wide Web Consortium) Html5 to see what I’m talking about.

2.CSS (Cascading Style Sheets):

To style your page it switches to an extremely hard , and complex tool when it comes to creating a useful animation and doing some huge CSS tricks so please try to learn advanced CSS there’s hundreds of tutorial out there waiting for you, try to master CSS Grid , Flex box and Transition ,I mean it you don’t know the power behind these tool you may not believe but I’ve heard in a podcast that you can even create a Search engine with CSS ,and other things i’ve seen like: Illustration,3D Animation, and more awesome stuff.

3.Javascript

Finally Javascript, a programming language to add a sense of life to your web site or single web application it’s basic may seem easy to learn in the beginning, but once you get in into the core of language it’ll give that feeling of ”it’s impossible to learn this” , so don’t quite and try to learn how to apply deep selectors and method to traverse the DOM, try to learn module, Asynchronous Javascipt and sharpen your brain with advanced knowledge about classes and function in OOP it’s your only way to become a great React developer .

Tips might help you in Your frontend road:

Git and Git :

tracking the changes in your project is useful ,plus sharing your code with the world out there, is literally important for any programmer(even non-programmers are using it these days ).

Typescript:

Brought by microsoft,adding a sense of type to your javascript code and the power of classes and interface in typescript will help you .

Data Structures ,Algorithm , design pattern,problem solving :

Understanding Data structures, design pattern and developing the ability to solve problems will make you stand with great developers.

UI/UX design

I know it’s the designer job but getting and acquiring knowledge about UI/UX design will improve your client-side development and will give you a better communication with the designer.

+Babeljs

When it comes to transforming your javascript code so it could be compatible with old browsers, Babeljs is literally your guide to do that

Command line + Package Managers :

Learning about the command line in your operation system is really helpful especially when you are about to install a software or maybe interacting deeply with your system ,without missing Package Managers like Yarn and Npm.

Brower Developer tools

This one will help you editing your web page end enhancing it , plus these tools will be your friend in the road of debugging, all most developer (including me) spent their journey debugging not even coding.

Resource:

• The State Management.
• W3C.
• Search engine with CSS .
• Babeljs.
• Brower DevTools.

Finally

As you have seen drinking ,eating and breathing are the essentials things for a human being to survive(no more philosophy please) so you have to eat, drink, and breath these three technologies to survive as a front-end developer, however the browser relies on these technologies so he could talk and interact with you .ignoring them will just make your career measerable.

Also published here.

Thank you for reading.