Skip to main content
Kinetic Community

React Bundle Training

The React bundle training course develops basic and intermediate skills for bundle development. The course will start from a modified version of the React Kinops catalog bundle developed by Kinetic Data. The modifications made to the bundle removed parts of the code. The course exercises will be to add back the removed code and expand onto the code base. Best practices will be implemented during the training course.

The Kinops catalog bundle uses modern technologies. Some of the technologies in use are Webpack.js, Node.js, and yarn package manager. Knowledge of Webpack is not necessary for intro level development.  Only a basic understanding of Node.js and yarn is necessary.

  • Webpack is a module bundler.  
  • A module is a reusable piece of JavaScript which exports specific objects. 
  • Node is a runtime process for executing JavaScript outside of the browser.  
  • A node package is a library of files used to assist in code development.  Use yarn to add packages to the project for use in the bundle.

ECMAScript is the official name for JavaScipt.  The newest version of JavaScript is called ECMAScript 6 or just ES 6. Not all browsers can run all ES 6 features.  Babel transpiles ES 6 code into a form that most modern browsers can run. The Kinops catalog bundle includes the babel node package. This allows us to develop using future coding standards today.

The Kinops catalog bundle includes a linter.  A linter helps enforce good coding standards.  When a code rule is broken the IDE will display to the developer an indicator.  The linter used in the bundle is eslint.  The text editor or IDE needs to have an eslint plugin added.

  • The linter rules are defined in the .eslint file. 

Kinetic Request exposes several Rest API endpoints to work with. The developers at Kinetic Data have also created a package called react-kinetic-core. This package assists in fetching and posting data to and from Request.  The react-kinetic-core utility makes working with the Rest API easier.