Recently, I moved from Angular to React, I didn’t know where to start. So, I decided to build React Boilerplate and during development, I learned some things which help in faster and better development.
TypeScript
With Typescript (a superset of JavaScript), you can easily write pure object-oriented code with concepts like classes, modules, interfaces, generics, and static typing. The code becomes more readable and clean, Its saves developer time. We can easily use TypeScript to React.
Unit Testing
Unit testing simply verifies the working of individual units of code as expected. It is an essential component during errorless code shipping. Although in the initial stage of development it’s not so required as the application still in the innovation phase but it really helps to build better apps.
Linting
Linting helps in identifying any programmatic and stylistic errors. It reduces errors and improves the overall quality of the code. You can also use a style guide which also helps in checking the code against basic issues such as syntax errors, incorrect naming, spacing, etc
Error Tracking
Finding and fixing errors is an essential part of application development. As your application starts to grow, it becomes harder and time-consuming to track the exact error. To handle this we can use Sentry which reports errors in real-time, easy tracking, prioritize, identify, reproduce, and fix errors.
Dependency Injection
Dependency Injection means feeding the data into the application according to need. It's also very useful for testing as it allows dependencies to be mocked. You can test the application with fake data easily.
You must have heard of it in Angular Application, but React does not have inbuilt dependency injection.
You can inject all dependencies at one place, and use all other components via props. The dependencies can be wrapped using high order components.
Localization
In a country like India, users understand various languages such as Hindi, Marathi, Punjabi. Localization helps apps whose user base is divided across distinct languages. for example, An app that allows the users to view content in languages such as Hindi, Marathi.
Configuration Management
The initial settings of your application should be properly managed as it becomes difficult when the application grows. You can manage all your app configuration in .env file and access via process.env.SOME_DATA. But node-config module provides a more efficient way to manage all your app configurations. Earlier I wrote a blog that tells how to use the config module in NodeJS app.
These were the findings that helped me to kickstart my react app. You can use the boilerplate in your application.
If you find this article useful then please leave a like and share within your network and if you have suggestions or questions, the comment section is waiting for you 🙂 🙂
Top comments (0)