Why React is popular?

Framework or Library?

This is a misconception that React is a framework. React is not a framework, it is a javascript library. Frameworks are not flexible. Framework usually wants us to code everything in a certain way. Where library gives us more freedom. Frameworks are also usually large and full of features. If we need to use only a small piece of them, we have to include the whole thing anyway.

DOM Manipulation

React updates DOM in a very special way. If we make any changes in DOM React does not replace the whole DOM rather React makes a virtual DOM and comper between two DOM. If React finds any changes there, React just updates the only that changing without replacing the whole DOM. That’s why React is so fast.

Components

We can create reusable, composable, and stateful components in React. We don’t need to repeat our code if we use components. Components make our code clean, simple, and easy to read. We define small components and then put them together to form bigger ones. All components small or big are reusable, even across different projects. e can reuse a single component in multiple UIs and components can contain other components.

React Hooks

React Hooks are nothing but a special function. Hooks are usually begun with the “use” word. For example “useState”, “useEffect”, “useContext”, “useReducer”, “useCallback”, and so on. React hook functions can only be used in functional components. We can’t use them in class components.

React JSX

React create an element with React.createElement(component, props, …children) this function. JSX is the syntactic sugar of this function. React compile this JSX into that function. JSX element’s name should start with a capital letter. Just like normal HTML attributes, we can set props in JSX.

Props Types

If you are learning React then you should definitely know that what props are? We pass different types of data using props. But if we pass the wrong data type through props. Suppose, we have written a component where we are mapping an array. But accidentally, we pass an object. Here is an npm package called props-types, which helps us to debug. This is not an alternative to typescript. We can just check props’ type whit it.

Ternary operator

Well, we can not use if…else conditional statement in JSX. But sometimes we need to conditionally render state or JSX element. Suppose, you have a state isNew. If isNew is equal to true then you want to show a green background color in the JSX element. But if isNew is equal to false then you want to show a gray background color in the JSX element. Though we can not use if…else in JSX, we can use the ternary operator. It is easier than if…else. If you don't know what ternary operator is, Ternary is the simplest version of if…else.

Unnecessary Flux

Every React newcomer thinks that they need to use Flux implementation like Redux. Redux is great. It’s the most popular Flux implementation but we might need it. If we are learning React, if our app is small, if we don’t need a global state or we don’t have any problems with tracking the state changes in our app, We don’t need to use it.

Single Page Application

We can create a single-page web application using React. This feature makes React more powerful. If we create a single-page web application, our website will be faster than any other normal website. Because we need to load only one page to show. Instead of rendering many pages, we will render many components. That’s why when we visit one page to another our browser does not refresh the whole new page. Instead of doing this browser only render the specific components.

Template Language

Many JavaScript frameworks use template language. Instead of template language, we use JSX in React. JSX is easier than any other template language. We can do everything that a template language does with React. This is one of the reasons why developers like React.