Brief React.js

Yeah, I know that there are terabytes of data available that help you learn React.js but in the newbie’s perspective, you rarely find those basic concepts all in one place. I will try my best to cover the briefing in simple language which may help you not only to take a quick look right before the interviews but also to learn a few basics collectively.

React.js is a javascript library used for building the user interface components. There are quite a good number of pros coming to using React.js and here are a few of them.

Since React.js is a library introduced and widely used by Facebook, the documentation for the library is outstanding and so does the community support. A lot of companies use React.js and community support is almost unlimited.

Virtual DOM: React.js boosts the performance of the application as it uses a concept called virtual DOM(V-DOM). Traditionally when there is a change/update, the whole DOM refreshes to apply the change. The V-DOM is a lightweight replica(blueprint) of the actual DOM and whenever there are changes/updates, the V-DOM is updated and compares itself to the DOM. This process is called diffing. If they are different, the V-DOM then updates only that part of the DOM where changes occurred instead of refreshing the whole DOM. This helps in boosting performance.

There are several React based component libraries available that provide styled-functional-components and which can be readily used in your application.

JSX: JSX is just an syntax extension for javascript. It looks just like HTML elements but it executes javascript. The browser cannot understand JSX, so we use transpilers like Babel to convert the JSX to actual javascript which can be read by the browser. We can build the React components without using JSX but it gets very complicated with the traditional Javascript. So, JSX is pretty much like a syntactical sugar for the developer to understand/build the components.

COMPONENTS: React.js has class components and functional components. Class components are also called stateful components. (State in React is an object where the property values will be stored for a class component. The state CANNOT be modified directly as “this.state.isLoggedIn=true”. It can be updated using a setState method.)
The functional components do not have a state. They are also called dumb components or stateless/presentational components.
We can pass the state to a different component as attributes and access them using “props”.

KEYS: Keys are unique identifiers used by react to render a list efficiently. It is useful for react to keep a track of list that is altered(added/modified/deleted). When an array of elements are mapped, keys are assigned with a unique identifier for each element. Indexes are used sometimes as keys but it is not suggested as it will cause confusion especially when elements added/deleted as the index of the altered element will be assigned to the previous/next element respectively.

REFS: As mentioned above, React uses a concept called Virtual DOM. So, it doesn’t directly modify the actual DOM, but if there are scenarios to access the DOM directly, we can use refs to do that. Refs are also used to access the child nodes.

PURE COMPONENTS: React is all about performance. Pure components help to optimize react applications, especially when building a complex application. You can just build a pure component by importing and extending the class-based as a React.PureComponent.

import React, {PureComponent} from ‘react’;
class Spacetime extends React.PureComponent {

render() {
return h1> Mass distorts spacetime</h1
}
}

Pure components always return the same output with the same input. Meaning, if a pure component is updated with new values of input and if the new values and the old values are the same the re-rendering doesn’t occur. If the old values and new values are different the re-rendering of the component occurs. Hence the performance is boosted. There is a catch here. While using pure components, it is better to know thoroughly what you are doing because if you are calling another component in the render method of the pure component that needs to be executed with every single action performed, it will be a disaster to use pure components.

MEMO: Memo is a higher-order component that is used to wrap a functional component to make it a pure component.

function BlackHole(props) {
/* render using props */
}

function Gravity(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise, return false
*/
}
export default React.memo(MyComponent, areEqual)

FRAGMENTS: While newbie, it is common running into tiny mistakes like returning multiple JSX elements in a component that throws errors. After googling you figure out that component’s return should be always wrapped into a single element like

.

class Content extends React.Component {
render() {
return (

{this.props.componentData.component}
{this.props.componentData.id}

)
}
}

In the code above, an additional

is used to wrap other elements in the return without any attributes. In some scenarios, we call a component with multiple elements(wrapped in a ) within the render of another component which may be dependent on the immediate parent elements wrapping it where the component is called but unfolding it will result invalid due to the extra wrap. solve such problems eliminating additional used to wrap multiple elements.

class Content extends React.Component {
render() {
return (

{this.props.componentData.component}
{this.props.componentData.id}

)
}
}

OR in short

class Content extends React.Component {
render() {
return (
<>

{this.props.componentData.component}
{this.props.componentData.id}
</>
)
}
}

only accepts keys as attributes.

This story is happy to accept any suggestions/corrections and enhancements to the content it narrates. Please feel free to write comments. This story is an ongoing development and will try to update more content.