I add two react js component in my html, but one not worked in chrome console i see error in js file in 1 line import React from 'react' Uncaught SyntaxError: Unexpected identifier
first js file work correctly, this import React form 'react' i used in our page and this worked correctly why?
My js file:
import React from 'react'
const Header = (props) => (
<h1>{props.title}</h1>
)
const e = React.createElement;
class BookEditPage extends React.Component {
constructor(props) {
super(props);
this.state = {comments: [],books: []};
}
componentDidMount() {
Promise
.all(
[fetch('/api/comments').then(response => response.json())
,fetch('/api/books').then(response => response.json())])
.then(([comments,books]) => this.setState({comments,books}));
}
render() {
return e(
<React.Fragment>
<Header title={'Books'}/>
<table>
<thead>
<tr>
<th>ID</th>
<th>Book</th>
<th>Author </th>
<th>Genre</th>
</tr>
</thead>
<tbody>
{
this.state.books.map((book, i) => (
<tr key={book.id} >
<td>{book.id}</td>
<td>{book.bookName}</td>
<td>{book.author.authorName +' ' + book.author.authorSurname}</td>
<td>{book.genre.genreName}</td>
</tr>
))
}
</tbody>
</table>
<Header title={'Comments'}/>
<table>
<thead>
<tr>
<th>ID</th>
<th>Book name</th>
<th>Comment body</th>
</tr>
</thead>
<tbody>
{
this.state.comments.map((comment, i) => (
<tr key={i}>
<td>{comment.id}</td>
<td>{comment.book.bookName}</td>
<td>{comment.commentBody}</td>
</tr>
))
}
</tbody>
</table>
</React.Fragment>
)
}
}
const domContainer = document.querySelector('#book-edit-table');
ReactDOM.render(e(BookEditPage), domContainer);
my html file:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Edit book</title>
<style type="text/css">
body {
padding: 50px;
}
label {
display: inline-block;
width: 100px;
}
input:read-only {
background: lightgray;
}
.row {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="like-button"></div>
<div id="book-edit-table"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="/LikeButton.js"></script>
<script src="/BookEditPage.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire