Understanding ReactJS

React or ReactJS is a software framework that allows coders to build user interfaces (UI) for different web applications or websites. A software framework is a library of code that allow for easier and faster programming. Frameworks can remove some of the complexities of coding since they can take care of some of the background work. The ReactJS has a few advantages which allows it to excel in web app development.

Virtual DOM

The ReactJS has a virtual Document Object Model (DOM) which is the primary structure of the HTML document. The DOM is very resembles a tree datatype filled with objects that the programmers can manipulate. Anytime a change is made to the DOM the webpage may have to reload. A change to the DOM can be caused my input from the user, a search, sending or receiving information from a server which can potentially cause the webpage to run slowly. ReactJS uses a virtual DOM to circumvent this potential hiccup. The virtual DOM is a shallow copy of the DOM. The DOM is only updated once the virtual DOM has interacted with it.

https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-reactjs-and-react-native/

Instead up updating the entire DOM, which is not efficient, ReactJS hold two copies of the virtual DOM in memory. One of the copies is the DOM before the update, while the other copy is the DOM after the update. ReactJS then will find any elements that have been altered and only update the parts of the real DOM that were altered. This allows for the website to be fluid with its updates and helps the application performance.

Components that are reusable

Components are reusable parts of code and begin to build the structure of the ReactJS framework. The components in ReactJS are very similar to JavaScript functions, they take a parameter and return a value. The input parameter for the component is called props,

• and the return value will be displayed on the DOM. There are two ways to define a component, either as a function or class.

function Greeting(props) {
            return <div>Good afternoon, {props.codename}</div>;
          }

Above is defining a component as a function. As stated previously its parameter is props, which is an object, and the return value is a React element. This definition is considered to be stateless. These will print what was given to them and are deterministic, they will print what they are given.

class Greeting extends React.Component {
            render() {
              return <div>Good afternoon, {this.props.codename}</div>;
            }
        }

This is using ES6 class syntax defining the same component. The return value here will still display on the DOM but the render method makes that possible. The components defined in this manner are considered to be stateful. This means that they are capable of holding on the values of the input data if it is changed. The state of the component can be updated at any time. Below is an example of updating the state of a ReactJS component.

class AnimeShow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      genre: 'anime',
      title: 'My Hero Academia',
      numberOfSeasons: 3
    }
   }
}
correctDetails(){
  this.setState({
    numberOfSeasons: 4
  })
}

Conclusion

ReactJS allows for fluid updates to the DOM since the entire page does not need to be refreshed. Building the application is also extremely easy due to components. Components can be reused as many times as needed and carefully choosing when to use stateful and stateless components is essential to writing a good application. Using stateful components when the values are going to need updating and stateless components when you only need to print them.