React 18 Design Patterns and Best Practices, Fourth Edition: Design, build, and deploy production-ready web applications with ease and create powerful user experiences

Welcome to Packt Early Access. We’re giving you an exclusive preview of this book before it goes on sale. It can take many months to write a book, but our authors have cutting-edge information to share with you today. Early Access gives you an insight into the latest developments by making chapter drafts available. The chapters may be a little rough around the edges right now, but our authors will update them over time.

You can dip in and out of this book or follow along from start to finish; Early Access is designed to be flexible. We hope you enjoy getting to know more about the process of writing a Packt book.

1. Chapter 1: Taking Your First Steps with React
2. Chapter 2: Introduction to TypeScript
3. Chapter 3: Cleaning Up Your Code
4. Chapter 4: Exploring Popular Composition Patterns
5. Chapter...

Technical requirements

To follow this book, you need to have some experience in using the terminal to run a few Unix commands. Also, you need to install Node.js. You have two options: the first one is to download Node.js directly from the official website (https://nodejs.org), and the second option (recommended) is to install Node Version Manager (NVM) from https://github.com/nvm-sh/nvm.

If you decide to go with NVM, you can install any version of Node.js you want and switch the versions with the nvm install command:

• node is an alias for the latest version:

  nvm install node
  

• You can also install a global version of Node.js (nvm will install the latest version of Node.js locally to a user’s computer):

  nvm install 19
  nvm install 18
  nvm install 17
  nvm install 16
  nvm install 15
  

• Or you can install a very specific version:

  nvm install 12.14.3
  

• After you have installed the different versions, you can switch...

Differentiating between declarative and imperative programming

When reading the React documentation or blog posts about React, you will have undoubtedly come across the term declarative. One of the reasons why React is so powerful is that it enforces a declarative programming paradigm.

Therefore, to master React, it is essential to understand what declarative programming means and what the main differences between imperative and declarative programming are. The easiest way to approach this is to think about imperative programming as a way of describing how things work, and declarative programming as a way of describing what you want to achieve.

Entering a bar for a beer is a real-life example in the imperative world, where normally you will give the following instructions to the bartender:

1. Find a glass and collect it from the shelf.
2. Place the glass under the tap.
3. Pull down the handle until the glass is full.
4. Hand me the glass.

In the...

How React elements work

In this book, we assume that you are familiar with components and their instances, but there is another object you should know about if you want to use React effectively – the element. Elements are lightweight immutable descriptions of what should be rendered, while components are more complex stateful objects responsible for generating elements.

Whenever you call createClass, extend Component, or declare a stateless function, you are creating a component. React manages all the instances of your components at runtime, and there can be more than one instance of the same component in memory at a given point in time.

As mentioned previously, React follows a declarative paradigm, and there’s no need to tell it how to interact with the DOM; you declare what you want to see on the screen, and React does the job for you. One of the tools that makes this process more expressive and readable is JSX, which allows you to write HTML-like syntax directly...

Unlearning everything

When working with React for the first time, it’s essential to approach it with an open mind. This is because React represents a new way of designing web and mobile applications, breaking away from many traditional best practices.

In the last two decades, we’ve learned that separation of concerns is crucial, often involving separating logic from templates. We aim to write JavaScript and HTML in different files, and various templating solutions have been created to aid developers in achieving this goal.

However, the problem with this approach is that it often creates an illusion of separation. In reality, JavaScript and HTML are tightly coupled, no matter where they live. To illustrate this, let’s consider an example template:

{{#items}} 
  {{#first}} 
    <li><strong>{{name}}</strong></li> 
  {{/first}} 
  {{#link}} 
    <li><a href="{{url}}">{{name}}</a></li> 
  {{/link...

Understanding JavaScript fatigue

There is a prevailing opinion that React consists of a vast set of technologies and tools, and if you want to use it, you are forced to deal with package managers, transpilers, module bundlers, and an infinite list of different libraries. This idea is so widespread and shared among people that it has been clearly defined and given the name JavaScript fatigue.

Misconceptions about React

It is not hard to understand the reasons behind JavaScript fatigue. All the repositories and libraries in the React ecosystem are made using shiny new technologies, the latest version of JavaScript, and the most advanced techniques and paradigms. Moreover, there is a massive amount of React boilerplate code on GitHub, each with tens of dependencies to offer solutions for any problem.

However, it is essential to understand that React is a pretty tiny library, and it can be used inside any page (or even inside JSFiddle) in the same way everyone used to use...

Summary

In this first chapter, we have learned about some basic concepts that are very important for following the rest of the book, and that are crucial to working with React daily. We now know how to write declarative code, and we have a clear understanding of the difference between the components we create and the elements that React uses to display their instances on the screen.

We learned the reasons behind the choice of locating logic and templates together, and why that unpopular decision has been a big win for React. We went through the reasons why it is common to feel fatigued in the JavaScript ecosystem, but we have also seen how to avoid those problems by following an iterative approach.

Finally, we have seen what the new create-vite CLI is, and we are now ready to start writing some real code.

In the next chapter, you will learn TypeScript and how to use it in your projects.

Join our community on Discord

Join our community’s Discord space for...