Getting Familiar with React

React is a library where we can import react libraries and use its methods of JavaScript which allows to create user interface according to the developer’s planning independently unlike frameworks which provide many strict rules of using components as they are made of. Though react does not handle server communication, translations, routing and so on, we can use any plugins as we need to do the work with react. Additionally, a react app is not a whole react thing, it’s a package of many different libraries or bundlers such as webpack, npm , node.js, Bable , JSX etc.

JSX is a syntax which allows to use HTML tags in JavaScript to describe the UI elements without complexity and vice versa..

const RootElement = (
  <div>
    <h1 style={{color: red}}>The world is yours</h1>
    <p>Say hello to my little friend</p>
  </div>
)
ReactDOM.render(RootElement, document.getElementById('app'))

React has a specialty of using declarative style to write components where just the pattern can be set dynamically and all the components will follow this.

DOM is one type of tree pattern. In React ,data goes down to the tree and can carry the data only from the parents to the child as props which is a HTML attribute in the view of JSX not from the child to parent.

In JavaScript, when we set dynamic value, the current state becomes updated and has to set the new value to the current state by setState(). There is a number of event handlers which workson different type of methods like onClick(), onChange(), onBlur() and many more , takes the dynamic value and set it to the state after words. However, these event handles can climb up in the DOM tree and allow the parent to use the handlers from the children by calling a function in the parent and pass it through props.

Every programming language has conditional logic and React also has the conditional Rendering method . There are 2 approaches.

• ternary operator outside return expression
• if/else block outside return expression

Node allows us to run JavaScript on our operating system and npm is node package manger.

React Class Component

Lifecycle of a class component is following:

• constructor() is generally used for initializing local state by assigning an object to this.state and binding event handler methods to an instance.

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

• render() is the only required method in a class component. This function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser. But it should not be called setState() in the constructor().

React Optimizing Performance

React has built in techniques to optimize its performance. React use virtual DOM which assist to update the DOM only when any change occurs in the UI. It is one of the most effective way of reducing production time. If we use create react app to open a app in react then we can use Production build to minimize a big project codes into a few number of files by the command “npm run build” which works during the time of production, not at the development time. We can also use binders like webpack for single-file builds.

Furthermore, there is many browser extensions for profiling components with the DevTools profiler. There is also virtualizing Long lists means when the code becomes large about hundred or thousand lines, we can use the technique of windowing , helps to render small part of codes and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. In addition, we should avoid reconciliation by using spread operator of JavaScript or other methods.