Following Along with the Book

Before you can successfully create and run React.js projects on your system, you will need to ensure you have Node.js and npm (included with your installation by default) installed.

These are available for download at https://nodejs.org/en/.

The home page of this site should automatically provide you with the most recent installation options for your platform and system. For more options, select Downloads in the site navigation bar. This will open a new page through which you can explore all installation choices for all main platforms, as shown in the screenshot below:

Installing React.js

React.js projects can be created in various ways, including custom-built project setups that incorporate webpack, babel and other tools. The recommended way for this book is the usage of the Vite tool though. This tool and the process of creating a React app will be covered in Chapter 1, React – What and Why, but you may refer to this section for step-by-step instructions on this task.

Perform the following steps to create a React.js project on your system:

1. Open your terminal (Powershell/Command Prompt for Windows; bash for Linux).
2. Use the make directory command to create a new project folder with a name of your choosing (e.g., mkdir react-projects) and navigate to that directory using the change directory command (e.g., cd react-projects).
3. Enter the following command prompt to create a new project directory within this folder:

   npm create vite@latest my-app
   

After running this command, choose React and JavaScript when prompted for input.

4. Once completed, navigate to your new directory using the cd command:

   cd my-app
   

5. Open a terminal window in this new project directory and run the following command to install all required dependencies:

   npm install
   

6. Once this command is completed, in the same terminal, run the following command to start a Node.js development server:

   npm run dev
   

7. This command outputs a server address you can visit to preview the React application. By default, the address is http://localhost:5173. Type that address in the address/location bar to navigate to localhost:5173, as shown in the screenshot below:

8. When you are ready to stop development for the time being, use Ctrl + C in the same terminal as in Step 5 to quit running your server. To relaunch it, simply run the npm run dev command in that terminal once again. Keep the process started by npm run dev up and running while developing, as it will automatically update the website loaded on localhost:5173 with any changes you make.

Download the Example Code Files

The code bundle for the book is hosted on GitHub at https://github.com/mschwarzmueller/book-react-key-concepts-e2. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the Color Images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://packt.link/gbp/9781836202271.

Conventions Used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. For example: “Once the root entry point has been defined, a method called render() can be called on the root object created via createRoot().”

A block of code is set as follows:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App.jsx';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

import { memo } from 'react';
import classes from './Error.module.css';
function Error({ message }) {
  console.log('<Error /> component function is executed.');
  if (!message) {
    return null;
  }
  return <p className={classes.error}>{message}</p>;
}
export default memo(Error);

Any command-line input or output is written as follows:

npm create vite@latest my-react-project

Bold: Indicates a new term, an important word, or words that you see on the screen. For instance, words in menus or dialog boxes appear in the text like this. For example: “React simplifies the creation and management of such UIs by moving from an imperative to a declarative approach.”