What is create-react-app and How to use it for Better React Apps Development

List Of Content

ADS Area (CARBON)

ADS Area (CARBON)

 

Getting Started

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.

create-react-app my-app

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.

Project Structure

Once you open up the setup project folder you will find a couple of config and javascript files already created and configured for you to use.

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 

React Scripts

create-react-app will come with a package called react-scripts pre-installed (most of the times) on your setup project that has all the Webpack and Babel configuration that you will need to run and develop a React Application and it gives has a couple of scripts to run for example to develop the application so we need to run a development server that compiles and bundles the React ES6 code to plain javascript that the browser can understand then we can see our application in development with Hot-Reload feature to reload server page on new changes.

App Development 

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.

Testing

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

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 

You notice a new folder gets created once the building process is done (build/) that has all the needed javascript files (bundles and chunks) plus web pages, stylesheets and static files (images, SVG...).

Ejecting

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!

 

What's Next

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.

 

 

Share Tutorial

Made With By

Ipenywis Founder, Game/Web Developer, Love Play Games