时间戳

首页 > 解决方案 > React：使用最小 HTML 模板中的类

javascript - React：使用最小 HTML 模板中的类

问题描述

我正在尝试使用“Try React”页面中的最小 HTML 模板。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
  </body>
</html>

嗯....我想在这道菜中添加一个类文件。例如，文件App.js：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

我该怎么做？

标签： javascriptreactjs

解决方案

下面的代码就可以了，你想尝试什么，提供app.js，app.css并且 与logo.svg你的html. 这不应该在实践中使用。因为Babel实际上是在浏览器上将JSX转换为 JavaScript 。在入门应用程序中，编译是在构建时完成的，浏览器只需要执行脚本。

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <link rel="stylesheet" href="./App.css"/>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" src="app.js"></script>
    <script type="text/babel">
      ReactDOM.render(
        <App></App>,
        document.getElementById('root')
      );

    </script>
   </body>
</html>

和修改过的app.js

class App extends React.Component {
  render() {
      let logo = "./logo.svg";
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

推荐阅读