Question 43287 in Html Question posted in
Some basic documentation can be found here.

connect HTML to Appjs React

How to connect my index.html into App.js (React)?

<div class="content">
  <form action="v2/v2.html" class="form">
    <label for="user">Nama</label>
    <input type="text" name="user" id="user" />
    <button type="button" id="load-app">Load App</button>
  </form>
</div>
<script src="v3-website/src/App.js"></script>

so when I click the button I want it to direct into App.js
can someone tell me how to do that?

I use anchor tag it don’t work

Tags:

2

Answers


  1. 0

    Yes, you can use Javascript CustomEvent to communicate between React Virtual DOM and javascript real dom.

    referent the below snippet.

    const MyEvent = {
  on(event: string, callback: (e: any) => void) {
    document.addEventListener(event, (e: any) => {
      const data = (e as {
        detail: any
      }).detail
      callback(data)
    })
  },
  dispatch(event: string, data ? : any) {
    document.dispatchEvent(new CustomEvent(event, {
      detail: data
    }))
  },
  remove(event: string, callback ? : (e: any) => void) {
    if (callback) {
      document.removeEventListener(event, callback)
    }
  },
}

export default MyEvent
    Login or Signup to reply.
  2. 0

    Assuming you are trying to redirect to a react app on button submit, do the following steps:

    • Build your react app.
    • Deploy your react app.
    • Find deploy path of your react app and use that path on your form action attribute.
    • For form submission, you should use the method="GET".

    Details

    • First you need to build your react app. Run command:

    npm run build

    • Once your react app is built, there will be an index.html file generated inside a build directory.

    build/index.html

    • After build step, you need to deploy your react app to a web server. For serving locally, you can use `npm serve’

    https://www.npmjs.com/package/serve

    • Find the deploy path of your react app and use that path on form action attribute.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search