Introducing React
While the example in the previous section is a complex problem, the good news is that with React, the solution isn't terribly complex.
Instead of thinking about each element your browser sees and displays for the user as separate from your HTML code and JavaScript code (and thus separate from the states that each exhibits at any given point in time), React allows you to think of all of the code as part of the same data structure, all intertwined and working together:
- The component
- The state
- The display (or render)
This reduces a lot of the complexity and overhead while trying to amalgamate component state and component display with a mixture of CSS and JavaScript along the way. React represents a more elegant way to allow the developer to think holistically about what is on the browser and what the user is interacting with, and how that state changes along the way.
By itself, all of that is a great help to us as developers but React also introduces a full scaffold for setting things up quickly and easily in a way that lets us get to development faster and fiddle less with configuration along the way.
React introduces a way for us to set up how to represent the states and display of components, but additional tools make the setup and configuration process even easier. We can further optimize the process for getting started by introducing a special command-line tool for React projects called Create React App.
This tool minimizes the amount of time a developer needs to spend getting everything set up and allows developers to instead focus on the most important part of building your web application: the development.
Getting Started with Create React App
Create React App introduces a scaffold to React applications. Through this, configuration and setup are minimized around opinionated configuration (a set of configurations where a lot of the decisions have been made for you) and pre-built structures. Your directories, input, and output are all handled for you.
What is a scaffold? A scaffold in the development world is something that sets up boilerplate (that is, often-repeated bits of code or configuration) details for you with the idea that you will be using the same configuration, setup, and directory structure that the project is using. A scaffold allows you to get to development significantly faster, with the drawback that it may be harder to break away from decisions made in the scaffold later on in your development process, or that you may end up with more dependencies or structure than you need.
The Create React App scaffold is designed around the idea of the developer experience: that setting up a new project should be seamless and painless. If you want to start developing right now and not have to worry about how you are going to test your application, or how you are going to structure your application, or what libraries you are going to include in your application, then a scaffold such as Create React App is the way to go.
Try to think of a time that you had to do something that required a lot of setup (baking a cake, painting a picture, exercising, or whatever). Think of a scaffold you could use to bootstrap that process and speed it up for the next time that you want to repeat that activity. What would you do? What stuff would you include with it? Are there any parts of the process that might differ from person to person (these would indicate "opinionated" scaffolds or frameworks)?
Since we are trying to minimize friction at the starting point of our project, we are going to use this scaffold to get up and running quickly and painlessly.
Setting Up a Development Environment
Having digested the context of React, Create React App, and the problem at hand, it's time to start ping into getting everything ready for us to start writing our code. To do that, though, we will need to make sure that our development environment is ready for us to start using Create React App.
The first thing we will need to do is install Node.js (instructions can be found in the Preface of this book) to make sure we can use the command-line tool to create new React projects, and to make sure we can do so in a best-practices manner.
If you visit https://packt.live/34FodRT, you will see download links for your platform front and center, with a choice to either download the LTS version or the current version.
Note
LTS is the long-term support version of the Node.js runtime. This is designed more for things that are running on the server side in production environments and specifically need to not change over time, whether for security or stability reasons.
We will opt for the current version just to make sure we are using the latest and greatest for everything React along the way.
You will then need to follow the instructions to download and install Node.js via the installer. Each platform has a different way to get everything properly installed and set up, but for the most part, it's either a simple installer or a simple package-download to get started.
After getting everything installed, your next step should be to open a command-line/terminal window to verify that you can run Node.js. If you run the command node -v, you should see the version you just downloaded and installed:
Figure 1.2: Verifying whether Node.js is installed
Installing Node.js will also give us npm (the Node Package Manager) as well, which we will also want to verify with the command npm -v:
Figure 1.3: Verifying the version of Node.js
We can now start using another utility, npx, to execute Create React App and get started quickly.
Note
npx is a utility that executes npm package binaries (such as Create React App) with a minimal amount of fuss.
Instead of just running create-react-app, let's take a look at the help documentation instead with the --help flag in our call to npx .The output will be as shown below (the output will slightly vary for different operating systems):
$ npx create-react-app --help
Usage: create-react-app <project-directory> [options]
Options:
-V, --version output the version number
--verbose print additional logs
--info print environment debug info
--scripts-version <alternative-package> use a non-standard version of react-scripts
--use-npm
--use-pnp
--typescript
-h, --help output usage information
Only <project-directory> is required.
A custom --scripts-version can be one of the following:
- a specific npm version: 0.8.2
- a specific npm tag: @next
- a custom fork published on npm: my-react-scripts
- a local path relative to the current working directory: file:../my-react-scripts
- a .tgz archive: https://mysite.com/my-react-scripts-0.8.2.tgz
- a .tar.gz archive: https://mysite.com/my-react-scripts-0.8.2.tar.gz
It is not needed unless you specifically want to use a fork. If you have any problems, do not hesitate to file an issue: https://github.com/facebook/create-react-app/issues/new
Note
Take a look at the output from the help page to figure out what you need to pass to create-react-app.
Let's check the React app version using the command --version:
Figure 1.4: Checking the Create React App version
In the next section, we will discuss how we can tweak the options in Create React App.
Tweaking Create React App's Options
We need to pe a little bit deeper to better understand the different options that are available when we are using Create React App to generate our new React project structure. We can use it with no options and only declare the project name, but if we wanted to tweak our default configuration at all (for example, if we wanted to use a specific version of react-scripts or use something like TypeScript with our project), we would need to use one of the other options available to us.
We already talked about getting the version, but we can also pass some additional flags to change what we see or change how our project structure is generated along the way:
If we pass --verbose (by running npx create-react-app --verbose), for example, we will see a lot more information (and more detailed information) about each step along the way as the project is created and structured. You will want to use something like this if your project has the chance of running into issues during the creation step and you need to figure out, in greater detail, what's happening along the way. You can use this and --info to really understand all of the things that might be influencing the creation process if you are running into any issues.
We have the --scripts-version flag, which can tell Create React App to use a custom version of react-scripts, which is a helpful collection of scripts, dependencies, and utilities that facilitate the React app creation process. For the purposes of our first projects, however, we will leave this alone for now.
The --use-npm and --use-pnp flags exist because by default, Create React App will use yarn as its default package manager. If you pass in the --use-npm flag, Create React App will avoid the dependency on yarn, similar to the --use-pnp flag. Again, we are fine with the default settings here, so we will not be using either of those flags in our early projects.
Finally, the last non-help option we can pass is --typescript, which generates a Create React App scaffold with TypeScript hooked in appropriately (more on this in detail in the following chapters). You might use Typescript if you are looking to implement more development structure or stricter adherence to types in your React projects.