React.js Design Patterns: Learn how to build scalable React apps with ease (English Edition)

CHAPTER 1

React Anti-Patterns and Best Practices

Introduction

This chapter will cover different patterns in writing React applications. Yes, react is opinionated, although it gives you the liberty to build and structure your applications according to your taste or which fits your organization. However, there are some very bad practices that are not good and can have an effect on your application as your application begins to grow.

This chapter will identify common bad practices out there and suggest better practices to help build scalable React applications. We will be using JavaScript and TypeScript for this chapter. This seems to be redundant since TypeScript was not used in any example illustrated and React is built on JavaScript.

Structure

The following topics are to be covered in this chapter:

What bad practices/ways in architecting a react application?

Best practices in architecting react applications?

Benefits of using TypeScript in React applications

Objectives

The objective of this chapter is to look at the different ways of building a react application and determine the good from the bad. It will also give us an insight into the benefits of JavaScript and TypeScript in react applications.

Bad practices in building a React application

React is an opinionated library created by Facebook to help build applications with components. Yes, being opinionated gives one the liberty to design it how he or she wishes. The application can be structured however you want and will still function. We will look at some of the bad practices that we sometimes engage in when using React but are not aware of.

Inline CSS

Inline styles or inline CSS is simply styling your component or page from within the component code. Inline CSS means defining the CSS properties using a style attribute with an HTML tag or adding the styles directly to the element. That string will contain CSS property value pairs; each property will be separated from the other by a semicolon.

Let us take a look at an example that follows:

import React from 'react'

const App=()=>{

return (

This is just a test application

);

};

export default App

In the preceding example, we changed the default color of the paragraph tag from black to red. This is a simple example with relatively less hassle because it involves simply changing the paragraph color. It is easy to implement—a line of code and the color of the paragraph changes from black to