TechnicalTalk

Routing In ReactJS ============ In React, Routing means rending another component in existing main component. React Router has been broken into three packages: react-router, react-router-dom, and react-router-native. react-router = core routing components and functions for React Router applications React-router-dom = provide DOM related routing like a & link element React-router-native = it’s is used for native application like android and mobile app React Router introduces several different router types that are useful for various environments where routing is typically needed. BrowserRouter NativeRouter StaticRouter HashRouter MemoryRouter They are all available to suit your needs and requirements.

module.loaders is now module.rules The old loader configuration was superseded by a more powerful rules system, which allows configuration of loaders and more. For compatibility reasons, the old module.loaders syntax is still valid and the old names are parsed. The new naming conventions are easier to understand and are a good reason to upgrade the configuration to using module.rules.

Component lifecycle in ReactJS 1. Initialization —————— defaultProps - set default props constructor - set the initial state value and bind actions componentWillMount - called before the render method is executed. It is important to note that setting the state in this phase will not trigger a re-rendering. render - returns the needed component markup componentDidMount - enabling to define DOM manipulations or data fetching operations. 2. State Changes ———————— shouldComponentUpdate - called before the render method and enables to define if a re-rendering is needed or can be skipped. componentWillUpdate - called as soon as the shouldComponentUpdate returned true. render - returns the needed component markup componentDidUpdate - called after the render method. Similar to the componentDidMount, this method can be used to perform DOM operations after the data has been updated. Props Changes ———————— componentWillRecieveProps - called when the props have changed and when this is not an initial rendering. componentWillReceiveProps enables to update the state depending on the existing and upcoming props, without triggering another rendering. shouldComponentUpdate - called before the render method and enables to define if a re-rendering is needed or can be skipped. componentWillUpdate - called as soon as the shouldComponentUpdate returned true. render - returns the needed component markup componentDidUpdate - called after the render method. Similar to the componentDidMount, this method can be used to perform DOM operations after the data has been updated. Unmounting ——————— componentWillUnmount - called before the component is removed from the DOM. This method can be beneficial when needing to perform clean up operations, f.e. removing any timers defined in componentDidMount.

Setup Webpack configurations for a separate environment ------------------------------------------------------------------------------------------ Steps need to do….. 1. First need to setup webpack environment 2. In package.json file, update script section with below lines "scripts": "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js" 3. Add 3 files a) webpack.prod.js // for production environment b) webpack.dev.js // for development environment c) webpack.common.js // for common properties what we use in both environment 4. Use ‘npm install’ to add below plugins npm install Path, npm install webpack-merge, npm install html-webpack-plugin