If you have struggled to set up a React Application from ground zero, you probably know that starting a React project can be quite painful. There’s a lot of tools to know and configure before even writing the first line of your actual application code.
And then came create-react-app cli from the great React Engineering team at facebook (currently led by Dan Abramov). So lets try to know this powerful tool a little bit more.
First thing first, install the create-react-app (CRA) npm package, globally in your machine by running the following command:
npm install -g create-react-app
Now that we have the CLI installed globally, we can create our first React application:
npx create-react-app hello-world
After CRA installs all the packages, we’ll get an output like the following showing a list of commands we can run:
And now we’ve got a nice and simple React application running at
http://localhost:3000/. Open it in the browser. It now also display the LAN address in addition to the localhost address so that we can quickly access the app from a mobile device on the same network.
The project codes are pretty standard. Take a look at
In the above, we have a
'root' and as we can see below the
src/index.js will mount the
App component into the
create-react-app cli has a quite exhaustive docuementation. The underpinnings of Create React App are housed in the
react-scripts package. This package contains scripts for building, testing and starting the app. The bin script is responsible for calling the respective scripts. When we do an
npm install in the root folder of our application, npm creates a symlink in the
node_modules/.bin folder to the react-script.js so that it can be directly used from the CLI.
There are four default commands bundled into create-react-app:
eject. Also, notice that create-react-app now uses Yarn by default instead of just standard NPM. Lets understand them a little bit more
npm run build or
npm test or
“Starts the test runner.” create-react-app now ships with Jest as its test runner.
npm run eject
npm run eject executes the eject.js inside the react-scripts package.
The documentation says - “If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project. Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.”
What this does is it pulls our application out of the context of the create-react-app framework and into a standard webpack build. This removes the react-scripts dependency from our project completely, and copies all scripts and config files right into our project as separate dependencies like Babel, Webpack, etc. The package.json of our application is also rewritten since react-scripts no longer exist & hence, to be be able to run, test & build the app, all of those scripts are put in scripts/ so that they can be referenced in the scripts object in package.json
After ejection there will be additional scripts and config directory and ~10 new files with 50–200 lines of code at each file.
Changing the development server port
By default the app will open in port 3000. To change it, create a file called .env in the root of your project and specify port number there. Like
And this is the source code if you are interested.
Let’s have a deep dive inside the source code by looking at the ./node_modules/react-scripts/scripts directory and The build.js function
The build.js runs the webpack configuration to compile and create a bundle ready for production.
And then the start.js file starts the Webpack dev server.