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



Sunday, June 11

LEARNING REACT: MAKE WEBSITES - Part 1

Below are notes from the React tutorial I took from safaribooksonline.

Installation and Setup
1) Make sure you have node and npm installed.

2) Create a directory "public/img"

3) Run command "npm init"

4) Create a file "index.html" inside your public directory.
If you are using VSCode, it has emmet plugin already installed. By typing "!" and pressing tab, you will get the basic html ready to get started.

Setting up Webpack and WebPack-Dev-Server
1) Install webpack

Notice the parameter "--save-dev". It means that we want the the package to be installed for development purpose. Also this parameter will add an entry to our package.json file, so anyone who wishes to run our application on their local environment will just have to "npm install" and it will download the package automatically instead of performing installation of webpack explicitly.


2) Next step is to configure webpack. The best way to do is by creating a js file. Create a file "webpack.config.js" in parallel to "package.json".



3) To start the webpack server, go to "package.json" and add a your server to the scripts parameter as shown in screenshot below. Note the name of the script is "start".


Thus, to start a webpack server, go to console and run the command "npm run start" or "npm start" because "start" is a common keyword, "npm start" will work fine.