What is React js

React is a JavaScript library for building user interfaces. It's maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

History

Some History won't hurt!

before we talk about react we must talk a little about javascript and browsers.

Backing to the 90s until 2000 we just have basic HTML CSS & JS but back then it simply started with simple forms. First, the CLIENT (when he open an URL) requests THE SERVER, the server answers by sending all files (*.HTML,*.CSS,*.JS) and when the user makes an action (clicks a link...), the CLIENT send that request back to the server, and the SERVER must send back all the files again, and so on!. & websites worked like that for years.

Let's see where/when the story started

• 1993

  Mosaic 💥, the first web browser to start bringing the Internet to the mainstream but no JS ❌ yet, only the DOM (Document Object Model) but non-standardized yet.

• 1994

  Netscape 🚀🚀🚀, was the dominant web browser in terms of usage share after 1994, but by 2002 its use had almost disappeared.

• May 1995

  Java appeared, and Netscape wanted to add interactions to the webpages.

• Mid 1995

  MOCHA was created by Brendan Eich during his time at Netscape Communications. It was inspired by Java, Scheme, and Self. Mocha syntactically was just like Java {curly bracket language}, but already contains many features that we know and love in modern JS.

• Sep 1995

  mocha's renamed to LiveScript and shipped in the first beta releases of Netscape Navigator 2.0

• Dec 1995

  JavaScript name appeared, no longer LiveScript. This name was because back then, Java was the most popular programming language.

• 1996

  After Microsoft released Internet Explorer, MS reverse-engineer JavaScript and named it Jscript. So, now we have almost two identical languages: JavaScript and Jscript, and with the Internet growing rapidly, people realized that there would be a need to standardize JavaScript.

• 1997

  EcmaScript is born. ECMAScript (or ES) is a general-purpose programming language, standardized by Ecma International. It is a JavaScript standard meant to ensure the interoperability of Web pages across different Web browsers.

Before REACT

So as time goes many browsers appeared, and JavaScript gains more interest, but the problem was that each one of these browsers works differently from each other, so as we wanted to use more and more javascript in our web pages, we had to account for all these browsers, and accommodate javascript to work with them.

• 2006: jQuery came out and changed a lot. It allowed developers to easily interact with the DOM (Document Object Model) across all these browsers. jQuery made life so easier for developers. It made them happy because it had a unified easy API.

So with the power that jQuery gave to developers, they began to build bigger and bigger apps like Facebook where you had so many features. Instead of just requesting more and more pages like a blog, users can now interact with these apps.

• 2010: BackboneJs came out. Because JavaScript files started getting bigger and bigger, so libraries like backboneJs allowed us to orginize these JS files.

The birth of SPA

As we explained above, traditionally we just had HTML files for each page, and every time we move to a different page we request from the server the HTML file, CSS, and JS (which usually contains jQuery) yet with more advancement, as we had with jQuery, Backbone, and Ajax too, we now had a different system. Basically what happens is that we focus less on HTML and a lot more on JS. So the principle behind SPAs is: you only load the application code once, and instead of leading all files every time returning a new document, our app now acts more like a desktop app where we stay on the same page the entire time, and JavaScripts directly changes or updates the DOM to display new things. This way of writing apps became popular.

• Oct 2010 : AngularJs was created by Google and became the standard way of building applications or SPAs. But unlike jQuery, Angular allowed developers to build these large apps by forming these containers that will wrap your project. Because AngularJs was created by Google, it had a lot of power.

Now we have things like Controllers, Views, Models (MVC). The way of organizing code and dividing it into different things -depending on what it does- made it much easier to work with as teams get larger and larger. But another problem appeared! things started getting more and more complex because of this. As things get bigger and bigger, more things have to happen. We have more and more complex now, and although frameworks like AngularJS came out. People started to notice that it's getting harder and harder to find bugs in the code and understand how each part of the app was affecting the other (Data was flowing everywhere).

The birth of React

2013, Facebook released React and presented a great solution, and everyone started to use it because React comes with a whole new way to build front-end applications. One year after, Google said that the way they architected AngularJs is not efficient to be used for building good applications anymore. Google decided to rewrite the whole library and called it Angular, but because of the amount of time the rewrite will take, many people moved to React.

React Concepts

1. React handles the DOM for you!
2. Build websites like lego blocks (Reusable components)
3. Unidirectional data flow
4. Handles only the UI.

The good principles introduced by React made it the most popular front-end tool with the most job demand across the world.

More than 8000 companies are using React in their tech stacks including:

• Facebook
• Uber
• Airbnb
• Netflix
• Discord
• Snapchat
• Coursera
• Shopify
• Reddit
• Twitter
• Paypal
• Figma
• Slack
• ...