React 101

In the beginning, there was only darkness and chaos. . .

 

Then someone created HTML (Hypertext Markup Language) to make acceptable, rudimentary web pages. Next, someone said: "It is not good that the colors and font size should be all scrambled in the same archive; I will make a helper." And CSS was created as a different archive to take care of sizes, colors, and positions.

 

After a while, someone wanted to make web pages alive! And he created Javascript to make the pages respond to the user's actions. Everything was working according to the plan; three files in three different folders (public for HTML, assets for CSS, and scripts for Js). But someone else noticed that as the site was getting more substantial; he needed to write more code.

 

That's how React came to the rescue. React works with reusable components, so there's no need to rewrite lines of code repeating the same - or almost the same - chunks of code. For React, the structure goes hand in hand with logic.

 

Let's welcome the sacred JSX!

 

React introduced JSX. JSX is a JavaScript extension that allows the creation of HTML inside the JavaScript code. You use JSX to create HTML elements as JavaScript code that will be placed inside the DOM.

 

I know, I know. You might be wondering what DOM is. DOM is short for Document Object Model. Yes, it doesn't say much. The DOM represents the web application's entire UI (User Interface) as a tree data structure. In other words, it's the representation of the site’s layout.

 

For every little change, the DOM re-renders, causing extreme memory usage, thus making the site take longer to load. To fix this issue, React works with a virtual DOM to give the user a faster performance. How? The virtual DOM reloads only the nodes affected by changes we make, ordering the actual DOM to change them, too. This makes the rendering much faster.

 

To make myself clear, each UI is an individual component in React. Each of them has its own state. React observes those states, and if it detects any change, it will update the virtual DOM tree without touching the real DOM. Once React updates the DOM, it will compare the current version of the virtual DOM with the previous one. React will only change those changed objects in the real DOM, so there is only a minimum manipulation of operations.

 

States? What are you talking about?

 

Sorry! I forgot to mention this: states work as switches like on/off light buttons. States work as communication channels between what the user does and what the computer receives. Let me show you a quick example. You are browsing a site and decide to buy something. You click on a product, and that product appears in your cart. It is not magic; that component receives a click and informs it of the global state. Through that communication, the component learns there was a change and adds a new product to the shopping cart. That is how they communicate with each other.

 

Last but not least, ReactJs is not only used for front-end but also for:

 

• Native apps for Android and iOS
• Back-end
• Virtual Reality
• Desktop apps

 

With its versatility and ease of use, React is the most loved library for devs and businesses.

 

At Awkbit, we love to work with top-notch open-source technologies, and React belongs to that group. Get in touch with us and discover how we can help you to bring your ideas to life.

 

 

+1 (786) 321-3247 Mara Destefanis - Marketing

Take a nap, your new tech partner is on the way.