React.js | Complex Level

To import jQuery library, Use the following line:
import $ from "jquery";
Here, "jquery" is the name of the npm package.
The React class and the Component class are imported fron the "react" package.
To call any method of the class component in their render() method, Use
this.function_name().
To insert a state variable or prop variable enclose the variable name in {} , this will put the value at the place it is typed for e.g., <input type="text" value={this.state.gaurav} />

The "react-redux" contains a connect() method which is used to save data of a component across multiple HTTP requests.

To impose a single file like CSS file use the following:

import "file_name.css"

Writing lambda expressions in the render() method, for e.g.,

<button onClick={(e) => eventHandler()}>Test button</button>

To store multiple variables in the props object with user defined variable name use

const {name address, state} = props;

You can pass functions or methods as props , for e.g., if I want to give my method to a child component you can use the following line of code in the child component.

this.props.function_name

How to do conditional styling in ReactJS use

style={(this.style.backgroundColor=="red" ? "color:green : color:yellow)}

How to download Excel files in React.js

1. Import the "react-csv" package
2. import CSVLink component from the "react-csv" package
3. import CSVDownload component from the "react-csv" package

render() {
    let headers = [
        { label: "First Name", key: "firstname" },
        { label: "Last Name", key: "lastname" },
        { label: "Email", key: "email" }
      ];
      
     let data = [
        { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
        { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
        { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
      ];  
    return (
      <div>
            <CSVLink data={data} headers={headers} 
            filename={"my-file.csv"}
            className="btn btn-primary"
            target="_blank">Download me
            </CSVLink>
      </div>
    )
  }

How to create PDF's in React.js Steps:
1. Download gthe pdfmake package from the npm repositiory
2. import vfsFonts from 'pdfmake/build/vfs_fonts'

export const generatedPdf=(content,name)=>{
    const {vfs} = vfsFonts.pdfMake;
	pdfMake.vfs = vfs;
    let data={
        columns: [
            {
                image: 'https://xuz.com/i/p.png'
                ,width: 45
                ,height:20
            },
          {
            width: 'auto',
            text: 'First column'
          },
          {
            width: '*',
            text: 'Second column'
          },
          {
            width: 100,
            text: 'Third column'
          },
          {
            width: '10%',
            text: 'Last column'
          }
        ],
        columnGap: 10
      }
   
  
  var docDefinition = { content: [data] };
 // open the PDF in a new window
//  pdfMake.createPdf(docDefinition).open();

//  // print the PDF
//  pdfMake.createPdf(docDefinition).print();

 // download the PDF
 pdfMake.createPdf(docDefinition).download(`${name}.pdf`);

To link a variable's state to an HTML element use
checked={this.props.rank==1}

How to implement inline styling in CSS
style ={{ color:'red', backgroundColor:'green'}}

How to call a function in render function's return statement(JSX)

{function_name()}

Every class component extends the React.Component class

Define anonymous functions in JSX

<button class="square" onClick={function () {console.log("click"); }}>Submit</button>

1. By default when your component state and props changed your component will re-render if your render() method depends on some other data you can tell React that the component needs re-rendering by calling fourth update.
2. To clear all timers write the clearing functions in components will unmount method

this.state.comment = "hello":
Instead use this.setState({ comment: "hello" })
The only place you can assign this.state in the constructor.
You can define multiple objects for a single class component.
To change the state of the child component whenever the parent component propped has changed use the component will receive

How to map your class component state to prop which will be then transferred to the child component. Write the following code.

const mapStateToProps = state = >{
	return {usr: state.auth}
}