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.
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
It should create some starter code and default node modules for you to kick start.
Application is going to use my existing node/mongo/express API which i built and uploaded on github here https://github.com/adnanaman/MEAN-StarterCode
This React app is also going to use crypto coin API as example to show list of coins
Application has following components
- App component (which is default and parent component)
- 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.
Following is link to download full source code from github