REACT – MERN APP

React is super popular now a days and can be used to develop web and even mobile native app so it’s highly recommended to learn.

Components are not new but thinking of components in web pages using java script could be considered bit new and highly recommending now. Think components as Lego blocks to build something bigger with flexibility, re usability and easy to build.

Virtual DOM

As DOM, Virtual DOM also got node that contain hierarchy of child nodes with their attributes, properties, values. React’s render method create and paints the node tree based on React components in Virtual DOM. VDOM gets sync automatically with real DOM of browser but that’s encapsulated for react developers, they don’t have to worry about it and VDOM does it pretty efficiently which leads to better performance and consistency. Also allow React developer to port application with minimal effort on multiple platforms like VR and Mobile native apps. Sync of VDOM to DOM is called reconciliation.

React 16 introduces React Fiber which is advanced reconciliation that enabled incremental rendering and sync.

Run command in your VSCode Terminal

>npm install -g create-react-app

To create any react app simply type below

>create-react-app coins

Application has following components

• App component (which is default and parent component)
• Searchbox
• CardList and Card component

aforementioned components communicate and pass data to each other.

App component contains CardList and Search components. CardList has Card component.

Searchbox component invoke event of App (parent) component to update Cardlist contents.