What is ReactJS

ReactJs is front end library that basically helps developers build fast and scalable front-end web apps, and reduce the effect of manually doing the dom-manipulation

Components:

React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.

React components are JavaScript functions that return markup. To create a component create a file named MyButton.js, and inside that javascript file create a function that returns some HTML.

// src/components/MyButton.jsx
function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

Now that you’ve declared MyButton, you can nest it into another component:

import MyButton from "./components/MyButton"
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

JSX:

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. It was not HTML but the syntax was very similar, that it fell like writing HTML.

Only a few things are different like, in jsx we don't use class, we use className. and also like we have many of these.

<h1 className="heading">I am JSX</h1>
<lable htmlFor="name"> Name: </lable>
// etc...

Hooks

Hooks let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.

You can imagine that React Hooks are like pre-defined functions given by the React library. We have many Hooks, and based on the problem we can decide which hook we want to use. Some of the hooks are useState, useEffect, useRef, useContext, etc

State and Props