Skip to content

Latest commit

 

History

History
248 lines (179 loc) · 6.59 KB

README.md

File metadata and controls

248 lines (179 loc) · 6.59 KB

React JS Beginner to Advanced

Create React App

  npx create-react-app react-app
  cd react-app
  npm start
import React from "react";

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

export default Greet;
import React, { Component } from "react";

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

export default Welcome;
import React from "react";

const Hello = () => {
  return (
    <div className="dummyClass">
      <h1>Hello JSX</h1>
    </div>
  );
};
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;
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;

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;

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;
import React from "react";

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

export default UpdatedComponent;