Understanding Common Terms Associated to React JS

In this article, I am going to define some basic terms associated to React Js as simply as I can. Let’s get started.

1.What is React: React is an open-source, front-end, JavaScript library for creating user interfaces or UI modules. Did you notice that there is a crucial term I have mentioned which is Library instead of Framework? People often get misunderstood about that. The key difference between the framework and the library lies in the term “Inversion of Control”. When you use a library, you are responsible for the flow of the program. You pick when and when to call the library. When you use a framework, the framework is responsible for the flow. Angular is a framework of JavaScript, Django is a framework of python, but react is a library.

However, React is maintained by Facebook and a group of developers and businesses. React may be used as a basis for creating a single-page web app or mobile apps.

2. DOM: The Document Object Model ( DOM) is a programming interface for both HTML and XML documents. It represents a page such that programs can adjust the format, layout, and content of the document. The document is represented as nodes and objects by the DOM. This way, the programming languages can be connected to the page. A Web page is a document. You can display this document either in the browser window or as an HTML source. But in both cases, it is the same document. The Document Object Model (DOM) represents the same document so that it can be manipulated. The DOM is an object-oriented representation of a web page that can be changed using a scripting language such as JavaScript.

3. Virtual Dom: The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.There is a corresponding “virtual DOM object” in React for a DOM object. A virtual DOM object has the same properties as a real DOM object, but it lacks the power of the actual thing to change what’s on the screen directly.

It is slow to manipulate the DOM. It is much quicker to exploit the virtual DOM, so nothing gets drawn on the screen. As opposed to moving rooms in an individual home, think about navigating the virtual DOM as editing a blueprint.

4. JSX: JavaScript extension, or more often JSX, is an extension of React that helps us to write HTML-like JavaScript.While it seemed like a poor practice to use JavaScript and markup in the same place in previous paradigms, it turns out that mixing the view with the functionality makes reasoning about the view straightforward.

In the example below, a variable called name declared and then use it inside JSX by wrapping it in curly braces:

const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);

5.Transpiler: A “transpiler” is defined as a compiler that transforms one type of syntax into another. Transpilers, like Babel or TypeScript, is used to translate JSX.

6. Elements: Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen. An element is like a single frame in a movie: it represents the UI at a certain point in time. Unlike browser DOM elements, React elements are plain objects and are cheap to create. React DOM takes care of updating the DOM to match the React elements. Elements of Reacts are unalterable. You can’t alter the children or attributes once you create an element.

7. Components: Components are independent and reusable bits of code. They serve the same role as functions in JavaScript, but they operate in isolation and return HTML with a render function. The components arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. There are two kinds of components in React, class components and functional components.

Example of a Function Component:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Example of a Class Component:

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

Starting the name of a component in Capital letters is a convention. There are many ‘lifecycle methods’ in each part that you can override to execute code at various times in the process.

8:Props: “Props” in React is a specific keyword that stands for properties and is used to transfer data from one component to another.
But the significant aspect here is that data is transferred in a uni-directional flow of props (one way between parent and child).
In addition, props data is read-only, which ensures that child components do not alter data coming from the parent. To use props in React,

— Firstly, define an attribute and its value(data).
— Then pass it to the child component(s) by using Props.
— Finally, render the Props Data.

9. States: In the React sense, “state” is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called this. The components of React have a built-in state object. The state object is where you store the values of the property that belong to the component. The component re-renders as the state object updates.

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

As the state of the React component (which is part of its input) changes, the UI it reflects (its output) changes as well. This adjustment in the description of the UI must be reflected in the machine with which we are dealing. We need to update the DOM tree in a browser. We don’t do that manually in the React program. React will simply react to changes to the state and automatically (and efficiently) update the DOM as appropriate. Maybe That is Why React called React.

10. React Hooks: Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks are not a substitution for the knowledge of React core principles. Instead, Hooks offers a more direct API for the React concepts you already know: props, state, meaning, refs, and life cycle. Hooks also provide a strong new way to combine them. Here is an example of React useState Hook.

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

All hooks start with the word “use.” Some of them can be used to provide a feature part with stateful elements (like useState), others can be used to handle side effects (like useEffect) or to cache/memoize functions and artifacts (like useCallback).