What are React.js Dependencies?

How to create a Hello World app in React.js »

When you create a React app, it’d install tons of dependencies (Reactjs modues) that make the application work. These dependencies are packages, containing hundreds of files and folders that help execute the features provided by React. These so called dependencies can be broadly classified in five categories: React Core Modules, ES Modules, Webpack, and Babel.

  1. React Core Modules: These are the modules that are part of the React library. Conversion of Javascript code to HTML, CSS and rendering of those elements at appropriate positions is done by these modules. Without these modules, no other dependent modules can work. Some of these modules are react, react-app-polyfill, react-is, react-scripts, etc. You can find these modules inside your project directory under “node_modules” folder.
  2. ES Modules: These are the modules that contain ES Lint as well as ECMA script syntax dictionary. ES Lint modules are the ones which help in analysing and checking valid javascript syntax, report them in the form of errors and warnings. The checking is done through comparison of predefined guideline of syntax dictionary which are stored in the ECMA script dictionaries with the user written code.
  3. Webpack: Webpack is a Javascript module bundler. It takes in javascript modules (which might have dependencies) and convert them into static assets (files) without any dependencies. These static assets are easily understood by modern web browsers.Webpack
  4. Babel: The version of Javascript that you’ve been learning is ES5 and ES2015. Each version of Javascripts have special features, functions and upgrades available to it, unavailable to previous versions. There are multiple ES versions, released each year after 2015. They are ES2016, ES2017, ES2018, ES2019. Since new features are added to Javascript each year, it’d be awesome if we could use all the features available across all the versions of Javascript.However, web browsers do not support all or some of the newest features added in the recent years. This is because not all the web browsers are updated as frequently with new language syntax support. For instance, ES2016, ES2017, ES2018 and ES2019 are poorly supported although modern browsers support ES5 very well. Therefore, although these newly added features make our lives easier as developers, however, if they ain’t accessible by end-users then there’s no point.So to get around this, we use Babel. A command line tool that takes in any version of javascript code and outputs a web-browser supported version. For example, we can write ES2018 code and feed it to Babel, it’ll output the equivalent ES5 code.Babel internally contains, a large amount of packages as well. And that explains why we see that huge amount of packages being installed when we created our React app.Babel