Blog: strona główna

React

#

Frontend programming

Krzysztof Stręk

Backend developer

04

.

08

.

2023

6 min read

When we think about frontend technologies, there are three major that are used by JavaScript developers. The big three are: React, Angular and Vue. In our work in Aplicativ we use React, and React Native, and the second one for Android applications. Why do people choose React? What are the advantages of using it? I will try to explain it in this post.

Advantages

React applications are in SPA (Single Page Applications) convention, what it means is that the app it’s requested onced in first request to server, and then only when it needs to get some data for content of the site. That behavior helps to load webpages faster.

As React Native is present, it is possible to create mobile apps very quickly, based on standard React code.

There is no need for session usage at the backend, it is implemented as React application.

fast and dynamic, depended on user actions
As a programmer you can use the TypeScript approach, then the components are implemented as a class or you can code components as functions in JavaScript.

It has community support, large documentation, lots of videos on Youtube and what’s most valuable is that it has its own visual components, ready to use - Material UI.
in many frameworks, not only frontend ones main architecture is MVC, which means Model-View-Controller. In React where the main layers are view layer (HTML) and code layer (JavaScript) you can mix them in the convenient way you want to. It’a called JSX and is an important thing - easy way to generate JavaScript over your code. You can also divide code as you want, for example totally separate JavaScript from HTML which is also possible.

Code organization and HOOKs

As I mentioned, there are two ways of writing code (Components) in React.

Component can be an object or a function. As an object it is TypeScript definition - simple class in OOP way. The alternative solution (functions) it’s much more simpler, it is just a function.

Hooks are core built-in functionality of React. What they do is for instance

organizing data in one place (state), every data change is handled on view layer
if there is a lot of data in our project the Reducer hook helps to manage it
the often pattern, that comes with web app is life-cycle of components. There are some watchers, that do the job.
manage business logic as functions based on state

React Native

What made react framework popular is that it has large community support for external libraries and documentation either. But there is one thing that decides framework to be chosen - it’s React Native. It is a framework that helps produce an Android and iOS app based on simple React and JavaScript code. This approach can be described as “Learn once, run anywhere” and it’s main motto of this technology.

Where to learn

Since over 10 years of React development, lots of Youtube and Udemy videos were made. React books and courses are present and are available everywhere. React is more popular year by year. There is large official documentation in many languages also. If You are searching for quick introduction to React programming I recommend this book in polish:

https://helion.pl/ksiazki/react-wstep-do-programowania-pawel-kaminski,reawpr.htm#format/d

Also check

Dlaczego UX jest potrzebny?

Wyobraź sobie, że wchodzisz do sklepu, w którym wszystkie produkty są bez etykiet, alejki nie są oznaczone, a półki i regały znajdują się w całkowicie przypadkowych miejscach. Jak myślisz, uda Ci się zrobić zakupy zanim stwierdzisz, że jest to bez sensu i pójdziesz do innego sklepu? W świecie cyfrowym jest podobnie. Gdy użytkownik wchodzi na stronę internetową lub korzysta z aplikacji, które są chaotyczne, trudne w nawigacji i nieprzyjazne dla użytkownika, może szybko poczuć się zagubiony i zniechęcony. Podobnie jak w sklepie bez oznaczeń i porządku, użytkownik może szybko stracić cierpliwość i zrezygnować z interakcji z danym produktem czy usługą. Dlatego tak ważne jest, aby zadbać o dobry user experience

Aleksandra Kubińska

UX/UI Designer

Web Wide Web

The Internet as we know has changed since it has started. It has totally changed. Who of us don’t remember two dominating web browsers in the 90’s such as Internet Explorer and Netscape Navigator. Web pages were mainly static and only readable. Pages were evaluated so they started to store lots of data from internauts and started to process them. This process was very important because it helped to get information as a user exactly wanted. Also it helped to build huge data for AI, so it allowed us to create high AI tools such as GPTChat which is a part of Web 3.0 in some way. In this article I will try to explain some differences between all Web concepts and how they evaluated through the last 30 years.

Krzysztof Stręk

Backend developer