This article outlines a set of best practices that will help with the development of large react applications.
This article follows from Part 1, which can be found here:
https://onoufriosm.medium.com/react-best-practices-react-at-scale-part-1-74234290ef19
7. Folder structure
Coming up with a good folder structure is a difficult task. Mainly because it involves choosing the right naming conventions. There are multiple ways to structure folders for a react app. Some will work for your project and some not. This will be up to you to decide.
Having said that, there are some tips that we can follow to make our folder structure more robust:
- Naming should be consistent…
This article outlines a set of best practices that will help with the development of large react applications.
Background
For the past 3.5 years I have been working on a React project, which has now grown into a very large project with thousands of components and a lot more lines of codes. Over the years it went through several rounds of refactoring with lots of new architectural decisions and updated to the latest trends (e.g. react hooks).
This article uses the knowledge of the past years to outline some of the best practices in React.
We establish best practices to improve…
This guide explains what unit testing is, why it’s needed and the best practices for small to large React applications.
What is unit testing
Unit testing is a level of software testing where individual units/components of a software are tested. In the React world this means testing an individual React Component or pure functions.
Why should I test
Testing is essential to guarantee a stable application. Unit testing in particular is possibly the most important part of testing. The general consensus is that 70% of all our tests should be unit tests and for very good reasons.
- They are very fast to run allowing us to very quickly…
A guide on how to setup Redux in a generic way to reduce boilerplate and facilitate up to 90% of your API calls
Motivation
I gave a talk at the React London Meetup on state management with Redux and I wanted to write an article explaining in more depth the architecture of the solution I proposed.
You can also find a Github repo with a full Redux setup, ready to be used in a real world React application at the end of this article, as well as a video of my talk.
The problem
Redux is an amazing library. It’s very simple and powerful at the same time. It is also very flexible. This is great because it gives us freedom to set it up the…
Motivation
An easy way to show a modal when clicking on a button (or any other element). In a small project we can get away by repeating logic inside a class component but in a larger scale we need a reusable component that will make it a breeze to use modals.
The higher order component
We will use a higher order component (HOC) which will handle all the logic for toggling the modal:
There are a few things going on in the HOC above:
- We keep the state of the modal in the state using the
openfield. - The HOC will receive a
modalComponent…
One of the most powerful patterns in React is Higher Order Components (HOC). The purpose of a HOC is to enhance a component (usually a dumb component) with extra functionality. A HOC allows for reusability since in real-life applications there is a need to re-use the same functionalities in various similar kinds of components.
A very common functionality is toggling. This can be used in different scenarios such as collapsing/expanding a list, showing/hiding a component, highlight/unhighlight a message to get the attention of the user etc. …
Onoufrios Malikkides
Software developer, writer, speaker, photographer.
