Think in a React Way

4 min readMay 7, 2021

Hello Developers!!
This is Hasan Rana(Web Developer) again here to talk about something interesting. Today I talk about some React core concepts. So don’t waste your time get ready to know about React core in React way.

What is React —

React is a very popular small javascript library that builds user interfaces nowadays. its do very easy to make applications rather than row HTML, CSS, Javascript. and its more beautiful things is its Virtual DOM and Diffing Algorithm. there all make your app very efficient and faster.

Virtual Dom —

We all know DOM is a “Document Object Model”.who worked in the browser. Normally as we can see, when we interact on our site, the Dom is reloading everything in our site and it takes some time for rendering. that's why it's not very efficient. to solve this problem react can go a different path and they discover the Virtual DOM. Now Question is, What is Virtual Dom??
Virtual Dom is one of the most interesting things in React. Actually, when you update your app in a specific part, Virtual Dom works in there. when you render your app in the browser the Virtual Dom creates a copy to Main Dom in Browser. and React compare 2 different dom (one is Main Dom other is Virtual Dom) and trying to understand which part is Changed in your React App. after detecting the changed part, Virtual Dom only rendering this specific part for this kind of work there are not need to reload a Full Page. That why it's more efficient and popular with others.

React Component —

Another part of React that does React Popular, is called Component. Basically, Component broke our Application Part by Part, and to create your Application these things make it much easier to develop your app. When you create a dynamic Application you should do every part of your app like a Component, and work on it. The components are reusable, developer-friendly, and much more. Within many components are make one React Application.

React Hooks —

Another most used case and beautiful thing in React is Hooks. The Hooks makes developer life easier. so now the question is What is Hook?? If I say in one word, The Hooks is Just a little bit “Function”.Hooks are used only in Functional Components its not work on Class components so be careful. Basically, it's used for sharing stateful logic between components.

JSX in React —

JSX means ‘Javascript XML’. JSX and HTML are almost similar but there are interesting things between JSX or HTML. Because on one side of React, React doesn’t know about HTML, on the other side browsers don’t know about JSX. For the situation in the middle babel is work on it. So now the question is where to come to babel in this situation? and how it works in the middle of solving it? wait! I will clear the confusion. When React knows the JSX so we used JSX in the React and for introducing this JSX in the browser a babel work as a Compiler.it means when we write JSX code in React then babel Compiling this JSX and converted to HTML then we render the HTML in the browser. And the browser shows on UI.

Props in React —

Props work as an agent in React. It regularly transfers data from one component to another. When we need data from another component then we send its parent component as a prop and receive these props in the child component and use it easily.

React State —

The state is a Hook. We use it for storing any data like objects, array, etc. when we load data from API or another then we don’t use it directly in this kind of situation we need a data store. So in this situation, we used State for the data store. and from the State, we used data dynamically.

Conditionally Rendering —

When we need to show data on specific users or admin then we use Conditionally Rendering. That means we specify the data, to show which data show on which user. and Rendering the specific data for a specific users. For the conditionally rendering we used the “if, else” method or ternary operator.

Why Redux or not —

The confusion is every newcomer developer is, Redux is used to React or without Redux React can do anything special. And some people say React gained its popularity for the Redux.
This is absolutely WRONG!! Because React is only popular in its own way. and Redux is just a state management system. A large scalable Application has lots of data. that's why they are used redux only for use to make their data management system easier. but it is also going on wrong. Because React provides enough systems for the large applications managing data like “State and Context API’’. So it’s necessary to clear the newcomer developers’ confusion about React and Redux that’s why I talk about it. So finally I say React no need for another its have enough of her own beauty.

Events in React —

The Javascript event and React event are totally different. Because React has its own DOM called Virtual Dom. That's why it's different those things but similarly. We used different ways to declare events in React.
Synthetic events,

It’s wrong to declare the value as a string. Because React doesn’t know that. it’s always used in Curly braces.
declare events property in React is used in CamelCase. Because JSX knows camelCase.

So Finally, hope it helps you to know about the basics of React core concepts and clear much confusion on it. All the best and best wishes to you! bye, for now, good to see you next time.

#Happy_Coding