Skip to main content

What is React? And why you should learn it!

As a developer that loves learning new technologies and never stay behind, I decided to leave Angular(with the exit of Angular 2) and move to a different world. Faster, stronger, better and more advanced – the React world, and I have never looked back.

Before we even start talking about React, I want to share my 2 cents. As a developer, I have never enjoyed writing code as much as I enjoy doing it with React.

What is React?

In the most simplest of words, React is a small Javascript library for creating intuitive web-application, fast and with as minimum code as possible.

Many are comparing Angular to React, which is incorrect. React is a small view library, as on the other hand, Angular is a full-blown MV* framework.

The founder of React, Jordan Walke, Facebook software engineer, wanted to create a better solution for everyday problems of a front end developer. He wanted to do a much better, smarter, faster way of creating web-application, and yes – he succeeded.

Today, React is being developed by Facebook themselves, although it is a somewhat new technology, React already has million of front end developers supporting and using it in their own projects. The most common ones,  still would be Facebook Feed and Instagram.

Why React is better?

Before you even continue reading, I must recommend the Modern React Redux course by Stephan at Udemy, if you are really serious about learning React. that is the course for you!

Hard to say that React is better than Angular(or Vue). It is a pretty different technology to compare. But, is it still better for web-application creation? I believe so.

React`s unidirectional data flow. As many knows, even if they did not work with Angular, the most talking topic regarding Angular was two-way binding, React’s doesn’t have it. Instead, React using a simple flow top-to-bottom, from father component to child and so on.

Maybe is seems to you as a disadvantage, but bare with me, I can find at least 2 advantages:

  1. It saves time – You will never update a value of state(property), without specifically deciding to update it. Forget about suprised happening.
  2. A full hold of your code – You will understand your code much better, you will know what is supposed to update, when, and why. You will have much better grasp of the written code.

And don’t worry, it is very easy to update a value of state, if you decided it is needed.

Of course you can’t talk about React without mention their ground breaking Virtual Dom techonology. If you know what is React, you probobly already heard about the Virtual Dom.

React, as opposed to Angular, is not updating the DOM directly. jQuery and Angular, are first loading the full HTML(DOM) and then manipulating it. React’s power and speed comes from the Virtual Dom – An amazing explanation you can find here: team treehouse – react basic

What is React’s Virtual Dom?

The Virtual Dom in React, amazing invention.

The first thing you must to know about the virtual dom, is that every piece of code is written in Javascript. Yes, there is no more HTML/Javascript separation. there is only Javascript. Whaaaaaat?

Maybe in first, it sounds a little bit quirky, but as we grew as developers, we wanted to build much more complicated web application, and manipulating the DOM, was not longer a good option. More manipulations came with slow unresponsive code.

How we worked in jQuery? We received input from the user, did some magic and manipulated(updated) the DOM accordingly to what we wanted. It took much more time to write, and in a big application, it affected the user tremendously.

With React’s Virtual Dom there is no more doing so. All of the code is in Javascript, and if we do want to show any output to the user, the Virtual Dom is updating accordingly. Virtual Dom works in this way, that it is comparing the previous DOM state to the current DOM state, in memory, and ONLY updates the area we want to change, blazing fast.

P.S. Virtual Dom it is not only the speed, as huge feature as it is. Because the Virtual Dom is not connected to the web browser window, it gave Facebook the option to create React Native. What is React Native? the greatest thing that happened to web developers all other the world. React Native, gave us the option to develop native application for the Android and iOS platforms, and yes, native. How freaking awesome is that?

Because React Native ease of use and speed, many Java and Swift developers are implementing React Native in their day to day work, and some, fully moving to React Native.

What is JSX?

React’s JSX is an amazing techonoloy and it is allowing us to write fast HTML code inside of our Javascript files.

Everytime we want to create an HTML element we could use the function React.createElement(element, props, children), like so:

Here we creating an Unordered list element with 5 list items inside, looks a little bit complicated, no?

Let’s rewrite this code with JSX:

How much simpler is that? this is JSX – HTML inside your Javascript code.

One thing to mention, our browsers don’t know how to read JSX, so we must translate our JSX to normal Javascript, which the browser do understand. We can do it with compilers like Babel – write JSX and it will compile immediately to Javascript.

Of course that will be no way to code, if everytime when we wanted to update our application, we would need to go and compile our code by hand. Fortunately, it is not the case.

Today we have automatic task runners, that can compile our code as we go, there is Grunt, Gulp, Webpack and more. I will not go too deep into task runners, but just know that most of the React’s projects you will start with, will have some kind of task runner and a code compiler.

Components in React

Although the HTML code is written inside Javascript, React still follows the separation of concerns concept, which means that every component cares only about 1 concern. Very OOP way of thinking.

Every React application is build of one or more(probably more) components. Components are basically pieces of code, be it class or function.

Let’s say we want to create a unordinary list, so it will be a good practice to make 3 components: 1 is the UL, the second one the the iterator function of the LIST and the third one is the LI itself. Every child component is called from a father component, father from grandfather and so on, until we arrive at the main component that started it all – the most commonly called, App components.

Why is the separation good?

  1. If you have a problem with one the components, it is very easy to find the one that is causing the error, and fix it. You don’t need to go through thousands lines of code, you just open the specific component, be it 10 lines or 100 lines of code, and fix the error that is crashing your entire application.
  2. Components are reusable. You can use the same components of list in thousands more other applications, and not only the one you build – there is a huge community of React’s developers that share components they created.

In Summary

That was a very small intro to the React’s world, I hope you enjoy reading that.

There is much more to go through and much more understand before being a React developer, but it is a start.

The technologies in our field, are moving so fast, that it is litterly impossible to learn them all. What is 3 years old, called already “Not new”, But I think and hope, that React is here to stay for a long time. Facebook love innovating, and I believe they will continue doing so with React. Especially with the upcoming release of React Fiber.

 

Links:
React documentation.
The best React basic tutorial by Stephan

This post is also available in: עברית