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

Webpack the builder
https://webpack.js.org/

 

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/

Essentially, the web pack bundles JavaScript files for use in a browser via configuration.  The configuration file allows the builder to load specific things such as “load all JavaScript”, “SCSS”, “CSS files”, this can be loaded into one file or split across multiples.

Third-party JS libraries help developers

Those JS libraries will make your life easier.

 

 

Styling

  • Styled-components
    https://www.styled-components.com/
    Uses JavaScript as a language to describe styles in a declarative and maintainable way. It’s very useful and very popular at all sizes app.
  • Flexbox Cheatsheet
    https://yoksel.github.io/flex-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
  • Unit-testing
    https://jestjs.io/
    Jest is developed by Facebook to test all JavaScript code including React applications.In computer programming,unit testing is a software testing method by which individual units of source code modules together with associated control data, usage procedures, and operating procedures, are tested to determine whether they are fit for use. https://en.wikipedia.org/wiki/Unit_testing

Leave a Reply

Your email address will not be published. Required fields are marked *