Learn Something on React JSX and Hooks

React

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

JSX

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.t is easy to create a template using JSX in React, but it is not a simple template language instead it comes with the full power of JavaScript.
It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript. Instead of separating the markup and logic in separated files, React uses components for this purpose. We will learn about components in detail in further articles.

Characteristics of JSX:

• JSX is not mandatory to use there are other ways to achieve the same thing but using JSX makes it easier to develop react application.
• JSX allows writing expression in { }. The expression can be any JS expression or React variable.
• To insert a large block of HTML we have to write it in a parenthesis i.e, ().
• JSX produces react elements.
• JSX follows XML rule.
• After compilation, JSX expressions become regular JavaScript function calls.
• JSX uses camelcase notation for naming HTML attributes. For example, tabindex in HTML is used as tabIndex in JSX.
• Advantages of JSX:
• JSX makes it easier to write or add HTML in React.
• JSX can easily convert HTML tags to react elements.
• It is faster than regular JavaScript.
• As JSX is an expression, we can use it inside of if statements and for loops, assign it to variables, accept it as arguments, or return it from functions.
• JSX prevents XSS (cross-site-scripting) attacks popularly known as injection attacks.
• It is type-safe, and most of the errors can be found at compilation time.

Hooks

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.
When to use a Hooks
If you write a function component and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.

Rules of Hooks

Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hooks rule ensures that all the stateful logic in a component is visible in its source code.
These rules are:
i.Only call Hooks at the top level
Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a components renders.

ii.Only call Hooks from React functions
You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components. Hooks can also be called from custom Hooks.

Hook State

Hook state is the new way of declaring a state in React app. Hook uses useState() functional component for setting and retrieving state.

Custom Hooks

A custom Hook is a JavaScript function. The name of custom Hook starts with "use" which can call other Hooks. A custom Hook is just like a regular function, and the word "use" in the beginning tells that this function follows the rules of Hooks. Building custom Hooks allows you to extract component logic into reusable functions.

Built-in Hooks

Basic Hooks

• useState
• useEffect
• useContext

Additional Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

Prop-Types

Prop-Types are simply a mechanism that ensures that the passed value is of the correct datatype. This makes sure that we don’t receive an error at the very end of our app by the console which might not be easy to deal with.

State props

In a React component, props are variables passed to it by its parent component. State on the other hand is still variables, but directly initialized and managed by the component. The state can be initialized by props.