React Fundamentals You Should Know

Today we are going to discuss basic react fundamentals that you should know very closely.

React Fundamentals
  1. Concept of virtual DOM:

In modern web development, DOM is crucial to understand. Modern Javascript DOM stands for the document object model, it is mainly used to create nodes using javascript. Nowadays, DOM is the heart of the modern interactive web.

if I want to describe virtual DOM then I would say virtual DOM is simply a representation of a JavaScript DOM object like a lightweight copy.

virtual DOM object has the same power and has properties and methods like DOM object. but virtual DOM can’t decide what’s on the screen. The virtual DOM is just like a blueprint where you can decide to move your bedroom just beside the hall but not actually move it because it is just a blueprint.

2. JSX:

JSX is a javascript extension that provides synthetic sugar for function calls and object constructions. It may look like a template engine or HTML but it isn’t, the benefit of using JSX is, JSX makes code easier to read.

Using JSX you can modify your code easily if you are familiar with the standard HTML language. The most important benefit of using JSX is to write less code.

which means they make fewer mistakes and they are less likely to develop repetitive stress injuries.

3. Components:

Components are part of a small piece of UI. The benefit of using components is that it can be used whenever you want. You can use one component into another component for your entire project. There have two types of components:

(1) Functional Components: functional components are basic javascript functions. These are typically arrow function but can also be created with the regular function keyword. For example:

import React from ‘react’

const example = () => {

return (

<div>

Hello

</div>

)

}

export default example

(2) Class Components: class components makes use of the ES6 class and extend the component class in react. See the example below:

import React, { Component } from ‘react’

class example extends Component {

render() {

return (

<div>

Hello

</div>

)

}

}

export default example

The difference between functional components and class components are, functional components use the return method but class components use the render method, and also class components use componentDidMount but functional components aren’t used that.

4. React Fragments:

When you use the react component, all of your JSX are rapping with one a div because you know that react render one element. Instead of using div you can use React.Fragment or you can use <> empty tag element.

The benefit of using react fragment, it will reduce extra DOM elements. For example, You can see the below code:

import React from ‘react’

const example = () => {

return (

<>

Hello

</>

);

};

export default example

5. Props:

Props you can think about as like arguments to a function. When you create a component inside of react and you want to render it. You’re going to pass it the props that you want to give to it.

For example, let’s say that you have a counter application. The thing that you’re most likely going to pass to that. The counter is going to be the initial count. Essentially what your count should start at, so you’re going to pass your counter component.

Its initial count inside of the props and the reason we’re using props for this is that props are kind of for things that you passed, It’s like a function there what you want to initialize your component.

Self-taught frontend developer