Preface

React is a revolutionary, open-source JavaScript library that breathes life into web applications by constructing intricate user interfaces from small, isolated chunks known as components. This book serves as a roadmap, guiding you through the wonders of React and enhancing your productivity by introducing an efficient workflow without compromising on quality.

Our journey begins by delving deep into the core of React, gaining a thorough understanding of its internal mechanisms and architecture. With this strong foundation in place, we will guide you towards writing clean and maintainable code, breaking down complex concepts into digestible and manageable chunks.

Continuing our journey, we will uncover the art of building components that aren’t just one-off entities but reusable pieces across your application. We’ll illuminate the path to structuring your applications, making them more organized and manageable. The seemingly daunting task of creating functional forms will become a breeze as we equip you with strategies and techniques to do so effectively.

As we ascend further, we’ll immerse ourselves in styling React components. You’ll learn how to bring your applications to life with aesthetic appeal while ensuring they remain swift and responsive. Moreover, you’ll discover the secrets of enhancing application performance, fine-tuning your components for speed and efficiency.

In the final phase of our journey, we’ll delve into testing methodologies effectively, refining the quality and reliability of your applications. You’ll also gain insight into contributing to React and its thriving ecosystem, joining the ranks of developers who continually drive its evolution.

By the end of this book, the trial-and-error process, the developmental hurdles, and guesswork will be things of the past. You will have harnessed the power of React, equipped with the skills necessary to construct and deploy real-world React web applications with confidence and finesse.

Who this book is for

This book is for web developers who want to increase their understanding of React and apply it to real-life app development. Intermediate-level experience with React and JavaScript is assumed.

What this book covers

In Chapter 1, Taking Your First Steps with React, we start our journey to understand React by learning to write declarative code and distinguishing between our components and React’s elements. We also discuss why we combine logic and templates in React, a decision that was controversial initially but ultimately beneficial. Recognizing the potential for feeling overwhelmed in the rapidly evolving world of JavaScript, we suggest taking small, manageable steps to avoid fatigue. We wrap up by introducing the new create-vite tool, preparing you for hands-on coding experience in React.

In Chapter 2, Introducing TypeScript, we’ll learn the basics of TypeScript, including creating simple types, interfaces, using enums, namespaces, and template literals. We’ll also figure out how to set up our first TypeScript configuration file (tsconfig.json) and divide it into two parts - a common part and a specific part, which is particularly handy when working with MonoRepos. After this chapter, you’ll be all set to delve into using JSX/TSX code and explore ways to make your code better in the next chapter. Get ready to use TypeScript to make your React apps easy to work with and maintain.

In Chapter 3, Cleaning Up Your Code, we’ll get to know JSX, including how it’s written and what it can do. We’ll also set up Prettier and ESLint to keep our code neat and prevent mistakes. Plus, we’ll learn about functional programming, which makes our code easier to manage and test. After tidying up our code, we’ll be prepared to go deeper into React and learn how to make components that we can use repeatedly in the next chapter. By adopting good habits, we can build React apps that are simple to manage, grow, and check.

In Chapter 4, Exploring Popular Composition Patterns, we’ll learn how to use “props” to make our reusable components work together better. Using props helps keep our components separate and welldefined. We’ll look at two common ways to organize components: the container and presentational pattern, which keeps the rules and looks of our components separate. We’ll also learn about Higher Order Components (HOCs) for dealing with context without making our components too dependent, and the Function as Child pattern for creating components on-the-fly.

In Chapter 5, Writing Code for the Browser, we’ll look at how React can be used in a web browser to create forms, handle events, and animate SVGs. We’ll learn about the useRef Hook, which is an easy way to reach DOM nodes.

With React’s simple, straightforward approach, managing complex web apps becomes easier. Plus, React allows us to access DOM nodes directly if we need to, which makes it simple to use React with other libraries.

In Chapter 6, Making Your Components Look Beautiful, we’ll dive into styling in React. We’ll start by looking at the problems with making CSS work for big projects, using the experiences of Meta as an example. We’ll learn about how we can write styles directly inside our React components, which keeps our code tidy and easy to read. But we’ll also learn about the limitations of this method and explore another way of styling, called CSS modules, that lets us write CSS in separate files but keep the styles scoped to individual components. Finally, we’ll get to know styled-components, a popular library for styling in React. By the end of this chapter, you’ll have many tools for making your React apps look great.

In Chapter 7, Anti-Patterns to Be Avoided., we’ll talk about four ways of using components that could slow down or mess up our web apps. For each problem, we’ll use an example to show what goes wrong and how to fix it. We’ll learn why using properties to set up the state can cause problems between the state and the properties. We’ll also see how using the wrong “key” attribute can mess up the way React updates components. Lastly, we’ll learn why spreading non-standard properties to DOM elements is a bad idea. Understanding these issues will help us use React more effectively and avoid common mistakes.

In Chapter 8, React Hooks, we’ll have a lot of fun learning about the new React Hooks. We’ll learn how they work, how to use them to get data, and how to change a class component into a Hooks one. We’ll also learn about effects and the differences between memo, useMemo, and useCallback. Finally, we’ll see how the useReducer Hook works and how it’s different from react-redux. All of this will help us make our React components faster and better.

In Chapter 9, React Router, we’ll learn about React Router, a tool we use with React to move between pages in a single-page application. React doesn’t do this on its own, so we use React Router. We’ll find out how to use it to make our app respond to different URLs and manage navigation. By the end of this chapter, you’ll know how React Router works and how to use it in your projects. We’ll learn the differences between the react-router, react-router-dom, and react-router-native packages, how to set up React Router, how to add the <Routes> component, and how to add parameters to the routes.

In Chapter 10, React 18 New Features, we’ll explore the new and improved React 18. It has loads of features that make building cool, interactive apps even easier.

With automatic state update grouping, concurrent rendering, Suspense for getting data, better error handling, and new component types, you can create engaging and fast apps. If you work with React, it’s a good idea to consider upgrading to React 18. We’ll also look at some of the big new features in Node 18 and 19, which can make our web projects even better.

In Chapter 11, Managing Data, we’ll learn about the React Context API and how to use React Suspense with SWR. We’ll learn the basics of the Context API, including creating and using contexts and how the useContext hook makes this even easier. We’ll also look at React Suspense and how it helps us handle loading states better for a smoother user experience. We’ll also learn about SWR, which makes it easier to fetch and cache data with React Suspense. Lastly, we’ll learn how to use the new Redux Toolkit. All these tools will help us build faster and more user-friendly React apps.

In Chapter 12, Server Side Rendering, we’ll finish our journey through server-side rendering (SSR) with React. Now you’ll know how to create an app that uses SSR, and why it can be useful for things like search engine optimization (SEO), social sharing, and improving performance. We’ll learn how to load data on the server and put it into the HTML template so it’s ready for the client-side app when it starts up in the browser. Lastly, we’ll see how tools like Next.js can make setting up SSR in React a lot easier by reducing the amount of extra code and hiding some of the tricky parts.

In Chapter 13, Understanding GraphQL with...