Create-React-App MHL Template Project

Equipped with Node.js as well as NPM and Yarn, we are ready to get started. We can use the CRA Must-Have-Libraries (MHL) template project I created for you, and it will produce the final result of this chapter and include all the libraries we are setting up in this chapter.

It’s good to have this template project as your starter library, not just because it is easy and includes all the libraries we need, but also because I will be able to update this starter project long after the book is released in case anything breaks or needs an update, as often happens with NPM libraries.

This command will install all the dependencies and start the project on a local server. You will learn more about what’s happening under the hood in the next section.

In the rest of this chapter, I will explain what this project includes and reverse engineer the project for you, so you can understand fully what is happening under the hood. It is not mandatory to do all the steps in this chapter as you already have the final project ready.

Vanilla-Flavor Create-React-App

Note that the development build is not optimized. To create a production build, use yarn build.

Our app will open automatically on port 3000 using our default browser. If it doesn’t, you can use any browser and use this URL: http://localhost:3000/.

What’s happening in the background is that the CRA app created a development server for us. See Figure 2-3.

Congratulations, you just created and published CRA on the development server! The React project includes all the libraries that come with CRA out of the box.

If you examine the code and files that were created for us (see Figure 2-4), you can see that there are many files that make up our single-page application. Examples include App.js and index.js. We also have style sheet files such as App.css and index.css.

React was originally designed to be a SPA, and normally we would need to write a script to combine our files into one file or a chunk of files that we will need to include in our application for the code to be available. However, since we are using CRA, all of that is done for us automatically.

CRA uses Webpack and Babel to pack our files into a single index.html page and into files called bundle.js and *.chunk.js. It may generate other files as well as needed.

When we type the command yarn start, the script initiates an NPM script that creates a development environment for us. The script caches our files in memory and serves them when we navigate to the URL.

Take a look at Figure 2-5, which illustrates this process.

To view the application’s source code and check the files created for us, go to this URL on Chrome: http://localhost:3000/.

Or we can also inspect the HTML DOM elements with Chrome DevTools. On Chrome right-click and select Inspect to view the DOM tree.

The bundle.js file, as the name suggests, bundles our JavaScript source code files into one file, and the *.chunk.js files bundle our styles into chunks of files. You can go to the URLs of these files to view the content.

The heavy lifting is done inside our project in a folder called node_modules that includes many libraries that are dependencies that our project is using. Take a look at Figure 2-6.

You can find the list of the dependencies in the node_modules folder in a file called package.json, which is used by Node.js. The file contains information about our project such as the version, the libraries are using, and even the scripts Node.js will be running.

Each dependency holds the name of the library and a version number.

If we check our node_modules folder, it is full of other developers’ libraries. In fact, there are more than 1,000, and when we downloaded our CRA, it took a while (depending on your Internet speed, of course) to download the project.

That is because of all these dependencies. Where are all these dependencies coming from then?

Each library includes other dependencies or subdependencies, so although we don’t have these libraries listed in our project’s package.json file, they are listed in other libraries or sublibraries.

Public Folder

The reason is that the NPM scripts are generating our index file based on this file as well as the files it generates. If we wanted to publish our app to production, for example, we would run a different command (build instead of start), and different files would be generated. You will learn more about publishing to production as well as how to optimize the JS bundle chunks later in this book.

Create-React-App with TypeScript

CRA comes in two flavors: vanilla (JS) and TypeScript. Notice that our application files src/public/App.js and src/public/index.js have .js file extensions, which means they are JavaScript files. CRA sets our project out of the box to JavaScript as the default setting.

However, when it comes to writing React code, there are two main options. We can write our code with JavaScript (JS) or with TypeScript (TS). The vanilla-flavor CRA you downloaded is set to JavaScript. However, we will be writing our code in this book using TypeScript, as we mentioned in the previous chapter.

CRA Template with TypeScript

We are using the --template flag with TS, and we name our project starter-project.

The app should open on port 3000 just as we did it before: http://localhost:3000/. See Figure 2-7.

Notice that the copy changes on the app to src/App.tsx (from Figure 2-3), as well as that the files changed from .js to .tsx in our app.

When using Yarn, we use the -D flag (which stands for developer “dependencies”) when we want to update our project’s package.json to include a library under devDependencies. The package.json file holds the project’s libraries.

The types we just installed include TypeScript for Jest tests and ESLint. CRA comes bundled with Jest and Jest-dom to test our application. We will be learning about testing our application with Jest and ESlint later in this book, but I wanted you to be aware that we are setting up these types already.

In addition to changing our code files from .js to .ts, the template project also includes a file called tsconfig.json. This file holds a specific setting for the compiler that will compile our files from .tsx down to .js with information such as what we targeting such as ES6 and other settings.

CSS Preprocessors: Sass/SCSS

Cascading Style Sheets (CSS) is a core functionality in HTML, and you need to familiarize yourself with CSS if you are not already. This goes for working with HTML in particular and in React specifically. On large projects, CSS preprocessors are often used to complement CSS and add functionality. We will discuss these later in this book.

In terms of CSS preprocessors, there are four main CSS preprocessors that are often used with React projects: Sass/SCSS, PostCSS, Less, and Stylus.

Sass/SCSS has the upper hand for the majority of today’s projects, so that’s what we will be using. In fact, Sass/SCSS is the most popular and will probably get you the best-paying job as a developer according to surveys (https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results). If you want to see a comparison between the different CSS preprocessors, check out my article on Medium: http://shorturl.at/dJQT3.

Just like with CSS, if we want to use SCSS modules in TypeScript the same way we would use them in JavaScript, we need to install Webpack’s loader for Sass/SCSS. It’s called scss-loader.

Redux Toolkit/Recoil

The Redux toolkit is the standard way to organize React app data and user interaction so your code doesn’t get messy.

Material-UI CSS Framework

A CSS framework (or CSS libraries) is based on the concept of bringing a more standardized practice to your web development. Using a CSS framework, you can speed up your web development effort versus just using CSS (or other style sheets) as it allows you to use predefined web elements.

Both Bootstrap and Material-UI are great CSS frameworks in certain projects to get started right away, without spending hours creating your own components.

To get Material-UI to work seamlessly with TS, we also need to update some settings in our tsconfig.json file so that the TS page on React doesn’t encounter any errors.

Styled Components

Styled Components go hand in hand with Material-UI. Styled Components is a styling solution, and it can also be used beyond Material-UI.

React Router

React is based on a single-page application; however, most applications need multiple views in React’s single-page application paradigm.

Building an application on a single component is not ideal as the code and complexity can grow and it can become a developer’s nightmare to maintain and test. We will learn more about creating components and subcomponents in the next chapter.

To handle routing, there are many tools to choose from: React Router, Router5, Redux-First Router, and Reach Router, to name a few.

Jest and Enzyme + Sinon

Jest is a JavaScript unit testing framework and the standard for React applications. It was built to be used with any JavaScript project, and it comes with CRA out of the box. However, we do need Jest-dom and Enzyme to enhance the capabilities of Jest.

For Enzyme we want to install the React 16 adapter (that’s the latest version at the time of writing but likely to change to 17). Also, we need to install react-test-renderer so we can render React components to pure JavaScript objects without depending on the DOM or a native mobile environment. Later in the book, we will be using Jest’s snapshot testing feature to automatically save a copy of the JSON tree to a file and use tests to check that it hasn’t changed.

Sinon

Jest and Sinon serve the same purpose, but there are times that you may find one framework more natural and easier to work with for the specific test. We will cover Sinon later in this book.

E2E Testing:  Jest and Puppeteer

Testing is at the core of delivering quality software. There is a hierarchy in testing, and E2E is usually only considered after unit testing and integration testing are done.

End-to-end testing (E2E testing) is a testing method that includes testing our app workflow from beginning to end. What we are doing in E2E is replicating real user scenarios so our app is validated for integration and data integrity.

That’s all you need to get set up with Jest and Puppeteer and to configure everything and see an example of E2E testing for App.tsx. You’ll learn more about E2E later in the book.

Component Folder Structure

When you work on a React project and the code keeps growing in size, it can become overwhelming with the number of components you may have, and then it can be hard to find them.

A neat way to organize your components so it makes them easier to find is to split the components into a separated component type like in Figure 2-8.

This is my recommended folder structure to get started; however, feel free to use it as a suggestion only.

To follow this structure, create these folders:

Generate Templates

As developers, we don’t like writing code again and again. generate-react-cli is a helpful utility we can use. It is based on templates, so we don’t need to write our code again and again.

If you come from Angular, you probably love the Angular CLI and that it can generate templates for your project.

Because it’s the first time running the script, it will install and create generate-react-cli.json with the options you chose the first time you used the tool, but feel free to change these manually.

A cool feature is that we can create our own template. Here is an example of creating a custom template for React pages.

Don’t dig into the template code at this time. We just set these templates, and we will be going over the code and what it means in the next chapter as we build our components.

At this point, you should have a template folder with the files shown in Figure 2-9.

You can repeat the same steps for components of the type page or anything you like.

Linting: ESLint and Prettier

Luckily, this can be done.

Lint is a tool for analyzing your code. It is a static code analysis tool created to identify problematic patterns found in code. Prettier is an opinionated code formatter.

Lint tools can analyze your code and warn you of potential errors. For it to work, we need to configure it with specific rules.

Airbnb, as part of its style guide, provides an ESLint configuration that anyone can use as their standard.

ESLint is already installed on Create-React-App, but it’s not optimized with a styling guide and for TypeScript.

Read my article (https://medium.com/react-courses/react-create-react-app-v3-4-1-a55f3e7a8d6d) for more information.

Follow the instructions at shorturl.at/otuU8 to update the following files or just copy them from the CRA MHL template project.

We are ready to let Lint do its job and change our code (see Figure 2-10).

$ yarn run lint

Now confirm we can still compile by checking port 3000 or running yarn start if you stopped the process (see Figure 2-11).

$ yarn start

Other Useful Libraries

We will install a couple of useful libraries that will come in handy later in the development exercises in this book.

Additional Useful Utilities