A short intro to React.js

Welcome

Welcome, dear friends, dear readers, and guests.

As you all know, the software world is a general name for what coders do, and it has many subdivisions. The most important of them to count here are:

• Backend (What is happening on the server-side)
• Frontend (What is happening on the client-side)
• Mobile (Dealing with mobile devices and mobile apps)

Among them, Frontend and Mobile products are used and seen visually by a client/user. A user/client does not see what is happening on the server part and it does not interest him. The part the user sees mainly appears on the browser. And this part is called the “Frontend” part of the programming world and it has a strong competition between the tools that are being used for it.

Anything we see on the browser, all the web pages, all the forms that we fill in, all the “like” and “star” buttons that we press are developed by one of the “Frontend” tools.

Now, let’s take a closer look at one of the widely used tools, called “React.js”.

What is React.js ?

“React.js”, is a library developed by a team at “Facebook”, used for “Frontend” development. Its first release was in May 2013. The library’s resource page is located at https://reactjs.org/. According to the 6-word sentence placed at the center of its web page, it states:

A JavaScript library for building user interfaces

For general statistics of its usage and popularity, you can take a look at its Github page, which is located at https://github.com/facebook/react.

The main advantage of React.js is that it allows a developer to decompose a large UI project into smaller reusable parts. These parts can later be used within another React.js based project or a web page. These reusable parts are called “Components“. You can separate each button, each text line, an icon, a logo, or a menu as another Component.

Another noticeable advantage of this library is that it allows composing both class-based and function-based (functional) components. As you may have already heard, functional programming is a trend nowadays. And this advantage of “React.js” also attracts those who are fans of functional programming.

Friends and opponents

In the world of Frontend, there are many other notable libraries and frameworks that go racing with “React.js”. Below is the list of the most used ones:

• Angular
• Vue.js
• Backbone.js
• Ember.js
• jQuery
• Svelte.js
• Meteor.js
• Polymer.js
• Ext.js
• and etc.

The most important thing we must underline is not the quantity of the Frontend tools, but their variety, diversity. For instance, there might be hundreds of auto producers. But they have priorities, advantages, and disadvantages for different countries, cultures, and different weather conditions. Some produce good cars for countries with hot weather, some produce vehicles durable in freezing cold. Some vehicles go smoothly only on plain surfaces and are very stylish, and some are all-terrain vehicles but not so stylish.

All the same, libraries have pros and cons depending on the project requirements. Some are fully compatible with “Google Chrome” or “Chrome Project” browsers, some run smoothly on “Internet Explorer”. Some are very fast to visualize but has fewer beautiful elements, others might be slower but have very attractive ready to use UI elements.

In general, the most important Frontend tools that lead the race these days are “React.js”, “Angular” and “Vue.js”.

Behind the curtains

To make developers' life easier, React.js provides us with a syntax extension called JSX. We call it “JSX — Javascript XML” otherwise. With the help of JSX, we can embed HTML code into React code.

As you can see from the picture above, you can embed HTML tags directly into the React code. All the written code then is converted to a simple HTML, CSS, and Javascript combination, with the help of a transpiler, called “Babel”.

Sum it up

If you are planning to conquer the world of Frontend, I recommend starting with one of those three leaders. Personally, I am a fan of “React.js”. But, according to ratings, job postings, and the number of developers using them, “Angular” and “Vue.js” are also on top of the hills.

One thing to note, before diving into any of them, is the learning process. The complexity of learning each of them is different. According to the analysis I have conducted, arguments noted in blogs, and some statistics, “React.js” has an easy and fast learning path.

Besides that, after learning React.js, you can easily shift to React Native. React Native also has a large user community and provides you with tools to develop cross-platform (both Android and iOS) mobile apps.

Good luck to you starting your journey in the Frontend world. Stay home, stay healthy, stay hungry for learning!