itappspace
|
React Basic Example2025-3-28 9:7 8 0<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" href="#" /> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js" ></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" ></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <link rel="stylesheet" href="src/components/lists/lists-style.css" /> </head> <body> <div id="root"></div> <script type="text/babel"> const root = ReactDOM.createRoot(document.getElementById("root")); class App extends React.Component { constructor() { super(); this.state = { courses: [], }; } componentDidMount() { fetch("https://pokeapi.co/api/v2/pokemon") .then((res) => res.json()) .then((json) => { this.setState({ courses: json.results }); }) .catch((error) => console.error("Error fetching data:", error)); } render() { return ( <div> <h1>SmartAILearn.com</h1> <input type="search" placeholder="Search..." /> <ul> {this.state.courses.length > 0 ? this.state.courses.map((c, index) => ( <li key={index}>{c.name}</li> )) : <li>Loading data...</li>} </ul> </div> ); } } root.render(<App />); </script> </body> </html> |
| 回复 | |