In
the previous post we saw how to setup the environment to develop a Hello World React App, we saw that we used a set of npm packages and tools like
webpack, bable etc to setup the environment, in this post we shall see the
purpose of each of the tools in setting up the React Environment.
NPM
npm stands for Node Package Manager, npm helps us the install the required packages for React development. When we create a project using npm (npm init) it creates a package.json file which is like the project file, it specifies all the required packages to execute the React Application. We can also specify commands to be executed on various actions like build, start, test etc. In our example we specified that on build webpack should execute in development mode as follows.
"start": "webpack-dev-server --open --mode development"
Webpack
Webpack is a module bundler, its main purpose is to bundle all the dependent files into a single .js file which helps optimize the page load. Loading many individual file to the browser is complex and makes the page load slower, Webpack helps to optimize this by bundling all the dependent files into a single JavaScript file.
Bable
Babel is a JavaScript compiler which is used to transform ES6 JavaScript code to ES5 JavaScript which the browsers can understand. This transformation is called transpilation. React components are generally written using ES6 classes and JSX syntax, bable loaders are used to transpile ES6 and JSX code to core ES5 JavaScript.
NPM
npm stands for Node Package Manager, npm helps us the install the required packages for React development. When we create a project using npm (npm init) it creates a package.json file which is like the project file, it specifies all the required packages to execute the React Application. We can also specify commands to be executed on various actions like build, start, test etc. In our example we specified that on build webpack should execute in development mode as follows.
"start": "webpack-dev-server --open --mode development"
Webpack
Webpack is a module bundler, its main purpose is to bundle all the dependent files into a single .js file which helps optimize the page load. Loading many individual file to the browser is complex and makes the page load slower, Webpack helps to optimize this by bundling all the dependent files into a single JavaScript file.
Bable
Babel is a JavaScript compiler which is used to transform ES6 JavaScript code to ES5 JavaScript which the browsers can understand. This transformation is called transpilation. React components are generally written using ES6 classes and JSX syntax, bable loaders are used to transpile ES6 and JSX code to core ES5 JavaScript.
No comments:
Post a Comment