React,JSX,Virtual Dom,Components,Functional Component,Class Component,React hooks,props,state.

React:

React (sometimes called React.js or ReactJS) is a JavaScript library for building a fast and interactive user interface. It was originated at Facebook in 2011 and allows developers to create sizeable web applications or complex UIs by integrating a small and isolated snippet of code.

In some quarters, React is often called a framework because of its behavior and capabilities. But technically, it is a library.

JSX:

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

Virtual Dom:

We all know DOM is a “Document Object Model”.who worked in the browser. Normally when we interact on our site, the Dom is reloading everything in our site and it takes some time for rendering. that’s why it’s not very efficient. to solve this problem react can go a different path and they discover the Virtual DOM. Now Question is, What is Virtual Dom?
Virtual Dom is one of the most interesting things in React. Actually, when you update your app in a specific part, Virtual Dom works in there. when you render your app in the browser the Virtual Dom creates a copy to Main Dom in Browser. and React compare 2 different dom (one is Main Dom other is Virtual Dom) and trying to understand which part is Changed in your React App. after detecting the changed part, Virtual Dom only rendering this specific part for this kind of work there are not need to reload a Full Page. That why it’s more efficient and popular with others.

components:

React code is made of entities called components. Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass in values that are known as “props”

A component is a reusable chunk of code. Components make it possible to divide any UI into independent, reusable pieces and think about these pieces in isolation. Just like a pure function, a component should ideally do just one thing. Greetings vis the name of your component class. In React, components conventionally start with a capital letter to differentiate them from normal HTML elements. The extends keyword is used in class declarations or class expressions to create a class as a child of another class. That is, to create a subclass of a class.

To create this component class, you use a base class from the React library which is React.Component. When you do this, you are actually subclassing React.Componen. So the above is the syntax for creating a component class.

Note: This is not the only way to create a component. I just find this one more convenient.

Functions vs classes:

class Component syntax:

Class-based components are declared using ES6 classes.

import React from "react";
import ReactDOM from "react-dom";

class Greeting extends React.Component {
render() {
return (
<div className = "box">
<h2> Hello Human Friend!!!</h2>
<p> We are so glad to have you here. </p>
</div>
);
}
}

ReactDOM.render(<Greeting />, document.getElementById("app"));

Functional Component syntax:

Functional components are declared with a function that then returns some JSX.

import './App.css';
import ReactDOM from "react-dom";
function App() {return ( <div className = "box">
<h2> Hello Human Friend!!!</h2>
<p> We are so glad to have you here. </p>
</div>
);}export default App;

React hooks:

Hooks are functions that let developers “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

React provides a few built-in hooks like useState,useContext, useReducer, and useEffect. Basically, useState, useReducer and useEffect , which are the most used, are for controlling state and side effects respectively.

Rules of hooks:

There are rules of hooks that describe the characteristic code pattern that hooks rely on. It is the modern way to handle state with React.

  1. Hooks should only be called at the top level (not inside loops or if statements).
  2. Hooks should only be called from React function components, not normal functions or class components

Although these rules can’t be enforced at runtime, code analysis tools such as linters can be configured to detect many mistakes during development. The rules apply to both usage of hooks and the implementation of custom hooks, which may call other hooks.

Instance Properties:

props:

Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass in values that are known as “props”.Custom attributes can also be passed to the component. All attributes will be received by the component as props.

for functional Components:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

for class Components:

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

state:

Like props, state holds information about the component. However, the kind of information and how it is handled is different.

When a component needs to keep track of information between renderings the component itself can create, update, and use state. state is created in Components.

Learner, Web developer