As a business grows, there is a high chance that it will expand to multiple different countries. The developers must ensure the application is available in different languages to accommodate that. Fortunately, we don’t have to create a separate version of our application in each language. Instead, we can use tools that let us dynamically […]
Web applications are becoming increasingly complex. While that’s the case, we must ensure the interface is intuitive and easy to use. By allowing our users to drag and drop elements across the screen, we can simplify many tasks, such as reordering lists or grouping items. In this article, we learn how to implement the drag-and-drop […]
As our application grows, the amount of data we receive through our REST API grows as well. We often need to split the data into parts and load them separately to avoid performance issues. A common pattern is implementing infinite scrolling that loads more content when the user scrolls down. In this article, we implement […]
Unit testing is handy for testing how our React components behave when the user interacts with them. However, this might not be enough. Besides testing the logic behind a particular component, we should also test if our user interface changes unexpectedly. We can use snapshot testing to detect unintended modifications to how our components render. Introduction to […]
For a long time, the Create React App environment was the most popular way of starting new React projects. It does not seem to be maintained anymore, and the new React documentation does not even mention it. Fortunately, there are alternatives. The documentation mentions solutions such as Next.js. While it is a good solution, it […]
When a browser opens a regular React application, it receives HTML with an empty div and a JavaScript file.
|
1 2 3 4 5 6 7 8 9 |
<html> <head> <script defer src="/static/js/bundle.js"></script> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html> |
When the browser receives the above response, it runs the JavaScript file that modifies the DOM tree and creates a web page. This is a good solution for many applications but has a few drawbacks. […]
Every automated test that we write should be deterministic. One of the things we need to do to achieve that is to make our frontend tests independent of the backend. Besides mocking REST API requests, we also need to learn how to mock a WebSocket connection. In this article, we create a simple backend application and […]
When working on web applications, we often display lists of data. If the data is not particularly lengthy, we are probably okay with rendering all elements at once. However, as our data grows, we might notice performance issues. In this article, we create a simple React application that aims to render thousands of images using […]
React Hook Form is a popular library that helps us deal with forms and keep their code consistent across the whole application. In this article, we look into how to allow the user to shape the form to some extent and create data structures that are recursive. In the end, we get the following form: […]
Formik is a popular tool that helps us write React forms and keep their code consistent across even big projects. Besides having a fixed number of properties, we sometimes need to allow the user to shape the form to some extent and create recursive data structures. In this article, we learn how to do that […]
