Let’s know some React

1. What is React: React is is a javascript library, it is not exactly a framework. React is used to build single-page applications. React allows us to create reusable User Interface components.
2. What is JSX: Actually jsx looks like HTML. But we will not call it HTML. Its stands for javascript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

with jsx
-------------------
import React from 'react';
import ReactDOM from 'react-dom';

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));
withOut jsx
---------------------
import React from 'react';
import ReactDOM from 'react-dom';

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

1. What is Virtual DOM: React creates a tree of custom objects representing a part of the DOM. For example, instead of creating an actual DIV element containing a UL element, it creates a React. div object that contains a React. ul object. It can manipulate these objects very quickly without actually touching the real DOM or going through the DOM API. Then, when it renders a component, it uses this virtual DOM to figure out what it needs to do with the real DOM to get the two trees to match.
2. What is Component: Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function. Components come in two types, Class components and Function components.

=========class component===========
class Car extends React.Component {
  render() {
    return <h2>Hi, I have a Car!</h2>;
  }
}
========Function component======
function Car() {
  return <h2>Hi, I have also a bike!</h2>;
}

1. What is Props: Props are arguments passed into React components. Props are passed to components via HTML attributes. React Props are like function arguments in JavaScript and attributes in HTML. To send props into a component, use the same syntax as HTML attributes:
2. What is Context-API: Context API is a new feature added in version 16.3 of React that allows one to share state across the entire app lightly and with ease. Let’s see how to use it. This is the alternative to “prop drilling” or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.

How to use:

import React, { createContext } from "react";
const UserContext = createContext();
const UserProvider = ({ children }) => {
  const [name, setName] = useState("rana");
  const [age, setAge] = useState(1);
  const happyBirthday = () => setAge(age + 1);
  return (
    <UserContext.Provider value={{ name, age, happyBirthday }}>
      {children}
    </UserContext.Provider>
  );
};

1. What is State: State is so important part of React. Sometimes we need to set a data anywhere & after need to use it. In this case, we can use the useState function. In this function, we can set & use our data so easily.

import { useState } from 'react';
const [count, setCount] = useState(0);

1. Conditional Rendering: Conditional rendering is a condition-based render function. Some we need like if the user is male show something else the user is female then shows another thing. In this case, we use conditional rendering & show output to the user.
2. What is Key: When we are mapping an array in react every item has a different unique key or id. if you did not pass key in our components sometimes react has faced some problems. So we need to pass key in components.
3. Higher-Order Components: A higher-order component is a function. which takes a component as parameters & returns a new component. When we want to share the same functionality with different components that time we use higher-order components.