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
Library with resources for building user interfaces
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.
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?