React Concept

Today we are going to talk about some interesting react concepts that will help you to understand react more efficiently. Concepts that we are going to cover in this blog: JSX and the hooks component.

JSX

JSX stands for JavaScript XML⇒( Extensible Markup Language ). It is a syntax extension of javascript that helps us to write HTML codes within JavaScript. There are many good sides of jsx some of these are jsx lets us write any javascript expression within { curly braces }. It is a lot easy to implement better than the other stuff. And one more thing is that jsx is used in camel-cased characters.
An example of jsx: const jsx =

this is a paragraph tag in jsx

Hooks

React hooks are newly introduced in react version 16.8.0. It is an additional feature of react.js. Hooks are used in functional components and let you have state and other react features in the functional components. By using hooks in the functional components we can have an organized codebase and performance webpage. There are many hooks in react they are useState, useEffect, useContext, useRef, useReducer, and so on. Now the useState hook lets you have states in a functional component which we didn’t have in an older version of react. The useEffect hook lets you have any kind of side effect in your component such as HTTP requests and so on. The useContext hook is used to get any kind of data from anywhere on the react website.
Now there are some rules about react hooks:
Hooks can only be used in react functional components.
They only can be called at the top level of components.
And they can’t be conditional like any other component or element in react functional component.