What Is React?

First of all, since React is a JavaScript library, we need to have some basic knowledge of what JavaScript (and a library) is. If HTML structures your website and CSS styles it, then JavaScript makes it dynamic and is probably what makes things move, refresh or change on the site you’re visiting.

To avoid writing time consuming repetitive functions in JavaScript you can use different libraries, i.e. pre-written JavaScript code. React is one of many libraries and it’s completely frontend and specializes in things that the user interacts with when they’re using a website. This could be buttons, search bars and menus.

“And it’s called React because it reacts. It was developed by Facebook (a site that CONSTANTLY updates their data) to improve the user interface development and more effectively change (REACT to) what the user sees when they’re doing things like mouse clicking, submitting and typing.”

Why you should use React

So what makes React so popular?

• Well, React is declarative which means that you tell it WHAT you want (written in React language) and then it solves the HOW and builds the user interfaces in the web browser.
• In order to simplify and not focus on the whole website at the same time, you break it down into smaller components that you can reuse wherever you want to.
• Instead of having a complete website re-render every time something changes, React can update only the things that are different than they were before an event happened. This means that if you, for example, change your profile picture, the image is the only thing that is re-rendered – nothing else on the site is updated and replaced with data that is basically the same as it was before. Because that would be kind of unnecessary, right?

How does React work?

React Components

When you’re using React you start by dividing your site into smaller components. For a news site, this could be a header, a search bar and an article with title, image and text. You build your different components separately and then assemble them in a main file.

JSX

As previously mentioned, HTML is what structures your website (the skeleton), and it’s written in its own file. With React, you can use something called JSX which allows you to bring HTML into your JavaScript files and build components that consist of both.

JSX accepts something called “props” (properties) which make it possible to insert custom data into the components. In our newspaper example, this means we can use the article component as a kind of template but then add unique props like title, image and text to create different articles for our news.

Virtual DOM

There is something called the DOM, which is the programming interface for HTML documents. It represents the data on a web page and makes it possible to change what we see on it. When you’re using JSX, React creates something called a Virtual DOM which is a copy of the actual DOM. It compares the data on both places and only replaces the thing in the DOM that is different, like a comment being added, a button being pressed etc. It may not sound like a big deal, but when you have a lot of things constantly changing on a site, this selective updating results in way better loading time and computing power.

Try it for yourself

React has its own website with step-by-step guides, tutorials and everything you need to get started! If you want to you can also play around with React on sites like CodePen and CodeSandbox.

Learn React in live classes

If you want to add React to your developer toolbox, enrol for our React Course. It's remote and fully compatible with full-time schedules. You will learn together with your classmates and you will be guided by experienced teachers deeply connected to the industry and you will build your own React project in 6 weeks. Watch an intro lecture from our course: