10 Fundamental Concept of react.js that you should know as a react.js developer

Hello Programmers! What’s going on? Are you thinking to start learning to react.js? Or you are just a beginner in react.js. If you are in one of these two then think this blog is helpful for you. In this blog, I will explain 10 fundamental concepts of react.js that will help you understand react.js easily.

1. React.js is a library or framework?

Every developer when they were a beginner they simply ask this question that is it a framework or library? Actually, react.js is a library that focuses to build the user interface. The framework is a great technology where much smart design and functionality already build. You can only focus to build a good application. On the other side, a library focus only on one thing, so React focuses on building UI. But there are many drawbacks of a framework also. First of all, a framework is not flexible, a developer must follow their rules and then need to code. Second, if you need to only use a part of a framework, you need to include all of the things that a framework provides which makes your application heavy.

React focus building UI, developer-only focus changing state that what will be changing and where need to change, that's enough. Then React will change, no need for know-how.

2. DOM API and React’s API

An HTML element is rendered in two methods. 1. Web DOM API. 2. React API. Now I will show you using these two methods that will clear your concept.

Using Web DOM API

document.getElementById('mountNode').innerHTML = `
<p>
Hello World!
</p>
`;

Using React API

ReactDOM.render(
React.createElement(
'p',
null,
'hello world'
),
document.getElementById('mountNode2'),
);

without ReactDOM.render and React.createElement method a create application a react application can’t exist.

3. ReactDOM.render

ReactDOM.render is an entry-level of a react application. ReactDOM.render has two arguments. That’s why it focuses only on these two arguments. The first one is what is need to render to the browser. And the render element is always a ‘react element’. The second argument is where the need to render the elements in a browser. So this is the main criteria of a React application for rendering elements.

4. React.createElement

In React, the DOM element represents an object instead of a string. And this method working using React.createElement, it's also a react element.

React.createElement function has many arguments. In the first argument, it passes an HTML tag element. In the above example, ‘p’ which is a paragraph tag is used. The second argument in the DOM element passes that’s we want to have. Here we want just a paragraph element that’s why we used null. And the third argument is the content of the HTML tag. On the above example, our content is ‘Hello world!’.

5. Component in React

Components make our UI more powerful, reusable, and easier for state management. If I’m gonna explain what is a component in just a single word then, ‘A component is like same in look, different in data’. A component is just like a function. We give some input in function then function process the input and give us some output based on the input, nothing else. We can also reuse the function and it makes our code more efficient. Just like is a component in react using this kind of purpose. There are two types of components used in react application. 1. functional component and 2. Class component.

6. Functional Component

Consider the program. Here create a component using a functional component.

const Input = (props) =>{
return(
<div>
<p>{props.text}</p>
</div>
)
}
ReactDOM.render(<Input text='Hello React!' />, mountNode)

Inside return this is not HTML or JavaScript, this is called JSX. Which is an extension to JavaScript that allows us to write function calls in HTML format.

7. Class Component

Consider the program. Here create a component using a class component.

class Input extends React.Component{
render(){
return(
<div>
<p>{this.props.text}</p>
</div> );
}
}
ReactDOM.render(<Input text='Hello React!' />, mountNode)

8. Function Vs Class

The functional component also called the stateless component. On the other side Class components called stateful components. For managing state we use react hooks. In most of the cases now we use functional components because class components are the old version of React. After releasing react hooks the functional components make stateful that's why now developers often use functional components.

9. Components vs Element

You often listen to components and elements, do you what is the difference between them? A component is a template or a blueprint, we use it for making user-friendly UI whereas an element is an object that the function returns. The component is not what we see in the browser, it's just an object in memory.

//these whole template is a component
const Student = () => {
return(
//inside return its an element
<div>
<p>hello react!</p>
</div>
)
}

10. Benefits of Component

Not only React, we often use the component in other frameworks and libraries. Even we use components in HTML5 based applications.

  1. To make your code more useable and efficient it's a better decision to use components.