How to add HTML component to React.js
Question
App.html
<!DOCTYPE html>
<html>
<head>
<title>Carousel</title>
<link rel="stylesheet" type="text/css" href="./css/materialize.min.css">
</link>
<link rel="stylesheet" type="text/css" href="App.css">
</link>
</head>
<div class="carousel">
<div class="carousel-item">
<img src={require("./1.png")} class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src={require("./2.png")} class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src={require("./3.png")} class="responsive-img"></img>
</div>
<script src="./js/materialize.min.js"></script>
<script>
const small = document.querySelector('.carousel');
var inst = M.Carousel.init(small, {});
inst.dist(50);
</script>
</div>
</html>
App.js
import React from 'react';
var perf = require('./App.html');
class App extends React.Component {
render(){
return (
<div dangerouslySetInnerHTML={{ __html: perf }} ></div>
);
}
}
export default App;
Can someone please help me with how can I add the HTML file in my JS file and run the HTML file via my JS file. I have made a carousel using materialize in HTML, but I am unable to either write the very code in JS hence, if possible can someone please help me either with converting the HTML file to a JS file, or how can I import the HTML file in my JS file.
2 answers
solution1
2 ACCPTED 2020-07-08 10:32:56
Just use react-create-app template and the basic html (head, meta) things are already in place, Just modify the src dir to meet you needs.
for example the index.js would be something like this,
import React from 'react';
import './App.css'; // For Your CSS file
class App extends React.Component {
render(){
return (
<div class="carousel">
<div class="carousel-item">
<img src={require("./1.png")} class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src={require("./2.png")} class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src={require("./3.png")} class="responsive-img"></img>
</div>
);
}
}
export default App;
if your need to change the base html you can do so in the public dir.
EDIT: (For the dependencies)
As you use materialize-css , You can use that by installing materialize-css@next as a dependency using npm with this cmd npm install materialize-css@next
More info about installing can be found here
solution2
2 2020-07-08 10:44:04
you can simply insert all off your html code in App.js file, reactjs doesn't require any.html file. just follow below code, hope you can understand it. i simply put all HTML code into parent div of App.js.
import React from 'react';
var perf =require('./App.html');
class App extends React.Component {
render(){
return (
<div>
<div class="carousel">
<div class="carousel-item">
<img src={require("./1.png")} class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src={require("./2.png")} class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src={require("./3.png")} class="responsive-img"></img>
</div>
</div>
</div>
);
}
}
export default App;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.