Skip to main content

Basic concepts on ReactJS

Props and State.

  • Props and state are the two basic ways to handle data in ReactJS. 
  • Props are used to pass data and behaviors 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.

State.

State is basically available through  'this.state', which is by default is null. Whenever the state changes on a component the component will  automatically re-render and update DOM (Document Object Model) if there are any changes else the DOM will not get touched at all.

Using state.

To change the state setState() method can be used. Since setTimeOut() method is used in the bellow example after a second (1000ms)  'Will'  will be changed to  'Bob'. 

Changing the state using  'setState()'

If the component has an internal value that does not effect the application state is appropriate. A side from that props can be used.

Props.

Props are injected to every other component.

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.

Labels:

Comments

Post a Comment

Popular posts from this blog

Spring MVC Overview

Spring MVC is a java framework that is used to build web applications. It uses  Model-View-Control design pattern and implements basic features of core spring framework such as Inversion of Control, Dependency Injection How Spring MVC works. When the client sends a request the request is captured by the Dispatcher Servlet which act as the front Controller of the system. With the help of helpers( Handler Mappings, Controller, View Resolver, View) front controller will responds the client with HTML and data. When the Dispatcher Servlet gets the request from the client, the request is immediately sent to Handler Mappings. Handler Mapping will scan the URL and will respond to the Dispatcher Servlet with address of the class that can generate data for the web page which the end user has requested.  With the respond of the Handler Mapping Dispatcher Servlet will forward the request to the Controller, so that the data will be prepared and creates a java objec...
Post a Comment
Read more

Overview on Struts2.

Struts2 is a popular and mature web application framework based on MVC design pattern. Struts2 is not just a new version of Struts1 but it is a complete re-write of Struts architecture. The webwork framework initially started with Struts framework as the basis and it's goal was to offer an enhance and improved framework built on Struts to make the web development easier for the developers. Architecture of Struts2 Framework. FilterDispatcher routes all the requests of the framework by acting as the "front controller" . With the use of the configured interceptors the request will be processed( pre-processing) before it is routed to the Action class. Action will take control of the request and plays the role of the "model" component..Once all the interceptors are invoked    Action class takes the responsibility to execute the business logic and returns the result that is needed to be invoked.(Action class will communicate with different classes...
Post a Comment
Read more