REACT – MERN Boiler Code

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 javascript 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

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

This React app is also going to use crypto coin API as example to show list of coins

Application has following components

  1. App component (which is default and parent component)
  2. Searchbox
  3. 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



No alt text provided for this image

Muhammad Adnan

Author Since: July 3, 2019

Leave a Reply

Your email address will not be published. Required fields are marked *