React project setup using create-react-app

What is create-react-app command?
The 'create-react-app' is a command-line tool used for quickly setting up a new React.js project with a predefined folder structure, build configuration, and development server. It automates the process of setting up a React project, allowing developers to focus more on writing code rather than configuring build tools.

When you run 'create-react-app' followed by a project name, it generates a new directory with all the necessary files and dependencies to start building a React application. This includes setting up Babel for JavaScript transpilation, webpack for bundling assets, and a development server for live previewing.

Here's how you typically use it:

npx create-react-app my-react-app

This command creates a new directory named 'my-react-app' and sets up a basic React project structure inside it. After the setup is complete, you can navigate into the directory ('cd my-react-app') and start developing your React application.
Note that create-react-app is a command-line tool, not a command itself. When you use it in the command line, you are invoking the "create-react-app" tool to generate a new React project.

What are different components of create-react-app command line tool?
The 'create-react-app' command-line tool encompasses several components that work together to scaffold and manage React.js projects efficiently. Here are some key components:

1.React Scripts: This is a collection of scripts and configuration used by Create React App. It handles tasks like starting the development server, building the production bundle, and running tests.
2.Webpack: Webpack is a module bundler. Create React App uses webpack under the hood to bundle all the JavaScript, CSS, and other assets of your application.
3.Babel: Babel is a JavaScript compiler that lets you use next-generation JavaScript features in your code and then converts it into a version of JavaScript that can run in current browsers.
4.ESLint: Create React App includes ESLint, which is a static code analysis tool for identifying problematic patterns found in JavaScript code. It helps enforce coding standards and improves code quality.
5.Jest: Jest is a testing framework for JavaScript code. Create React App comes with Jest preconfigured to run unit tests and integration tests.
6.Development Server: Create React App provides a built-in development server that allows you to run and test your application locally during development. It automatically reloads the page as you make changes to your code.
7.Service Worker (optional): Create React App includes an optional service worker configuration for adding offline capabilities to your application, such as caching assets for faster subsequent loads and enabling functionality while offline.

These components work together seamlessly to provide a smooth development experience for React.js projects, allowing developers to focus on writing code rather than configuring build tools.

How can I install create-react-app tool?
To install the 'create-react-app' command-line tool, you typically use 'npm', the Node.js package manager. Here's how you can install it globally:

npm install -g create-react-app

This command installs 'create-react-app' globally on your system, making it available as a command-line tool that you can run from any directory.
Alternatively, you can use 'npx', which comes with 'npm' (version 5.2.0 and higher) to run the tool without explicitly installing it globally:

npx create-react-app my-react-app

In this command, 'npx' downloads and runs 'create-react-app' on the fly, creating a new React project named 'my-react-app'.

Both methods achieve the same result of setting up the 'create-react-app' tool for creating React projects. The advantage of using 'npx' is that it doesn't require a global installation and always fetches the latest version of 'create-react-app' when invoked.

Example:

Run the following command to check the version of create-react-app tool installed at the system.

PS C:\Users\akshr\Desktop\apps\react_apps> create-react-app --version

At my system the version is 5.0.1

Run the following command to create a new react project with initial setup.

PS C:\Users\akshr\Desktop\apps\react_apps> create-react-app react-appk

The following message appears during project setup.

      Creating a new React app in 	C:\Users\akshr\Desktop\apps\react_apps\react-appk.
      Installing packages. This might take a couple of minutes.
      Installing react, react-dom, and react-scripts with cra-template...
      added 1482 packages in 10m
      262 packages are looking for funding
      run `npm fund` for details
      Initialized a git repository.
      Installing template dependencies using npm...
      added 63 packages, and changed 1 package in 44s
      262 packages are looking for funding
      run `npm fund` for details
      Removing template package using npm...
      removed 1 package, and audited 1545 packages in 18s
      262 packages are looking for funding
      run `npm fund` for details
      8 vulnerabilities (2 moderate, 6 high)
      To address all issues (including breaking changes), run:
      npm audit fix --force
      Run `npm audit` for details.
      Created git commit.
      Success! Created react-appk at C:\Users\akshr\Desktop\apps\react_apps\react-appk
      Inside that directory, you can run several commands:
      npm start
      Starts the development server.
      npm run build
      Bundles the app into static files for production.
      npm test
      Starts the test runner.
      npm run eject
      Removes this tool and copies build dependencies, configuration files
      and scripts into the app directory. If you do this, you can’t go back!
      We suggest that you begin by typing:
      cd react-appk
      npm start
      Happy hacking!

The message at the end 'Happy hacking!' implies that the project setup is properly done.

The project folders and files created in react-appk project folder is depicted below.

Open the package.json file. We get the following JSON code.

Package.json:

{
  "name": "react-appk",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Project name, its version can be viewed in the package file. All the dependencies(like react, react-dom, react-scripts) installed appear in dependencies key. The scripts that can be run in the command line mode appears in scripts.

Open the Visual Studio Code in project folder. We get the following project structure. We will discuss about all important folders and files in separate post.

Project Structure: