Introduction to ReactJS

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.. React allows developers to create large web-applications that use data and can change over time without reloading the page. It aims primarily to provide speed, simplicity, and scalability. React processes only user interfaces in applications. This corresponds to View in the Model-View-Controller (MVC) pattern, and can be used in combination with other JavaScript libraries or frameworks in MVC, such as AngularJS.

Features of ReactJS:

One-way data flow

To use React to its greatest potential, Properties (or props), ideally a set of immutable values, are passed to a component’s render function. A component should not directly modify any properties passed to it, but should be passed callback functions that instead modifies the store creating a single source of truth. This mechanism’s promise is expressed as “properties flow down; actions flow up”. The described mechanism is an architecture called Flux. Many Flux alternatives have been created since its inception however the community has moved toward Redux.

Virtual DOM

Another notable feature is the use of a “virtual Document Object Model”, or “virtual DOM”. React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser’s displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change, while the React libraries only render sub components that actually change.

JSX

React components are typically written in JSX, a JavaScript extension syntax allowing quoting of HTML and using HTML tag syntax to render subcomponents. This is a React-specific grammar extension to JavaScript like the now-defunct E4X. HTML syntax is processed into JavaScript calls of the React framework. Developers may also write in pure JavaScript. JSX is similar to another extension syntax created by Facebook for PHP, XHP. JSX looks like regular HTML.

React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, following are some pros that come with it.

  • It is faster because it performs optimization while compiling code to JavaScript.
  • It is also type-safe and most of the errors can be caught during compilation.
  • It makes it easier and faster to write templates, if you are familiar with HTML.

As of React v16.0 it is now possible to return an array of elements, fragments and strings.

The above mentioned is a brief about ReactJS. Watch this space for more Blogs on latest trends and Information in Technology that is needed in the current generation.

 

Leave a Reply

Your email address will not be published. Required fields are marked *