When I first started writing React, I remember seeing many different approaches/libraries to creating/handling components and apps in ‘real-world’ situations. After 2 years working on several medium sized commercial projects and a few freelance projects, I’ve cottoned onto some of the essentials.
The most important thing is a Coding style guide for clean code
A style guide is a standard pattern that ‘tutorial-ises’ how code should be written and organised.
Why do we need style guides?
An essential reason for every developer to have their own coding styles: You may like to do something one way, and I may like to do it another way, it shouldn’t be a problem if you’re working with 1-2 developers. But what happens when you have big team with 20-30 team members, everybody has a different idea of how code should be written. It becomes messy very quickly once it comes time for maintenance and hand-overs it turns in to a disaster project.
So, it’s sufficient reasons to follow a style guide. Only then can new developers understand the application flow and be effective immediately, it also helps to eliminate disasters in the development process among team members, rework and the usual problem of reinventing code.
Here is a list of tools/libraries
An opinionated code formatter, it helps developers format code quickly.
Webpack the builder
This article from Andy Ray is easy to understand what it is and when, why we need it.
When To Use And Why – https://blog.andrewray.me/webpack-when-to-use-and-why/
Third-party JS libraries help developers
Those JS libraries will make your life easier.
Start here: https://medium.freecodecamp.org/immutable-js-is-intimidating-heres-how-to-get-started-2db1770466d6
It’s a minimal way to get the redux to store data and feed into the application.
How many times have you had to change a component property or names on components when some key/field changed for an API. You also need to know how data is received from an API. Normalizr is a life saver. What you have to do is feed Normalizr data in a schema it produces an Entity Relationship Diagram.
- Here is the link to learn more about ‘Entity Relationship Diagram’.
Utility functions for common programming
Redux-saga is a redux middleware library, that is designed to make handling side effects in your redux app nice and simple
- Flexbox Cheatsheet
CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size