0

For example, here is some of my React codes.

class App extends Component
{
    render(){
    return (
        <div className="App">
            <Header/>
            <LoginApp />       
            <Register />
            <Footer />      
        </div>
        );
    }
}
export default App

Now, I'd like to include the warning panel into this class, but the file was written using just only simple HTML and JavaScript codes. Is there any ways to load the dot html files into the React component class?

Here's the idea.

<div className="App">
        <Header/>      <--React Component 
        <LoginApp />   <--React Component      
        <Register />   <--React Component 
        <Footer />     <--React Component 
        // Load other external html files here... (Non React component)/
</div>

Thank you very much.

PS.I'm extremely new to React.

user3505908
  • 5
  • 1
  • 7
  • Why don't you make a component for it. This will help you in the long run – Gardezi Jul 09 '18 at 08:06
  • Not in a very easy way. Just convert the HTML to a React component (with something like https://transform.now.sh/html-to-jsx/) and rewrite the JavaScript to be React-y. – AKX Jul 09 '18 at 08:08
  • Yep, that's one way of getting it done, but I'd like to know if it's possible or not. – user3505908 Jul 09 '18 at 08:09
  • @user3505908 use this package ==> `html-loader` – Gardezi Jul 09 '18 at 08:10
  • @user3505908 check this solution ==> https://stackoverflow.com/a/46997182/4468132 – Gardezi Jul 09 '18 at 08:11
  • One of the reasons why I want to do this because I'd like to separate the Java Script snippets away from the React. – user3505908 Jul 09 '18 at 08:33
  • HA!!. I have found one BAD thing about the React. It seems like importing native JavaScript file dosen't seems to guarantee that the web page is fully loaded before obtaining the HTML scripts. – user3505908 Jul 09 '18 at 08:37

1 Answers1

0

There are 2 ways for that

Fetching HTML or Setting as Inner HTML

visit this link, There is a code for explain how to do this Add html file to a react component

also this will help Add react to a simple HTML file

Samz
  • 76
  • 10