Walk Out of Darkness of ReactJS

2 min readNov 4, 2020

ReactJS — Library vs Framework?

React is a JavaScript “library”. It is not exactly a “framework”. It is not a complete solution and we will often need to use more libraries with React to get any solution. React does not assume anything about the other parts of any solution.

ReactJS is Declarative:

In React we use a declarative style to write our components. Let’s look at the previous example with <select>:

<select value={this.state.value} onChange={this.handleChange}>
{somearray.map(element => <option value={element.value}>
{element.text}
</option>)}
</select>

Data Goes Down:

ReactJS is a component-based library for designing UI. In reactJS data flows down from the parent component to the d component in a unidirectional way.

Dynamic Data flow in ReactJS:

We can flow Dynamic Data through a reactJS application using State. We can set different values to these states and use them in our components and sometimes in the whole application.

JSX:

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. JSX is a form of using HTML inside JavaScript.

Virtual Dom:

In modern web Development, DOM is crucial to understand. In modern JavaScript, DOM stands for “Document Object Model”, it is mainly used to make a nodes using JavaScript. It is the heart of modern web pages.

But there is a problem with the basic DOM, whenever we change a single element in the webpage, it reloads the whole DOM.

In every JS Dom, there is a corresponding JS Virtual Dom. Virtual DOM is an object identical to the JavaScript object. Virtual DOM has the same exact properties and methods as normal DOMs. It can not decide what is on the screen. It is just a blueprint of the main DOM. So, it is much faster to manipulate.

Default Props:

The definition of defaultProps can be written as, “It is a property on the component class itself which is used to set the default props for the class. Default Props are used in case of undefined props. It is not used for null props. For example:

class CustomButton extends React.Component {
  // ...
}CustomButton.defaultProps = {
  color: 'blue'
};

If props.color is not provided, it will be set by default to 'blue':

render() {
    return <CustomButton /> ; // props.color will be set to blue
  }

If props.color is set to null, it will remain null:

render() {
    return <CustomButton color={null} /> ; // props.color will remain null
  }

Optimizing Performance of a ReactJS App:

For super fast speed mainly production builds should be used. We can check it using ReactJS Developer tools for chrome browser extension.

We should profile Components with the Chrome Performance Tab and with DevTools Profiler. Virtualize Long Lists and Avoiding Reconciliation is two other best approaches for optimizing the performance of a reactJS app.