{"id":255,"date":"2018-03-08T09:29:59","date_gmt":"2018-03-08T09:29:59","guid":{"rendered":"http:\/\/blog.amt.in\/?p=255"},"modified":"2018-03-08T09:29:59","modified_gmt":"2018-03-08T09:29:59","slug":"introduction-to-reactjs","status":"publish","type":"post","link":"https:\/\/blog.amt.in\/index.php\/2018\/03\/08\/introduction-to-reactjs\/","title":{"rendered":"Introduction to ReactJS"},"content":{"rendered":"

React is a declarative, efficient, and flexible JavaScript library for building user interfaces..\u00c2\u00a0React 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\u00c2\u00a0Model-View-Controller\u00c2\u00a0(MVC) pattern, and can be used in combination with other\u00c2\u00a0JavaScript\u00c2\u00a0libraries or frameworks in MVC, such as\u00c2\u00a0AngularJS.<\/p>\n

\"\"<\/p>\n

Features of ReactJS:<\/p>\n

One-way data flow<\/span><\/p>\n

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.\u00c2\u00a0Many Flux alternatives have been created since its inception however the community has moved toward\u00c2\u00a0Redux.<\/p>\n

Virtual DOM<\/span><\/p>\n

Another notable feature is the use of a “virtual\u00c2\u00a0Document 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.\u00c2\u00a0This 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.<\/p>\n

JSX<\/span><\/p>\n

React components are typically written in JSX, a JavaScript extension syntax allowing quoting of HTML and using HTML tag syntax to render subcomponents.\u00c2\u00a0<\/span>This is a React-specific grammar extension to JavaScript like the now-defunct\u00c2\u00a0E4X. 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,\u00c2\u00a0XHP. JSX looks like regular HTML.<\/p>\n

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.<\/p>\n