About the Book
You already know you want to learn React, and the smartest way to learn React is to learn by doing. The React Workshop focuses on building up your practical skills so that you can create dynamic, component-based web applications and interactive React UIs that provide exceptional user experiences. You'll learn from real examples that lead to real results.
Throughout The React Workshop book, you'll take an engaging step-by-step approach to understand React. You won't have to sit through any unnecessary theory. If you're short on time, you can jump into a single exercise each day or spend an entire weekend learning about two-way data binding. It's your choice. Learning on your terms, you'll build up and reinforce key skills in a way that feels rewarding.
Fast-paced and direct, The React Workshop is ideal for React beginners. You'll build and iterate on your code like a software developer, learning along the way. This process means that you'll find that your new skills stick, embedded as best practice, a solid foundation for the years ahead.
Audience
The React Workshop is for web developers and programmers who are looking to learn React and use it for creating and enhancing web applications. Although the workshop is for beginners, prior knowledge of JavaScript programming and HTML and CSS is necessary to easily understand the concepts that are covered in this book.
About the Chapters
Chapter 1, Getting Started with React, gets you typing code immediately. You will learn the basics of React, as well as how to install and configure React projects with Create React App.
Chapter 2, Dealing with React Events, provides the starting point for creating interactive web apps with React by introducing events. We'll not only create events but integrate them into our React components.
Chapter 3, Conditional Rendering and for Loops, is where we expand upon programmatically creating React components either when conditions are set or when we need to add multiple React components as a list of items.
Chapter 4, React Lifecycle Methods, is where we go from passively relying on React to build our components to hooking up our components to the different lifecycle methods, allowing us to determine what logic to execute at each stage of our React component's life.
Chapter 5, Class and Function Components, discusses industry best practices to identify the component hierarchy and break the UI down into logical components. This chapter forms the basis for your understanding of creating UIs in React, be they simple or complex, and provides you with the basic tools required to build React applications.
Chapter 6, State and Props, discusses the components that use state and props. You will learn how to handle state in a React application and how to change state variables according to requirements.
Chapter 7, Communication between Components, helps you understand how to pass data between React classes and functional components. Also, this chapter dives into more advanced patterns such as higher-order components, render props, and the Context API.
Chapter 8, Introduction to Formik, gives you a complete picture of using Formik to build declarative forms. There are many ways to handle forms in React but Formik combines the best approaches.
Chapter 9, Introduction to React Router, gets you comfortable with one of the most commonly used React libraries in modern React web apps: React Router. We will cover the basics of using React Router, including implementing our own version to understand what is happening under the hood.
Chapter 10, Advanced Routing Techniques: Special Cases, looks at advanced techniques with React Router and gets you onto the next level. You will learn how to catch missing routes, how to nest routes, and how to protect routes from unauthorized accesses.
Chapter 11, Hooks – Reusability, Readability, and a Different Mental Model, prepares you for using the latest addition to React: hooks. We'll explore how to make your code more readable and more reusable via hooks.
Chapter 12, State Management with Hooks, builds on your knowledge of hooks to completely replace class-based component state management by exploring more advanced topics such as building your own state hooks.
Chapter 13, Composing Hooks to Solve Complex Problems, brings you from novice React hooks knowledge to expert React hooks knowledge, putting context hooks into the mix to completely eliminate the need for class-based components.
Chapter 14, Fetching Data by Making API Requests, shows you the various ways to fetch data by making API requests in React. This chapter also covers fetching data from servers using RESTful APIs, the Fetch API, and Axios and compares these methods.
Chapter 15, Promise API and async/await, takes a deep dive into the Promise API and async/await, which are essential techniques and the modern way to fetch data from the server.
Chapter 16, Fetching Data on Initial Render and Refactoring with Hooks, shows you the techniques of fetching data on initial render and fixing issues when a component falls into an infinite loop.
Chapter 17, Refs in React, introduces you to how to use references in React. You will be able to apply the knowledge gained from the chapter to implement references in different ways.
Chapter 18, Practical Use Cases of Refs, introduces you to some use cases of references and how to leverage their functionalities in your code. You will be able to identify scenarios in which to use references so that you can manipulate DOM elements directly.
Conventions
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "The Promise API also comes with several methods, such as then(), catch(), and finally()."
Words that you see on the screen, for example, in menus or dialog boxes, also appear in the text like this: "Let's search for London, and the temperature should be displayed."
A block of code is set as follows:
"eslintConfig": {
"extends": "react-app"
},
New terms and important words are shown like this: "Installing Node.js will also give us npm (the Node Package Manager)."
"Callback hell is an anti-pattern that consists of multiple nested callbacks".
Long code snippets are truncated and the corresponding names of the code files on GitHub are placed at the top of the truncated code. The permalinks to the entire code are placed below the code snippet. It should look as follows:
App.js
17 <div> 18 Username: <input type="text" /><br /> 19 Password: <input type="text" /><br /> 20 Password Confirmation: <input type="text" /><br /> 21 Email: <input type="text" /><br /> 22 <br /> 23 <button>Submit</button> 24 </div>
The complete example code is available at https://packt.live/35qT2L3.
Before You Begin
You are here and you are ready to get started with building your web applications in React. We need to install Node.js and Node Package Manager (NPM) to get started, and then additionally include installations for Yarn and Create React App. The installation instructions work for Windows, Linux, and Mac operating systems.
Installation Instructions
Node.js/NPM
To install Node.js/NPM, you will need to do the following:
- Visit https://nodejs.org and visit the
Downloadpage. - From there, choose the appropriate package for your platform (or you can opt to download the source code and compile it yourself).
- Verify the results. Open a Terminal or Command Prompt and verify that Node.js and NPM are installed with the
node -vandnpm -vcommands, which should return the version installed for each.Note
For the purposes of this book, we will be working with the ''current'' version, not the ''LTS'' version.
Yarn
To install Yarn:
- With Node.js and NPM installed, you can now visit
yarnpkg.comand navigate to theInstallationsection. - From there, choose the operating system you're using and the version (the latest stable version will work just fine for us).
- Follow the instructions on the page and verify the results by typing
yarn -vin your Command Prompt/Terminal window.
Create React App
To install Create React App:
- We will be working with the
npx create-react-appcommand, which does not require us to installcreate-react-applocally. Should you want to, however, you can install it locally either via Yarn or NPM.
For NPM:
$ npm install -g create-react-app
For Yarn:
$ yarn add global create-react-app
After that, verify the installation is working by running create-react-app -v.
Editors/IDEs
You can download and use Visual Studio Code as an editor (https://code.visualstudio.com/). Visual Studio Code is a lightweight yet highly efficient source code editor that runs on your desktop and is available for Windows, macOS, and Linux operating systems. It provides you with built-in support for JavaScript, TypeScript, and Node.js. It is an easy tool to help you get started coding in React.
Installing the Code Bundle
Download the code files from GitHub at https://packt.live/3cx4XdN. Refer to these code files for the complete code bundle.
If you have any issues during installation (or have any other feedback) you can reach us at [email protected].