This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.
International License.
ISBN 978-1-7358317-4-9
How To Code in React.js
Joe Morgan
DigitalOcean, New York City, New York, USA
2021-07
How To Code in React.js
1. About DigitalOcean
2. Introduction
3. How To Set Up a React Project with Create React App
4. How To Create React Elements with JSX
5. How To Create Custom Components in React
6. How To Customize React Components with Props
7. How To Create Wrapper Components in React with Props
8. How To Style React Components
9. How To Manage State on React Class Components
10. How To Manage State with Hooks on React Components
11. How To Share State Across React Components with Context
12. How To Debug React Components Using React Developer Tools
13. How To Handle DOM and Window Events with React
14. How To Build Forms in React
15. How To Handle Async Data Loading, Lazy Loading, and Code
Splitting with React
16. How To Call Web APIs with the useEffect Hook in React
17. How To Manage State in React with Redux
18. How To Handle Routing in React Apps with React Router
19. How To Add Login Authentication to React Applications
20. How To Avoid Performance Pitfalls in React with memo,
useMemo, and useCallback
21. How To Deploy a React Application with Nginx on Ubuntu 20.04
22. How To Deploy a React Application to DigitalOcean App
Platform
About DigitalOcean
DigitalOcean is a cloud services platform delivering the simplicity
developers love and businesses trust to run production applications at scale.
It provides highly available, secure and scalable compute, storage and
networking solutions that help developers build great software faster.
Founded in 2012 with offices in New York and Cambridge, MA,
DigitalOcean offers transparent and affordable pricing, an elegant user
interface, and one of the largest libraries of open source resources available.
For more information, please visit https://www.digitalocean.com or follow
@digitalocean on Twitter.
Introduction
About this Book
React seems to be everywhere. Companies and projects large and small are
using it to build their applications. The popularity comes from the fact that
React builds on core web development skills. That’s not to say you will
learn it in a day or that every feature is easy to understand on the first try.
Instead, React excels precisely because it minimizes the amount of React-
specific knowledge you need. You don’t need to learn about templates or
controllers or complex patterns. Instead, most of the code you write will be
JavaScript combined with standard HTML. It can get complicated from
there. The HTML, for example, is really a markup language called JSX that
is parsed by React before going into the DOM. But as you take each step in
your learning you will be building on solid foundations of web
development. That means you gain a double benefit as your learn React.
Not only will you be building world class applications, you will be
strengthening your own knowledge of JavaScript and web standards. You
will develop transferable skills that you can use in any future web-based
application whether it’s built with React or not.
This book is an introduction to React that works from the foundations
upward. Each chapter takes you a little deeper into the React ecosystem,
building on your previous knowledge. Along the way, you’ll maintain
internal state, pass information between parts of an application, and explore
different options for styling your application. Whether you are completely
new to React or if you’ve worked with it before, this series will be
accessible to you. Every chapter is self contained, so you can jump between
chapters or skip whole sections. The book is designed for you to take a
concept and explore it by building a small project that mirrors what you will
see in everyday development.
Learning Goals and Outcomes
By the end of the book, you’ll have a strong understanding of the different
parts of a React application and you’ll be able to combine the parts together
to build individual components and whole applications. You’ll be able to
build small applications that use external data and respond to user actions.
You’ll also learn how to debug and optimize your application to make the
best user experience.
How to Use This Book
You can read the book in any order, but if you are new to React, start with
the first chapter that shows you how to create a new project using a tool
called Create React App. Every subsequent chapter will start with a new
project, so it will be useful to learn how to bootstrap a new application.
After that, continue straight through or skip to the chapters that interest you.
If something is unfamiliar, back up and you’ll find a whole tutorial
dedicated to the concept.
How To Set Up a React Project with Create
React App
Written by Joe Morgan
The author selected Creative Commons to receive a donation as part of the Write for
DOnations program.
React is a popular JavaScript framework for creating front-end applications. Originally
created by Facebook, it has gained popularity by allowing developers to create fast
applications using an intuitive programming paradigm that ties JavaScript with an HTML-
like syntax known as JSX.
Starting a new React project used to be a complicated multi-step process that involved
setting up a build system, a code transpiler to convert modern syntax to code that is
readable by all browsers, and a base directory structure. But now, Create React App
includes all the JavaScript packages you need to run a React project, including code
transpiling, basic linting, testing, and build systems. It also includes a server with hot
reloading that will refresh your page as you make code changes. Finally, it will create a
structure for your directories and components so you can jump in and start coding in just a
few minutes.
In other words, you don’t have to worry about configuring a build system like Webpack.
You don’t need to set up Babel to transpile you code to be cross-browser usable. You don’t
have to worry about most of the complicated systems of modern front-end development.
You can start writing React code with minimal preparation.
By the end of this tutorial, you’ll have a running React application that you can use as a
foundation for any future applications. You’ll make your first changes to React code,
update styles, and run a build to create a fully minified version of your application. You’ll
also use a server with hot reloading to give you instant feedback and will explore the parts
of a React project in depth. Finally, you will begin writing custom components and
creating a structure that can grow and adapt with your project.
Prerequisites
To follow this tutorial, you’ll need the following:
Node.js version 10.16.0 installed on your computer. To install this on macOS or
Ubuntu 18.04, follow the steps in How to Install Node.js and Create a Local
Development Environment on macOS or the Installing Using a PPA section of How
To Install Node.js on Ubuntu 18.04.
It will also help to have a basic understanding of JavaScript, which you can find in
the How To Code in JavaScript series, along with a basic knowledge of HTML and
CSS.
Step 1 — Creating a New Project with Create React App
In this step, you’ll create a new application using the npm package manager to run a
remote script. The script will copy the necessary files into a new directory and install all
dependencies.
When you installed Node, you also installed a package managing application called npm. n
pm will install JavaScript packages in your project and also keep track of details about the
project. If you’d like to learn more about npm , take a look at our How To Use Node.js
Modules with npm and package.json tutorial.
npm also includes a tool called npx, which will run executable packages. What that means
is you will run the Create React App code without first downloading the project.
The executable package will run the installation of create-react-app into the directory
that you specify. It will start by making a new project in a directory, which in this tutorial
will be called digital-ocean-tutorial . Again, this directory does not need to exist
beforehand; the executable package will create it for you. The script will also run npm ins
tall inside the project directory, which will download any additional dependencies.
To install the base project, run the following command:
