Learn how Create React App hides

Creating a React application requires you to set up build tools such as Babel and Webpack. These build tools are required because React’s JSX syntax is a language that the browser doesn’t understand.

To run your React application, you need to turn your JSX into plain JavaScript, which browsers understand.

Create React App (CRA) is a tool to create single-page React applications that is officially supported by the React team.

The script generates the required files and folders to start the React application and run it on the browser. This allows you to focus on coding your application without having to bother with build configurations.

The dependencies that create-react-app uses

Although you can’t see Babel or Webpack listed as dependencies in the generated package.json file, CRA still uses Babel and Webpack under the hood. It’s just that the configurations are hidden from you inside the react-scripts package.

When you look into the package.json file of react-scripts, you’ll see all the packages needed to make React works in the browser. It has 58 packages, from line 31 to 88

That’s a lot of packages! Let’s break it down a little to understand what these packages are used for.

Please note that this article was written using Create React App version 4.0.1 as the reference. This article will help you understand what happens under the hood when you use Create React App NPM scripts.

#react #npm #javascript #reactjs #node