React is a library for creating user interfaces. It was created in the company Facebook, which gave it to the general public for use. It was quickly accepted by the community and an entire ecosystem began to form around it. The aim of this text is to single out important parts of this ecosystem and to serve as a springboard for further learning for beginners.
By “React ecosystem” I mean the libraries and tools used in combination with React that I use in my daily work. This does not mean that there are no other alternatives nor that the mode of operation I use is the only correct one.
The story about modern JS applications is roughly like this:
The structure of the application is modular and the modules are usually written in separate files. In order for the modules to communicate with each other, they are imported into other modules and thus a dependency tree is created.
Libraries, or packages, solve one specific problem, or group of problems. Many of the problems we encounter in programming have already been solved. All you have to do is include the appropriate library in your code.
The language specification is evolving faster than browser manufacturers can implement support. In order to use the latest features of JS, it is necessary to translate them in a browser-friendly code before execution. This process is called transpiling.
Since JS applications usually have many different files that are interdependent (JS modules and other resources such as styles and images), they need to be linked and packed into one (or several) files. This process is called bundling. Bundling usually includes various code optimizations, such as minification.
JavaScript is a specific language that people with a different experience often find bad or corrupt in design. My opinion is that it is the unfortunate choice of a name that creates wrong expectations for people in the beginning. JavaScript works the way it is intended, and this is often different from some other languages. In order to use React or any JS framework effectively, you need to know at least the basics of JavaScript.
The best time to start learning JavaScript was yesterday, the second-best time is now. — Paolo Coelho
React is not a framework! Creating larger applications requires a number of other libraries that are used in conjunction with React. Many unknown terms and a large number of different tools can be a problem for beginners in this story. In the following, I will try to define some units in the React ecosystem and single out the tools used in them.
Dependency management
As I mentioned before, React applications are modular. In order to use JS modules, it is necessary to have Node installed. Install Node.
All packages on which the application depends are written in the package.json file. This file contains information about the application, such as name, version, link to the repository, licenses, but also scripts that facilitate the development of the application.
Packages are installed using the npm tool provided with Node, or using the yarn tool, which is the same as npm only slightly differently. This tool makes it easy to install new versions of libraries in use.
User interface
React is in charge of the part of the application that the user sees and with which he can interact, ie the user interface (UI). He is also in charge of propagating each interaction into the inner layers of the application.
The user interface is based on components that encapsulate a single functionality. Components have their own state and a clear interface through which they communicate with other components and other parts of the application.
React uses VirtualDOM which gives it a good performance, and JSX syntax is used to write code, which speeds up application development.
State management
Redux is a predictable container for the state of JS applications. It is a very small library that requires a certain way of writing code that is related to the state of the application.
The state is actually a JS object, which is read-only. Redux imposes a way to modify this object so that all information goes in one direction and does not cause mutations. The change of state is initiated by an action, and the reducer executes the change itself.
Routing
The React router synchronizes the UI with the URL. It allows you to use links in Single Page applications and manage the application in this way.
Testing
Yes is used to write unit tests. It is a tool that has a minimal configuration and immediately after installation it is ready to do what it needs to do. The enzyme is used in combination with Jesta to test the React component.
Thank you for reading.
Top comments (0)