W3Schools Tryit Editor

[フレーム]
Get your own React server
main.jsx
index.html
import React from 'react';
import ReactDOM from 'react-dom/client';
class Car extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 brand: "Ford",
 model: "Mustang",
 color: "red",
 year: 1964
 };
 }
 render() {
 return (
 <div>
 <h1>My {this.state.brand}</h1>
 <p>
 It is a {this.state.color}
 {this.state.model}
 from {this.state.year}.
 </p>
 </div>
 );
 }
}
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<Car />);
 
<!doctype html>
<html lang="en">
 <body>
 <div id="root"></div>
 <script type="module" src="/src/main.jsx"></script>
 </body>
</html>
 
localhost:5173

AltStyle によって変換されたページ (->オリジナル) /