What is React anyway?

React is a view library for developing interactive apps and so-called single-page apps. If you have just started to learn programming and are now wondering what is actually behind it – we will explain it to you.

The best thing about modern web development is that there are so many resources in this area. The worst thing about modern web development is that there are so many resources, according to this author in his article on Medium. This may sound familiar to you.

Those who have just started dealing with development topics are often overwhelmed with the mere decision of what they should learn next – or first. Angular, Vue, Firebase, Bootstrap, Node.js, Docker, Python, Rust, Redux, Git, Babel, Webpack, Kotlin … the list goes on and on. To understand what’s behind the React hype, it probably makes sense to understand a few basics.

This is how a web application is structured

A web application consists of a front-end and a back-end or client-side and server-side. The backend consists of a server, application and database. The server communicates with the database and hosts your application. The backend sends data to the frontend. JavaScript converts this data into HTML. A web application basically consists of both front-end and back-end. In the browser, the front end manifests itself in the form of a user interface, i.e. what you see and what you interact with.

Library with resources for building user interfaces

React is a JavaScript framework or library for developing user interfaces. The term library is actually quite apt: In a library there is a selection of books that have been curated by librarians and sorted for you. If you need a book from the library, you can easily find it through the library system and borrow it. There are no books in a JavaScript library, but ready-made code that you can access.

Other frameworks with the same purpose are for example Vue or Angular. In other words: React is a library for frontend development. Building a front end is of course also possible without a framework with “pure” JavaScript, which is also called Vanilla JavaScript. React was developed by Facebook: The Facebook app and the web version are both based on the library. React is particularly suitable for single-page applications and for interactive apps.

There are different views or views in a web app. If you click anywhere on a UI, the view changes. Many Internet users may associate changing the view with changing pages. That’s not wrong: previous web applications typically consisted of several different pages. If a new view was to be displayed, a new page had to be loaded.

A more modern approach are single-page applications or SPA. A single-page application consists of different views – with only one single page. This single page contains all available views – the active one can be toggled dynamically. In a multipage app, all the views your application offers would be on a separate page. For example, if a user clicks on a sign-in link in the navigation bar, a new page containing the sign-in view would have to be loaded. With a single-page app, clicking on Sign-in simply changes the active view depending on the state; it is not necessary to load a separate page. But what actually is a state?

React’s strength lies in the fact that it manages the state in an application. The state can perhaps best be described as the current status of the application. For example, if you open a website in your browser, the page starts with an initial state. Perhaps you will then click on the website and open a menu. As soon as the menu is opened, the website is in a new state. Maybe you will then click on a Like button. This puts the application into another state again – the number of likes is updated.

You can often do a number of other things on a website. Each of them means its own state. To orchestrate the behavior of the individual components, for example in a double of the React app built with Vanilla JavaScript, so that all possible actions are correctly mapped in their respective state is complicated – you remember: For each possible view it would need a separate page on which – figuratively speaking – each component is told individually how it should behave.

One of the main features of React is that programs written in React are component-based. Components are the blocks that make up a view. For example, a button or a drop-down menu. With React you can practically program predefined code bits within the application, which you then combine to form a view. You can integrate such a component into any other view within the application.

Declarative program logic

React is declarative – the program logic aims at what something should look like. React stores a central truth that is passed on to all components. Components in React are structured in such a way that they reflect the state. If you click the Like button in a single-page app built with React, the counter knows which number to display – and as long as every component is rendered based on the same state, React also knows what the rest of the page should look like . In contrast, imperative logics aim to tell the application what to do. To illustrate this in natural language: Declarative logics are like saying to your roommate: “We need toilet paper”. In contrast, you tell him the steps that have to be carried out in an imperative syntax: “Go out the door, take money with you, go to the supermarket and buy toilet paper.”

Both work, but the latter is longer, more complicated and therefore more error-prone. Declarative code is usually easier to debug because it is easier to see what the code wants, while with many lines of imperative code it often takes you longer to understand what it is supposed to achieve.

And is it worth it now?

Of course, this question can never be answered across the board. If you want to go in the direction of web development and are not already convinced of the points mentioned above: yes, definitely. The framework has been gaining popularity for years. With new releases, new features are regularly added to make life easier for users. Recently, for example, a new, not yet published concept called React Server Components was presented, which should make it possible to move components from the client to the server side in the future. The documentation is really good, very detailed and includes a lot of tutorials that you can let off steam. There are tons of great features, extensions and tools, and a lively community around the framework. Another big plus point for the library: if you have mastered React, you can also master React Native – React for developing native apps. Fun fact: the developers at t3n also use the library.

Suitable for this: React hooks – is it worth switching to the programming concept?

You might be interested in that too

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png