React JS

react Route

https://www.digitalocean.com/community/tutorials/how-to-handle-routing-in-react-apps-with-react-router

Create React app command:

npm init react-app react-redux-app

npx create-react-app my-app

//install latest node version

sudo n stable

To solve the issue

unable to get local issuer certificate

npm config set strict-ssl=false

Redux:

https://medium.com/@bretcameron/a-beginners-guide-to-redux-with-react-50309ae09a14

https://medium.com/swlh/what-is-redux-b16b42b33820

https://www.edureka.co/blog/react-redux-tutorial/

Custom table with colspan and rowspan

                <table  >

                  <tr > <th rowspan="2">Activity</th><th rowspan="2">Code</th> <th colspan="2">2021</th> <th colspan="2">2022</th> <th colspan="2">2023</th> </tr>

                  <tr>

                  

                    <th>Q1</th> <th>Q2</th>

                    <th>Q1</th> <th>Q2</th>

                    <th>Q1</th> <th>Q2</th> </tr> 

                  <tr>

                    <td>Activity2</td><td>code2</td> <td colspan="6"> <Progress percent={100} /></td>

                    </tr> 

                  </table> 

//JSON Array filter using array of values

  let animals = [{name: "dog"}, {name: "snake"}, {name: "monkey"}, {name: "donkey"}, {name: "monkey"}, {name: "monkey"}]

let element = ["monkey", "snake"]

let rs= animals.filter(i => element.indexOf(i.name) >= 0);

alert(JSON.stringify(rs));

Change Port in React JS

"start": "set PORT=9999 && react-scripts start",
https://medium.com/@kayodeniyi/simplest-react-app-setup-a74277b99e43

1. npx create-react-app directory name

//Modal using react bootstrap

 toggleModal= () => {

  this.setState({

    visible: !this.state.visible     

  });   

}

<Modal className={'modal-primary'} isOpen={visible} onHide={this.handleClose}   animation={true}>

        <ModalHeader toggle={this.toggleModal} closeLabel="X">

       Test

        </ModalHeader>

        <ModalBody>Woohoo, you're reading this text in a modal!</ModalBody>

        <ModalFooter>

          <Button variant="secondary" >

            Close

          </Button>

          <Button variant="primary" >

            Save Changes

          </Button>

        </ModalFooter>

      </Modal> 

Modal using Ant design

 toggleModal= () => {

  this.setState({

    visible: !this.state.visible     

  });   

}

        <Modal

          title="20px to Top"

          width={900}

          style={{ top: 55 }}

          visible={visible}

          onOk={this.toggleModal}

          onCancel={this.toggleModal}

        >

          <p>some contents...</p>

          <p>some contents...</p>

          <p>some contents...</p>

        </Modal>

   

      <Button variant="primary" onClick={this.toggleModal}>

        Launch demo modal

      </Button>