Why use create-react-app?

create-react-app is a commonplace, user-friendly starting point for building a React application. Built by Facebook developers, it’s a fantastic tool that gives developers a generous head start when building a React app. However, it’s easy, efficient nature also allows developers to glaze over the features and configurations that it readily implements. For the curious minds who want to understand what is happening under the hood, let’s take a deeper dive into create-react-app.

create-react-app Command

Running create-react-app *appName* immediately installs the dependencies needed for a React project and also generates an initial file structure. It creates a directory called appName, which contains three files and three folders (with React v3.4.1, as of this writing).

Generated Files
• package.json contains dependencies, defines project properties and descriptions, author and license information, and scripts
• package-lock.json secures specific version numbers for the dependencies
• README.md introduces and explains the project

Generated Folders
• src contains the functional code for the app (JS and CSS)
• public contains the HTML for the app
• node_modules is where npm modules are saved

Once the create-react-app command is run, it first checks your system and the specified output folder. If no errors arise, the createApp function runs, checking log files to ensure the output folder is safe. Again, if no errors occur, the command will move on to build the package.json file. This checks the installed versions of node, yarn, and npm in order to select the proper version of react-scripts to install. At this point, it’s also determined whether yarn or npm will be used - if yarn is installed, it will be used, otherwise the default is npm.

The command will then continue the installation with run(). This generates a dependency list, which will include react, react-dom, and the correct version of react-scripts. Based on the information previously gathered, packages are installed either from the internet or from the local cache if you’re offline. The packages are installed asynchronously to the node_modules folder, locking in the specific version number in the package-lock.json file. If for any reason package.json fails, it will provide a warning and delete both .json files as well as node_modules.

Assuming all goes well, the command will move on to check the package.json and package-lock.json files, loading package.json into a variable called appPackage. Then, it begins adding to the json. It adds several useful commands, which are outlined in the following section, along with defaultBrowsers, which targets appropriate browsers.

This wraps up the creation of package.json. Finally, the command will check for a readme file and name it appropriately. The src and public folders are generated to house the code for the application and with that, you’re ready to begin building out your React app.

Basic React Commands

Within the React project directory, several commands are accessible for use.

• npm start launches the development server and automatically reloads the page with any edits
• npm run build bundles the app into static files for production
• npm test starts the test runner and enables testing with Jest during development
• npm run eject removes the standard create-react-app setup, allowing for custom project configuration

The run build command executes the build field from package.json scripts, which will perform any necessary building or prep tasks that you define for your project, prior to it being used in any other project.

Jest is automatically configured and used to write tests for your components and logic. The test command launches a test runner and upon save, it will run your tests.

By using the eject command, you can circumvent the preconfigured build settings that create-react-app generates. It’s important to note that once you eject, it cannot be undone. Ejecting gives you total control over the configuration files and dependencies.

Conclusion

Create-react-app is a great tool for optimizing efficiency when developing a React app. It’s a well-proven configuration and build tool that quickly implements a project’s file structure and dependencies. As with all tools, it’s important to have a fundamental understanding of how it works and what it does. I hope this brief dive into create-react-app generates some deeper understanding of how this tool operates.