Things about React.Js that newbie developers should know

Hello Developers, today I am going to talk about some important things about React.js that you should know. So, let’s get started.

Is React a Library or Framework?

To answer This question first we need to know what is a library and framework. A Library is a small thing, to work with a library we can use many more library as we need. Library gives us this freedom. On the other hand, a framework is a big thing. Which forces us to write code in a certain way. If we need a piece of features of a framework, we have to include the whole thing. this is the main difference between library and framework.

React is something that we use to build user interfaces. While working with react, we can add many more libraries as we desire. So, finally, we can say that react is a library.

What is DOM

DOM is the “Document Object Model”. It’s a language-independent programming interface that treats an HTML document as a tree structure. The DOM represents a document to a logical tree. Each branch of the tree ends with a node and each node contains objects. The DOM method allows programmatic access to the tree, With them, one can change the structure, style, or content of a document.

Babel

React support React.CreateElement method. But it is a hard task to write code with React.CreateElement Method. So, we use jsx syntax to write our react code. But react does not support any jsx syntax. So, how deos it works? Okey, let me explain. When we write code in jsx syntax, there is a “transpiler” inside create-react-app which is convert our code to React.CreateElement version. And this compiler is called the Babel.

Transpiler

A compiler that translate one form of syntax into another syntax is called a “transpiler”. A Transpiler helps us to write code with a suitable syntax then he translate this suitable syntax into complex syntax as a programming language needed and this way the application works.

JSX

JSX is neither HTML nor javascript. It’s a son of javacript and grandson of HTML , So, traditionally it is called javascript extension. JSX allows us to write javasript function calls like HTML syntax. JSX is usually use to write a comfortable code in react app. But React support react.createElement() syntax. Which is hard to write. See the code below

const Button = () => {
  return React.createElement(
     'button',
      null ,
     'hello world'
   )
}

And the jsx syntax easy to write, maintain and understand.

const Button = () => {
  return <button>hello world</button>
}

This jsx code translate the bable to react.reateElement() version then react works.

What React.CreateElement() contain inside it

React.createElement is the only thing that react app understand. Let’s see what things reat.createElement contain.

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello React',
  ),
  document.getElementById('mountNode2'),
);

In this example, the first argument is the HTML “tag” for the DOM element to represent. The second argument is for “attribute” but in this example, we didn’t use any attribute, so, we write it null. And the third argument is the content of the DOM element. And we put a “hello React” string there.

ReactDOM.render()

ReactDOM.render() helps react.createElement() calls to see in the browser dom.

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello React',
  ),
  document.getElementById('mountNode2'),
);

Virtual DOM

The “virtual DOM” is the lightweight javascript representation of the actual DOM. Updating the virtual DOM is faster than updating the actual DOM. When we make any update in our application the virtual DOM update the necessary things, instead of update the whole DOM.

Props vs. state in react

In react component props is a variables that is used to pass objects, function etc. to the child component via parrent component.On the other hand state is also a variable but it is directly ititialized and maintain by the component. The state can be initialized by props. So, these are the main difference between props and state.

Diffing Algorithm

When a state fo a react component changes, react updated the virtual dom tree. Once react updated the virtual dom. Then react started comparing with the updated virtual dom and the previous verson of virtual dom. This process is called “Diffing”.

So, guys, this is the end of this article.