Workout log

Thursday, June 29

LEARNING REACT: MAKE WEBSITES - Part 2

Once the setup is complete and you are ready to rock and roll, the next step is to learn ReactJS framework. So lets get started.

1) Get the Bootstrap css file and import it in your index.html file.

2) Configure webpack to take an input file and convert to output file. Basically that is required because we would be using ES6, JSX etc which requires compilation into plain javascript. Thus webpack is required to do the necessary compilation for us. See below screenshot.

3) Common way of writing in React is to add support for ES6 and JSX with Babel.
We would be using ES6 but with help of Babel using loaders that will transcribe to ES5. Babel polyfill will ensure support for older browsers.

Common way of building react component is using ES6. Some common packages that are required for development are Babel packages.
1) babel-loader - Webpackage library that helps convert code from ES6 to ES5
2) babel-preset-es2015
3) babel-preset-react - Takes JSX and convert code for easy development.
4) babel-polyfill - For browsers that are older and don't support ES5, it ensures some polyfill.

Add in package.json

Add an entry in the webpack.config.js file for loader. We want all the .js files to be transpiled to ES5 excluding the node_modules folder. See below screenshot