ReactJS ... a closer look!

ReactJS - a look at the key features & simple 

What is ReactJS? 

ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications.

• support the concept of components
• change data without reloading the page
• corresponds to view in MVC architecture
• can be used in conjunction with other libraries/frameworks e.g. Angular.

Features: 

• JSX : javascript which allows HTML quoting.
• ReactNative: got native libraries which provides react architecture to native components
• Single-way data flow: properties flow down, actions flow up
• Virtual DOM: React works on top of real DOM to enable changed components to render.

Simple/light weight, easy to learn, data binding, performance, testing.

LifeCycle of ReactJS? 

3 phases - mounting, updating & unmounting

Mounting (first render) - initialisation --> component will mount -> render -> component did mount

Updating (props change/state change) - component will receive properties --> should component update (yes/no) -> (if yes) component will update -> render -> component did update

Unmounting - component will unmount

Key components - 

Package.json : defines start script, build script, run test scripts.
index.html: single page application framework - div has id of root which holds the app component(if needed: bootstrap goes here)
src/index.js: entry point to react code - import of reactDom, react app component - renders react component in id of root.
serviceworker: for progressive web apps & calls.
app.js: class app extends component which comes from react library, it's got a render method(lifecycle method) & renders a jsx.
app.css: global css.

Installation/Startup 

Step 1: Download & install node js

Step 2 : npx create-react-app my-app

Step 3 : start the app - npm start

Running a simple code - 

ReactDom gets started up & renders the react component in the root id of the div in html, any changes get automatically re-loaded as it's a hot reload.

on loading the html page - the script gets invoked importing react DOM which loads the app.js, the lifecycle of react is invoked which in turn renders the page as a single page app.

Any event will trigger a reload and render of the component modified.

Reference code is available in GitHub - create-react-app.