React JS

React JS

Introduction
  • Developed and maintained by Facebook and Instagram.
  • A JavaScript library for creating user interfaces.
  • Serves as the view of MVC architecture.
  • Suitable for large web application which use data and change over the time without reloading the entire page.
  • React Native caters developing mobile application for various platforms and React VR caters developing VR applications.
  • Aims at Speed, Simplicity and Scalability.

● Notable features
  • One-Way data flow.
    1. Single source of truth - Data is originated and kept in one place, data is immutable.
    2. Data flow from the parent component to the child component.
    3. Action flow from child component to parent component.

  • Virtual DOM
    1. DOM manipulation is cost instead react create a virtual DOM tree and compare it with the rendered tree and update only what is changed.

  • JSX
    1. React JS language for defining user interfaces.
    2. HTML like syntax.
    3. Prevents cross-site scripting attacks by converting expressions to strings.

● Props and State
  • Props are used to pass data and behaviours from container components to child components.
  • Props are read only.
  • State is used to keep data which can be updated.
  • State is read write enabled.
  • Use setState({}) method to update state.
  • setState method is asynchronous so, if you want to to use state and props inside setState method use the second form of the method setState((state,props)=>{}).

● Component life cycle
  • React components extended from React.Component parent class inherit a set of methods that belong to react lifecycle.
    1. Render and commit state.
    2. Controlled and uncontrolled.
    3. Side effects.

  • constructor
    1. JS constructor.
    2. Declare state and bind context to life cycle events.
    3. Do not call setState.
    4. Always call super(props) to bind this.props.

  • render
    1. Rendering of the component.
    2. Called everytime state or props are getting changed.
    3. Can return JSX, Portal, Fragments, Strings, boolean etc.

  • componentDidMount
    1. Fires after component is mount to DOM.
    2. Can interact with DOM.
    3. Ajax calls and update the state.

  • getDerivedStateFromProps
    1. Use this if you want to update your state from props.
    2. React highly recommends not to use this.
    3. Highly discourage conditionally setting state from props.

  • shouldComponentUpdate
    1. To decide whether to update the component or not.
    2. Only as a performance enhancement, if required.

  • componentDidUpdate
    1. After component got updated.
    2. Will not run if shouldComponentUpdate return false.
    3. Use this to interact with DOM after a Component update.

  • componentWillUnmount
    1. Before removing the Component.
    2. Should not call setState.
    3. Clean up tasks.

  • componentDidCatch
    1. After an error from decedent component.
    2. getDerivedStateFromError to get error related State.
    3. componentDidCatch for logging and side effects.

● Babel
  • Most popular JavaScript transpiler.
  • Convert JavaScript es6 features and beyond to latest compatible version.
  • Babel polyfills are available to support new global objects. It uses core-js polyfills.
  • So far Babel compatibility with new features has been one of the best.
  • Debugging enabled via source maps.
  • In built code optimization.
  • Supports JSX (XML like syntax extension) and FLOW (Static type checker).

● Webpack
  • Most famous module bundler.
  • Support for build system as well as module bundling.
  • Split code into multiple files.
  • Supports CommonJS and AMD.
  • Extend using loaders (transpiling, css transformation, image optimization).
  • Supports production optimizations (minification, uglification).
  • Easy configuration with 4 steps - entry -> loaders -> plugins -> output.

● Parcel
  • Fastest module bundler.
  • Relatively new to community.
  • Conventions over configurations.
  • Support JSX, SCSS, LESS, SVG, TypeScript etc.
  • Plugins available for extension and plugins are automatically detected.

Comments

Post a Comment

Popular posts from this blog

Image
Advanced Java Script (Ecma Script) Java Script is all about objects objects are all about properties Properties are all about attributes Primitive Wrappers number ex: new number(125.25) boolean string(wrapper as a object and give methods and properties) Objects Literal Form : var obj = {} Constructor Form : var obj = new Object() Regex Literal Form : / / Constructor Form : new regExp() Array Literal Form : [10,20] Constructor Form : new Array[10,20] Iterate Object Properties Ex : for(var property in object) Private Variables Ex : var _name Variables with use by java script engine Ex : var _ _name_ _ Change Invoker by using call , apply and bind methods. Object Properties On Properties (Created Properties) Enumerable (can Iterate) Data Properties Accessor Properties Non Enumerable (can't Iterate) Data Properties Accessor Properties Prototype Properties (Primitive values and references of objects) Enumerable (can...
Read more
                                                                                       Java Script Language Java Script is a Interpreted Language.                  Source code will convert to the machine code through engine interpreter in Interpreted language .          Java Script is a Dynamically type language. Meaning of Dynamically type : Show errors in run-time. Java Script is a case sensitive language. Data Types :   Boolean                                  Number (Integer,Float)                         ...
Read more
NodeJS Introduction Developed by Ryan Dahl. Created with the aim of creating real-time websites with push capabilities (websockets). NodeJS is an open source, cross platform runtime environment for server-side and networking applications. Build on V8 engine, Chrome’s JavaScript engine. Uses event-driven, non-blocking I/O model which makes NodeJS lightweight and efficient. Ideal for data-intensive real-time applications that run across distributed devices. NodeJS comes with several JavaScript libraries that help basic programming. NodeJS eco-system ‘npm’ is the largest in the world for open source libraries. &#9679 Advantages Ability to use single programming language from one end of the application to the other end. NodeJS applications are easy to scale both horizontally and vertically. Delivers improved performance since V8 engine compile the JS code into machine code directly. Performance increased via caching modules into memory after the first use. Easily ...
Read more