What is create-react-app and How to use it for Better React Apps Development
React is a great framework when it comes to a high performance, component-based and rich framework that allows you to build stunning user interfaces but when it comes to creating and configuring a React project you will feel a bit disappointed along the way since it has a lot of configuration to be done and a lot of things to do behind the scenes besides the error that you will get on your way to making a basic project setup for a simple app.
Here where the real benefit of using a Toolset or a CLI for creating and managing react projects comes in handy, creat-react-app is a CLI for creating and configuring react project in an easy and smooth way that allows you to setup and start developing your app without carrying much about the configuration, it does all the config stuff behind the scenes with a lot of other features like ES6, ES7 and ESNext, CSS Preprocessors.
Since you will be using create-react-app a lot during your journey so we will be installing it globally
npm install create-react-app --global
Now let’s create a project. Make sure to cd in the path you want to create the project on.
The project will start and it will take some time to finish since it will install the needed dependencies and link them plus it will do all the configuration and the creation of a boilerplate project for you to get started with.
Now once the project setup is complete you can open up the create the project folder with your favorite code editor, I will be using VSCode.
public/ All the static files and html pages will be there public/index.html is the main page (cannot be changed!) src/ you app's source code (Components, stylesheets...) src/index.js is the main entry point (cannot be changed!) [name].test.js is a testing file for running tests for a specific component or module .gitignore for telling git version-control which files to ignore in staging package.json is the main file that describes your nodejs project with all it dependencies
the Main entry point module is src/index.js where Webpack will start loading and bundling your files so make sure to keep it there with the exact name otherwise it will fail.
You can also add stylesheets to your project either regular CSS or Preprocessors like (SASS or LESS) all you need to do is install their loader so it could work alongside Webpack to load and compile SASS/LESS stylesheets to plain CSS.
npm install node-sass --save-dev
a Webpack compilation & bundling process will start alongside a development local server that allows you to change and reload the page instantly without needing to manually refreshing it happens automatically once the files changes and you save changes which helps a lot during development.
To run development
npm run start
In case the above command fails it most likely the react-scripts package has been installed during the configuration and setup of your project so you need to install it manually.
npm install react-scripts --save-dev
After it is installed you can run the start command normally.
The testing command is used to run all the test located on your project, test files looks like [name].test.js it has some testing algorithm that takes a part of your application or a React component and test it against its logical to see if it does what its actually about or it fails at some point, testing is really important when finishing the application and before publishing and distributing it publically especially if you are dealing with a large-scale project.
There are Frameworks used specifically with React (Jest, Cypress…)
npm run test
Building, is the last phase of development which comes before publishing and distributing. So when you are running on the development mode and developing your application not all the app’s files and configuration are exposed so you can actually distribute your app publicly for people to use or for ex: deploy it to your server, so you first need to build the final app into a sperate folder (create-react-app) does this perfectly then you can deploy it.
npm run build
Ejecting is a process of exposing all the hidden configuration files that create-react-app created and handles for us behind the scene. So you eject this configuration files and scripts so you can add for ex: (Third-party Webpack Plugins) or have you own Webpack custom configuration with Babel, this step will take the advantage of using create-react-app from you and give you a regular setup react project. You cannot go back once you Eject is a one-way operation.
npm run eject
Only run this when you know what you’re actually doing!
You can watch the Video tutorial for more detailed info and instructions also, make sure to check out the official Documentation for advanced examples and a full list of available commands and tools.