Sunday, May 7, 2017

React component lifecycle

ReactJs Life Cycle

Component lifecycle বলতে বোঝায়, একটি React component এ যে সমস্ত ডিফল্ট ফাংশান থাকে তার ঠিক কোনটার পর কোনটা এক্সিকিউট হয়। উদাহরণ হিসাবে বলা যায় কোন class যখন এক্সিকিউট হয় তখন _construct ফাংশানটি সবার আগে এক্সিকিউট হয় এবং _destruct ফাংশান ওই class এর অন্যসব ফাংশান এক্সিকিউট হওয়ার শেষে এক্সিকিউট হয়।
ঠিক তেমনিভাবে যখন কোন
React component এক্সিকিউট হয় তখন অন্য সব ফাংশান এক্সিকিউট হওয়ার আগে
componentWillMount() এক্সিকিউট হয়।

Component render হওয়ার সময় যে order অনুযায়ী component এর ফাংশানগুলো এক্সিকিউট হয় সেই Order অনুযায়ী অন্য ফাংশানগুলো বর্ননা করবো।
Ø  )componentWillMount এক্সিকিউট হয় render() ফাংশান এক্সিকিউট হওয়ার আগে, ঠিক যখন component টি তার parent component এর সাথে mount হয় তার আগে।
Ø  ২)componentDidMount এক্সিকিউট হয় component টি তার parent component এর সাথে mount হয়ে যাওয়ার পর। এখানেই সাধারণত state আপডেট করতে হয় component টি usable করার জন্যে। এছাড়াও ajax request এর মাধ্যমে ডাটা কালেকশান এখানেই করতে হয় Component ইউজ করার জন্য। তাহলে মোটকথা component টি ইউজ করার উপযোগী করতে যা কিছু করা দরকার এই ফাংশানেই করা হয়।
Ø  ৩)componentWillReceiveProps এক্সিকিউট হয় কোন child component এ তার parent component যখন props গুলো push করে তার ঠিক আগেই। এবং সেটা child component টি ২য় বার render হওয়ার আগেই।
Ø  ৪)shouldComponentUpdate ফাংশানটি রিটার্ন করে True অথবা False, বাই ডিফল্ট এটি সব সময় ট্রু রিটার্ন করে। যখনই কোন component আপডেট করার প্রয়োজন হয় সেটা State অথবা Props চেঞ্জ করার কারণে হোক তখনই shouldComponentUpdate ফাংশানটি এক্সিকিউট হয়। কোন কারণে প্রোগ্রামার যদি মনে করে তার এই কমপোনেন্টটি আপডেট করার কোন প্রয়োজন নেই তাহলে সে shouldComponentUpdate ফাংশানটির মধ্যে থেকে False রিটার্ন করে রাখতে পারে।
Ø  ৫) componentWillUpdate Render ফাংশানটি কল হওয়ার ঠিক আগেই এবং shouldComponentUpdate ফাংশানটি এক্সিকিউট হওয়ার পরেই componentWillUpdate ফাংশানটি এক্সিকিউট হয়।
Ø  ৬)render() রেন্ডার ফাংশান এক্সিকিউট হয়ে childComponet টি ঠিক যে কারণে ইউজ করা করা হচ্ছে সেই কাজটিই করে থাকে। এটি তার parent component কে HTML রিটার্ন করে।
Ø  ৭) componentDidUpdate এক্সিকিউট হয় render ফাংশান কল হওয়ার পরেই।
Ø  ৮) componentWillUnmount কোন কম্পোনেন্ট এর কাজ যখন শেষ হয়ে যায় তখন সেটি তার parent component থেকে unmount হয়ে যায়। এবং এটিই কোন একটা ফাংশানে ইউজ করা function গুলোর সবার শেষে এক্সিকিউট হয়।

আরো ক্লিয়ার আইডিয়ার জন্যে আমরা কয়েকটি ভাগে ভাগ করতে পারি যেমন যখন কোন component Initially Call হয় তখন কোন-কোন লাইফসাইকেল মেথড কল হয় এবং তাদের কোনটির পর কোনটি কল হয়।
যখন কোন component এর কোন state change হয় তখন কোন-কোন লাইফসাইকেল মেথড কল হয় এবং তাদের কোনটির পর কোনটি কল হয়।
যখন কোন component এর কোন props change হয় তখন কোন-কোন লাইফসাইকেল মেথড কল হয় এবং তাদের কোনটির পর কোনটি কল হয়।

Initially Call

উপরের ইমেজটিতে যেমন দেখতে পাচ্ছেন যখন ই কোন component কে কল করা হয় ফাংশানগুলি একটির পর একটি কল হতে থাকে।
GetDefaultProps এই ফাংশানটিতে component টি তে used props গুলোর টাইপ বলে দেওয়া থাকে যেমন কোন props string হবে না কি integer হবে।
ঠিক একই ভাবে GetInitialState component used states গুলোর জন্যর initial state নির্ধারন করে দেওয়া হয়। বলে রাখা ভালো এখানে কোন Initial state সেট করলে তাতে component re-render হয় না।
ComponentWillMount, Render এবং ComponentDidMount ফাংশানগুলির ব্যাপারে আগেই বর্ননা করেছি।









When state changes

ছবিতে যেমনটি দেখতে পাচ্ছেন, যখন কোন component এর কোন state change করা হয় তখন ফাংশানগুলি একটির পরে অন্যটি ক্রমান্বয়ে এক্সিকিউট হয়ে থাকে। ফাংশানগুলি কিভাবে কাজ করে তার বর্ননা উপরে আগেই করেছি।

When Props Changes

ছবিতে যেমনটি দেখতে পাচ্ছেন, যখন কোন component এর কোন state change করা হয় তখন ফাংশানগুলি একটির পরে অন্যটি ক্রমান্বয়ে এক্সিকিউট হয়ে থাকে। ফাংশানগুলি কিভাবে কাজ করে তার বর্ননা উপরে আগেই করেছি।

Demo Code: https://github.com/imtiazUAP/react_scratch/tree/develop-1/learning/reactComponent_lifeCycle


https://facebook.github.io/react/docs/react-component.html

Wednesday, April 5, 2017

Dynamic dropdown list in reactJs

type="vertical"
control="select"
id="number-of-devices"
label="Number of devices"
required={true}
value={this.state.devices}
onChange={e => this.setState({devices: e.target.value})}
options={this.getDevices()}
/>

getDevices() {
let i = 0;
let devices = [];
while (i <= this.props.pay.number_of_devices) {
   devices.push({label: i, value: i})
   i++;
}
return devices;
}

Sunday, January 8, 2017

Starting with Webpack

INSTALLING WEBPACK

You need to have node.js installed.
$ npm install webpack -g
This makes the webpack command available.

SETUP THE COMPILATION

Start with a empty directory.
Create these files:

add entry.js

document.write("It works.");

add index.html

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>
Then run the following:
$ webpack ./entry.js bundle.js
It will compile your file and create a bundle file.
If successful it displays something like this:
Version: webpack 1.14.0
Time: 12ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 28 bytes [rendered]
    [0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]
Open index.html in your browser. It should display It works.

SECOND FILE
Next, we will move some code into an extra file.

add content.js

module.exports = "It works from content.js.";

update entry.js

- document.write("It works.");
+ document.write(require("./content.js"));
And recompile with:
$ webpack ./entry.js bundle.js
Update your browser window and you should see the text It works from content.js..
webpack will analyze your entry file for dependencies to other files. These files (called modules) are included in your bundle.js too. webpack will give each module a unique id and save all modules accessible by id in the bundle.js file. Only the entry module is executed on startup. A small runtime provides the require function and executes the dependencies when required.

THE FIRST LOADER

We want to add a CSS file to our application.
webpack can only handle JavaScript natively, so we need the css-loader to process CSS files. We also need the style-loader to apply the styles in the CSS file.
Run npm install css-loader style-loader to install the loaders. (They need to be installed locally, without -g) This will create a node_modules folder for you, in which the loaders will live.
Let’s use them:

add style.css

body {
    background: yellow;
}

update entry.js

+ require("!style!css!./style.css");
document.write(require("./content.js"));
Recompile and update your browser to see your application with yellow background.
By prefixing loaders to a module request, the module went through a loader pipeline. These loaders transform the file content in specific ways. After these transformations are applied, the result is a JavaScript module.

BINDING LOADERS

We don’t want to write such long requires require("!style!css!./style.css");.
We can bind file extensions to loaders so we just need to write: require("./style.css")

update entry.js

- require("!style!css!./style.css");
+ require("./style.css");
document.write(require("./content.js"));
Run the compilation with:
webpack ./entry.js bundle.js --module-bind 'css=style!css'
Some environments may require double quotes: –module-bind “css=style!css”
You should see the same result:
A CONFIG FILE
We want to move the config options into a config file:

add webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};
Now we can just run:
webpack
to compile:
Version: webpack 1.14.0
Time: 163ms
    Asset     Size  Chunks             Chunk Names
bundle.js  10.7 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 8.85 kB [rendered]
    [0] ./tutorials/getting-started/config-file/entry.js 64 bytes {0} [built]
    [1] ./tutorials/getting-started/config-file/style.css 943 bytes {0} [built]
    [2] ../~/css-loader!./tutorials/getting-started/config-file/style.css 197 bytes {0} [built]
    [3] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built]
    [4] ../~/style-loader/addStyles.js 6.09 kB {0} [built]
    [5] ./tutorials/getting-started/config-file/content.js 45 bytes {0} [built]
The webpack command-line will try to load the file webpack.config.js in the current directory.

A PRETTIER OUTPUT

If the project grows the compilation may take a bit longer. So we want to display some kind of progress bar. And we want colors…
We can achieve this with
webpack --progress --colors

WATCH MODE

We don’t want to manually recompile after every change…
webpack --progress --colors --watch
Webpack can cache unchanged modules and output files between compilations.
When using watch mode, webpack installs file watchers to all files, which were used in the compilation process. If any change is detected, it’ll run the compilation again. When caching is enabled, webpack keeps each module in memory and will reuse it if it isn’t changed.

DEVELOPMENT SERVER

The development server is even better.
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
This binds a small express server on localhost:8080 which serves your static assets as well as the bundle (compiled automatically). It automatically updates the browser page when a bundle is recompiled (SockJS). Open http://localhost:8080/webpack-dev-server/bundle in your browser.

The dev server uses webpack’s watch mode. It also prevents webpack from emitting the resulting files to disk. Instead it keeps and serves the resulting files from memory.

Main article is here: http://webpack.github.io/docs/tutorials/getting-started/