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.
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 <div> called root and as we can see below the src/index.js will mount the App component into the root <div>
The underpinnings of Create React App are housed in the
react-scripts package. This package contains scripts for the building, testing, 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, Moves the innards of
react-scripts into my project's directory, basically enabling me to abandon the configuration that
react-scripts provides, tweaking the configuration to my liking.
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. So now we will see every bit of what makes my create-react-app boilerplate work.
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 from packages/react-scripts/scripts/start.js if you are interested.