Some Basic Concept About React

As a beginner, we have some common questions and sometimes we need to know some basic concepts. In today’s writing, I am going to discuss this type of concept. Let’s get start.

React is framework or library?

This is a very common question. First, I will try to give you some concepts about framework and library. Basically, framework means a bigger thing and library means a tiny thing. Framework has own strict rule and regulation but library has no strict rule. That means you can do with your own style in library. Actually from my perspective, framework comes with many tiny library. Hope you got some concept about library and framework. Let’s talk about react. React is a library. It is a very small library. To work with react, we need to use other libraries to make an application fulfill. As it is not a framework, so it is not everything inbuilt. That’s why we need to use other libraries.

ReactDOM.render

This is actually the starting of a react application. From here DOM will redered. It has two arguments.

1. The first argument will take a value of react element
2. The second argument will take a value where it have render

React.createElement

This is the core process of a react application how it create element one by one. It has three arguments.

1. Which tag we want to create. Ex: div, span, h1 etc.
2. Attribute of tag. Ex: class, id etc
3. Content of the tag. Ex: Hello world

Let’s take a look at the code.

What is JSX?

It is an interesting topic. JSX stand for Javascript XML. It helps us to write HTML in React. Actually, it is a syntactic sugar. A compiler is needed to compile it to pure javascript code. In this case, react is using babel. Let’s an example with JSX.

Let’s see. We write simply a div as we write on HTML. Babel will compile this and give a compiled copy to react library. If we do not use JSX, then how it looks like? Let’s try it.

Now see JSX makes our code how much easy.

Virtual DOM

Virtual DOM is a hot topic in react. Somebody thought virtual DOM is the reason for getting popular of react. It makes react more efficient. So what is virtual DOM?

As you are reading about react you must have to know JS DOM. DOM means Document Object Model. Browsers have a DOM tree. With that browser can understand our code. What react done? React also make a DOM tree in its system. When we update anything on our DOM tree, react take a snap before and after an update. Then react match these two snap. React can understand where we made changes by its diffing algorithm. Then react will update only the changed spot. Others will remain unchange.

Components

We can consider every item as a component. Actually, a bundle of code is component. We can reuse it if we need. There are two types of components. One is functional component and other is class component.

State

We can use dynamic value in our code. Something may change in our page. Suppose we are counting 1 to 10 by clicking a button. Every time button click will occur change the number. That means we are changing the state of the number. We can write a state in functional component like this way.

const [counter, setCounter] = React.useState(0)

Here a state has two values. One is like variable which is counter. And other is like a function which is setCounter. And we set a default value which is 0. We update setCounter and the updated value will store on counter.

Props

When we want to pass data from parent component to child component, we need something. There are many ways to pass data. One simple way is props. Suppose we are on App component. And we want to pass data to its child component Hello in this way.

We pass a dynamic value world to the Hello component. Now we have to receive the props from the Hello component. Take a look.

Here props is actually an object. So We have to use the object property.

Conditional Rendering

Suppose we are eating food. It may be soup or noodles. If we eat soup we need a big spoon called ladle or if we eat noodles we need a fork.

We can write conditional value with ternary operator. Take a look how is ternary operator.

food === 'soup' ? 'ladle' : 'fork'

Here we check is our food soup. If it is then it prints ladle or it is not soup then it prints fork. Now we may represent this scenario in our code.

defaultProps

We pass props to the child element. Sometime it may occur we didn’t pass any props but mistakenly we receive props. Then there should a null value. And it may give us an error. To avoid this situation we can send default props. Let’s take a look

If props.food is not provided then it will take the default value.