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

This article from Andy Ray is easy to understand what it is and when, why we need it.
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. 

  • React-helmet
  • Immutable
  • Reselect

    It’s a minimal way to get the redux to store data and feed into the application.

  • Normalizr

    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’.
  • Lodash

    Utility functions for common programming

  • Redux-saga

    Redux-saga is a redux middleware library, that is designed to make handling side effects in your redux app nice and simple

  • Redux

    Redux is a predictable state container for JavaScript apps

 

Styling

  • Styled-components

    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

    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

    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.

Leave a Reply

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