React JS Beginner to Advanced

Create React App

  npx create-react-app react-app
  cd react-app
  npm start

Functional Components

import React from "react";

const Greet = () => {
  return <h1>Hello React</h1>;
};

export default Greet;

Class Components

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello JS</h1>;
  }
}

export default Welcome;

JSX (JavaScript XML)

import React from "react";

const Hello = () => {
  return (
    <div className="dummyClass">
      <h1>Hello JSX</h1>
    </div>
  );
};

Props

import React from "react";

const Greet = (props) => {
  console.log(props);
  return (
    <div>
      <h1>
        Hello {props.name} a.k.a {props.nickName}
      </h1>
    </div>
  );
};

export default Greet;

State

import React, { Component } from "react";

class Message extends Component {
  constructor() {
    super();
    this.state = {
      Message: "Welcome",
    };
  }

  changeMessage() {
    this.setState({
      Message: "Hii",
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.Message}</h1>
        <button onClick={() => this.changeMessage()}>Click Me</button>
      </div>
    );
  }
}

export default Message;

Destructuring Props and State

Function Component

import React from "react";

const Greet = ({ name, nickName }) => {
  //Destructure prop in function parameter.

  // const { name, nickName } = props;  //Destructure prop in function body.
  return (
    <div>
      <h1>
        Hello {name} a.k.a {nickName}
      </h1>
    </div>
  );
};

export default Greet;

Class Component

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    const { name, nickName } = this.props;
    return (
      <div>
        <h1>
          Hello {name} a.k.a {nickName}
        </h1>
        {/* {this.props.children} */}
      </div>
    );
  }
}

export default Welcome;

Event Handling

Function Component

import React from "react";

function FunctionClick() {
  function clickHandler() {
    console.log("Button click");
  }

  return (
    <div>
      <button onClick={clickHandler}>Click</button>
    </div>
  );
}

export default FunctionClick;

Class Component

import React, { Component } from "react";

class ClassClick extends Component {
  clickHandler() {
    console.log("Button Clicked...");
  }

  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>Click Me</button>
      </div>
    );
  }
}

export default ClassClick;

Binding Event Handlers

Methods as Props

Conditional Rendering

List Rendering

List and Keys

Index as key

Styling and CSS Basic

Form Handling

Component Lifecycle Methods

Fragment

Pure Components

Memo

Refs

Refs with Class Component

Forwarding Refs

Portals

Error Boundary

Higher Order Component

import React from "react";

const UpdatedComponent = (OriginalComponent) => {
  class NewComponent extends React.Component {
    render() {
      return <OriginalComponent />;
    }
  }
  return NewComponent;
};

export default UpdatedComponent;

Render Peops

Context

HTTP Get Request

HTTP Post Request