Create React App

The React team has provided a utility called create-react-app. It is the recommended way to scaffold out a new React single-page application.

It already follows the best practices suggested by the React community, creates a set of starter files and folders, and along with React, also installs and configures several tools to help hit the ground running, such as Babel and Webpack.

Getting Ready

It requires Node to be installed on the machine. To check, if Node is installed run node -v in the terminal.

Installing Node automatically installs npm (Node package manager). npm is a separate project from Node.js and tends to update more frequently. To upgrade npm, run the command:

sudo npm install -g npm@latest

Setting Up the Boilerplate Application

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

A package runner tool npx that comes with npm 5.2+ and higher, can help easily install and run create-react-app. It also ensures the latest version of create-react-app is used.

Refer to React.dev official documentation for any recent changes.

Open the terminal and run the command to install React app

npx create-react-app myReactApp

(Feel free to replace myReactapp with whatever name you want, as long as it doesn’t contain capital letters :-)) as I got an error when I added a capital letter ;)

Upon completion, it shows some quick tips on how to use the application.

React App Structure

Open the created app in VS Code or any editor of your choice.

create-react-app has taken care of setting up the main structure of the application as well as a couple of developer settings. Most of what you see will not be visible to the visitor of your web app. React uses a tool called webpack which transforms the directories and files here into static assets. Visitors to your site are served those static assets.

.gitignore

This is the standard file used by the source control tool git to determine which files and directories to ignore when committing code. While this file exists, create-react-app did not create a git repo within this folder.

package.json

This file outlines all the settings for the React app.

• name is the name of your app
• version is the current version
• "private": true is a failsafe setting to avoid accidentally publishing your app as a public package within the npm ecosystem.
• dependencies contains all the required Node modules and versions required for the application. In the picture above, you’ll see six dependencies. The first three, as you may have guessed, are for the purpose of testing. The next two dependencies allow us to use react and react-dom in our JavaScript. Finally, react-scripts provides a useful set of development scripts for working with React. In the screenshot above, the react version specified is ^18.2.0. This means that npm will install the most recent major version matching 18.x.x. In contrast, you may also see something like ~1.2.3 in package.json, which will only install the most recent minor version matching 1.2.x.
• scripts specifies aliases that you can use to access some of the react-scripts commands in a more efficient manner. For example, running npm test in your command line will run react-scripts test --env=jsdom behind the scenes.
• You will also see two more attributes, eslintConfig and browserslist. Both of these are Node modules having their own set of values. browserslist provides information about browser compatibility of the app, while eslintConfig takes care of the code linting.

node_modules

This directory contains dependencies and sub-dependencies of packages used by the current React app, as specified by package.json. You may be surprised by how many there are.

Running ls -1 | wc -l within the node_modules/ directory will yield more than 800 subfolders. This folder is automatically added to the .gitignore for good reason! Even with all these dependencies, the basic app will only be around 50 KB after being minified and compressed for production.

package-lock.json

This file contains the exact dependency tree installed in node_modules/. This provides a way for teams working on private apps to ensure that they have the same version of dependencies and sub-dependencies. It also contains a history of changes to package.json, so you can quickly look back at dependency changes.

public

This directory contains assets that will be served directly without additional processing by webpack. index.html provides the entry point for the web app. You will also see a favicon (header icon) and a manifest.json.

The manifest file configures how the web app will behave if it is added to an Android user’s home screen (Android users can “shortcut” web apps and load them directly from the Android UI). You can read more about it here.

src

This contains the JavaScript that will be processed by webpack and is the heart of the React app. Browsing this folder, you see the main App JavaScript component (App.js), its associated styles (App.css), and the test suite (App.test.js). index.js and its styles (index.css) provide an entry into the App.

The serviceworker.js is not installed anymore with CRA. It is installed as a separate template if you are creating progressive web apps (PWA).

As the React app grows, it is common to add a components/ directory to organize components and component-related files and a views/ directory to organize React views and view-related files.

Starting the React App Development Server

As was stated in the success message, run the npm start command in the app directory to begin serving the development server.

A tab in the browser will be opened that points to http://localhost:3000/ running the web application. Open App.js file and edit the text within the paragraph tags to any random text you want and see the changes live on the link.

The next step is to start editing this app with everything learned in React 101 Series.

EDIT: 7 May 2023

React with Vite

Recently the create-react-app method of creating react websites has been deprecated because of the size of the project it creates and the lack of recent updates.

Vite + React was the first alternate way I started with and got an instant liking for it. It is very intuitive, super fast, and easy to manage.

Running the following command on the terminal will set you up with the React project:

//it will install vite if not installed and follow instructions for project
//creation.
npm create vite@latest

It will ask for the framework you want to use and variant (with or without typescript) and it's ready to run. Open the local URL it points to once you execute the command npm run dev .