React JS Features and Components 

what is React JS?

React JS is a declarative, efficient and flexible JavaScript library for building user interfaces. It's 'V' in MVC.  React JS is an open-source, component-based front end library responsible only for the view layer of the application. It was initially developed and maintained by Jordan Walke, a software engineer of Facebook and later used in its products like Whatsapp and Instagram. React first deployed on Facebook's newsfeed in 2011 on instagram in 2012.

A react application is made of multiple components, each responsible for rendering a small, reusable piece of HTML. Components can be nested within other components to allow complex applications to be built out of simple building blocks.

Uses of React JS

The main purpose of React is to be fast, scalable, and simple.It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC.

React uses a declarative paradigm that makes it easier to reason about application and aims to be both efficient and flexible. It designs simple views for each state in application and React will efficient update and render just the right component when data changes of application. The declarative view makes your code more predictable and easier to debug. React JS use for create large web application which use data and change without reloading entire page.  

React is, 

• Simplicity - React JS is just simpler to grasp right away.
• Easy to learn - Basic previous knowledge in programming can easily understand
• Data binding - It uses one-way data binding 
• Performance - Does not offer any concept of a built-in container for dependency
• Testability - React JS applications are super easy to test
• Native approach - Can be used to create mobile applications

React Native

React has Native libraries that were announced by Facebook in 2015, which providers the react architecture to native applications like IOS, Android and UPD.

React-native is a mobile applications building frameworks using only JavaScript. It uses the same fundamental UI building blocks as regular IOS and Android apps. 

The part of using react-native is to allow components written in Objective-C, Java or Swift.

"React VR Caters - developing VR applications"

Features

One-way data flow

Data flow is going to parent component to the child component.
But Action flow is going to child component to the parent component.
Data is initiated and kept in one place, and data is cannot change anyone (immutable). But can pass a call back function with the help of which we can do modification of originated data.


Virtual DOM (Document Object Model)

DOM manipulation is cost instead react create a virtual DOM.
React creates an in-memory data structure cache which computed the changes made and then updates the browser.
This allows a special feature that enables the programmer to code as if the whole page is
rendered on each change whereas react library only renders components that actually change.

JSX

If like HTML tag syntax is neither a string nor HTML, it is called JSX, and it is a basically syntax extension to regular JavaScript and is used to React elements. These elements are then rendered to the React DOM.
React JS language for defining UI.
ex:
var ele = <h1> This is Sample JSX</h1>

It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript. It makes easier for us to create templates. Instead of separating the markup and logic in separated files, React uses components for this purpose.

Props and State

In a React component, Props are variables passed to it by its parent component. State on the other hand is still variables, but directly initialized and managed by the component.

The state can be initialized by props.  states are read and write enable - mutable. but props can't be changed. props are read only - immutable.

Props 

• Immutable
• Has better performance
• Can be passed to child components

State

• Owned by its component
• Locally scoped
• Writable / Mutable
• Has setState() Method to modify properties
• Changes to state can be asynchronous
• Can only be passed as props

use setState() method to change state and tells React that this component and its children need to be re-rendered with the update state. This is the primary method to update the user interface in response to event handlers and server responses. If you use state and props inside setState method, use the second form of the method setState((state,props) => {});