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

By Anthony Onyekachukwu Okonta

React is a JavaScript library created by Facebook to help build applications with components. In React, there are proven methods to solve common problems experienced by React developers. If you are looking for different ways how to choose your pattern when building a React app, then this book is for you.

The book starts by sharing the best practices for architecting your React app. It then helps you learn how to create clean, performant, and maintainable React components using JavaScript and TypeScript. The book helps you explore and work with some useful hooks in React. It also helps you learn how to enable server-side rendering for your React app. Later, the book will help you discover ways to style your React components effectively. Towards the end, the book will help you learn how to write tests for your React applications.

By the end of the book, you will be able to build complex and maintainable React apps with JavaScript and TypeScript.

• Language: English
• Publisher: BPB Online LLP
• Release date: Jan 27, 2023
• ISBN: 9789355513670

Book preview

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