The Fundamental Topic Of React.JS
React is a JavaScript library for building user interfaces.
What Is React
For Frontend developers, the javascript library as known as React.JS is very popular. It helps to make a Web UI easily. Let's know about the core fundamental topic of React.JS.
React For Why
With the competition, Angular and Vue.JS luckily be a good choice React got the best position for most developers. Because it's easy to learn and easy to work. React made the development fast and smooth. If you are comfortable with JavaScript and ES6 then you will learn to React easily.
Components
React components can be function or class. It's like a template. You can also tell it's a global definition and blueprint. The basic structure of components is like the usual JS function. A component has one or more states where data are stored and the output depends on it.
The helpful thing is that components make code readable and easy to work with it.
Virtual DOM
Virtual dom is only a virtual representation of the real dom. Every time the state of our application changes and the virtual dom update in place of real dom. When new elements are included in your UI virtual dom create a virtual tree. And all elements are joint on this tree. If any element changed virtual dom compare it to the previous virtual dom tree. If it is done virtual dom calculate and change the method of real dom.
Virtual DOM is much faster and efficient. When virtual dom comes and its performance is better than the real dom.
React Hooks
React-hook is like a function. Hooks solves the problem of code reuse components. Hooks are written without classes. That means its only works with the use of functional components. Usually, almost react developers are familiar with react-hooks.
UseState In React.js
The state contains specific data that can change over time to a component. By the use of useState you can change the data that you have given in your code. Always when you use the useState you must have to import it.
Example ( )
import React, { useState } from ‘react’; 2:
function Example() {
const [count, setCount] = useState(0); 5:
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>10:
Click me
</button>
</div>
);
}UseEffect In React.js
UseEffect is used to update the document by using the browser API. If want to show the data that you got from the API you must use the useState hook. By declaring the useState you will be able to show on your UI.
Example ( )
JSX
JSX is a syntax extension of javascript. It reminds you of a template language but it comes with the full power of javascript. JSX produce react elements. JSX syntax like HTML but it is not HTML. JSX doesn’t know HTML and HTML don’t know JSX. Even browsers also don’t know what is JSX. When your code is written as JSX at React it will convert to HTML then browsers understood and show outputs.
