The breakthrough in technology has brought a whole new range of tool suite for developers to make the software development process more efficient. React App is among one of them! A prominent tool recommended by the React community to create single-page applications (SPAs) and also get familiar with React.
For one of our clients- a giant retail travel outlet - who went out to get a realistic travel budget in mind for the travelers to plan ahead and avoid spending shocks along the way we built a budget planner.
Built on React.js on top of Drupal, it is a dynamic feature and can be added anywhere in the website (under blogs, services) without coding.
Creating React App doesn't require configuration of web pack (bundler for modules) and babel (compiler). They come inbuilt. Developers can right away start with coding here. However, the drawback is that they won’t be able to get an idea about things happening in the background.
If we set up React App without using the Create React App, then we will be able to know which all NPM packages/components are needed to make react app working.
About React App
Create React App was built by Joe Haddad and Dan Abramov. The GitHub repository is well-maintained by the creators to fix errors and deliver updates frequently.
It is a prominent toolchain for building apps quickly and efficiently. A toolchain can be defined as a set of different s/w development tools that are optimized to perform specific functions. For example, the C++ development process requires the compiler to compile the code and a build system, say CMake, to manage all the dependencies. Similarly, the React App is used to create “hello-world” applications.
At the time of running this JSX code (XML/HTML- like syntax used by React that extends ECMAScript) in the browser, it will drop an error. Because the JSX code browser doesn’t understand and that is when we require Babel and Webpack.
NPM install takes 3 exclusives, optional flags that either save or duplicate the package version in your main package.
1. JSON: -S, ~save:
The package appears in your dependencies
The package appears in your devDependencies
3. -O, ~save-optional:
The package appears in your optionalDependencies
We will use Flag--save-dev to differentiate between built dependency & app dependency.
Once installed successfully, you can check the package.json file to check the differences.
Check the steps below for webpack configuration-
Step 1- Add below snippet in this file
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');