Over the last few weeks I’ve taken a bit of a break from the usual tech specks to relax over the Christmas break and also to think about my goals for the year. I’m trying out a new format here on the blog, one detailed summary and a list of the other 4 articles I’ve read over the week. If you are interested in the rest of the summaries, hop over to my course and check it out. I’ll be updating it every week!

#1 How to apply SOLID principles in React applications

Single Responsibility Principle

The component should have one and only one reason to change (like if the react component should update or not): should just be a header component or just a footer, shouldn’t do both unless its a wrapper

Have functions passed in as props that handle data mutations.

Have a presentation component that encapsulates html and styling of components.

Open Closed Principle

Software entities (classes, modules, functions, etc) should be open for extension but closed for modification

Use component composition (displaying children nested in components) to reorder/change structure of the child elements without changing the parent.

Shouldn’t have to change the render function

Liskov Substitution Principle

Objects in a program should be replaceable with instances of their subtypes without altering the correctness of that program

If extending a component, it needs to act the same as the parent (initialized the same)

Interface Segregation Principle

We should not depend on things we don’t need

Only pass in props that are used (not the whole object if you don’t need it - but not just limited to props)

Dependency Inversion Principle

We should depend on abstractions not concretions

A high level module should not depend on low-level details, both should depend on abstraction (ie. create an interface to fetch data).

Should have no knowledge of HTTP, SOAP or other protocols

---

Other Articles

#2 Caching React listeners can help boost your application’s performance by cutting out render cycles

#3 Learn how to handle errors in your application the right way. I had to split this article into 3 sections in order to tackle a little bit every day.

Side Note: If you read the original article, you’ll notice that in one of the examples, they have a semi-colon in front of the self-invoking function. If you are curious about what it is used for I recommend looking here

Resources

For more information on logging for debugging purposes check out loglevel