Official Blog of Kunsh Technologies

ReactJS App Development with the help of Create-React-App

6/20/2018

It is quite time-consuming and intimidating to set up the tools to develop a react based application. There are many things to consider in this way. For example, it starts with setting up Babel and further transpiling the JSX into browser-ready code. Then, configuring Webpack for bundling your project assets and many more things are there in this way. Fortunately, the create react app is there for a quick and easy solution.

The developers of Facebook, who have created React Framework have also founded the create react app so that you can have a massive head start when you are building up the React based apps. It saves your efforts and time both to set up and configure on your system. Here, you just have to run one command and Create react App will set up the tools that you need to start your React project.

In this post, I am going to tell you how you can get your React JS development projects up and running quickly with the help of Create React App.

Installation of Create-React-App

With the help of Create React App, you get a modern build setup for your react based project in no time. However, to start with it, you will have to install the Create React App globally. You need to open your terminal or console and then run the app:

npm install -g create-react-app

‘create-react-app’ is the command with the help of which you can create a new react based project and later include the name of your project. It will look like:

create-react-app my-app

Command running installs the dependencies that are needed for building your project, and it generates the initial structure of your project too. Either you can use yarn or run several commands inside your project directory follow below:

  • Npm start command opens up the development server with auto-loading the page every time you are making any edits.
  • Npm run command build leads to bundling the app into static files for production.
  • Npm test command starts the test runner for testing your app with Jest as you build it.
  • Npm run eject command takes out your app off the Create React App setup that lets you customize your project configuration.

Using Create-React-App

When you put the npm react start command, the server automatically starts and launches the app in the browser on localhost:3000. Additionally, the LAN address is displayed on the console output to make you access the app from a mobile device using the same network.

Babel and Webpack are used in Create React App under the hood, but it only generates those files that you actually need to work on your React project. If you have already built up the react apps earlier, then you would not need to again configure the files for babel, Webpack, ESLint etc. That wasy, you can just focus on building your app.

When you use the Create React App for creating your reactjs development project, you get the latest versions of react and react DOM installed to your setup along with the latest version of the react-scripts i.e. a development dependency that deals with the management of all other development dependencies that start, test and build your app.

Default Progressive Web Apps

While producing react apps through this procedure, you can find your react apps much faster and reliable than the traditional web apps along with providing the engaging mobile experiences.

This set up facilitates you with a fully functional and offline-justify Progressive Web App, by default. Web applications when get associated with a collection of modern web technologies for providing you the native app-type experiences whatever device they are used in, they are the Progressive Web Apps. These apps get benefitted of the latest browser features for making your apps more performant, safe and reliable. They even send the push notifications and work when there is no internet connection available.

Built-in Testing with Jest

When you use the Create React App, you already get the Jest testing framework configured. Jest is used to write the unit tests of your components along with making logic to make sure that they work as intended.

If you use the filename convention to name your files like .spec.js or .test.js or if you have placed inside your test files i.e. a __tests__ folder, Jest will retrieve those files and run your tests.

The command npm test launches the test runner in the watch mode. This means whatever times you save a file, it will re-run your tests, similar to the recompilation of your code with the command npm start.

Error Messages

You get the helpful runtime error messages in the browser in addition to the errors displayed in the console with Create React App. You get a compilation error every time you do a typo mistake or forget to import a module. If your app crashes during the Reactjs Development Process with having several errors messages, an error overlay will be displayed by the Create React App to let you focus on one error at one time. This is really amazing for error handling.

Production Build

When you are ready to create a production-build version of your app, you should run the command ‘npm run build’ and the app will generate a build folder including all the static files that can be further used on a production web server.

Ejecting

All the build settings get preconfigured when you create a project with Create React App. Hence, you will not be able to make any changes to the build setup. But you do not need to be locked in to the set up i.e. the build tool and configuration choices of Create React App. You have some options to customize the setup as per your liking with the help of eject command. This command gives you full control over configuration files and dependencies.

Through ejecting feature, the Create React App configuration gets forked and moves into your project. Important thing to remember is to remain careful with running eject command as it is a permanent action. You cannot go back after running the eject command.

Kunsh Technologies Kunsh Technologies