React 应用程序看起来与 w3school 和其他教程中的不同

Question

这是 w3school 或其目录中其他课程的默认应用程序代码 (/myfirstreact/src/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" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
    }

    export default App;

这是我的：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

我仍然没有改变任何东西，我不能用这个不同的代码来学习课程甚至当我手动输入默认代码时，我也会收到很多错误！！！！有人可以告诉我如何解决这个问题吗？？

Answer 1

你应该把错误放在这里，但我发现代码之间有很大的不同。

w3school 代码使用 Class:

class App extends Component {

并且您正在使用函数：

function App() {

两个代码都可以。

所以...我需要知道如何使用 App 组件。它应该是这样的：

import App from './App.js';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

如果您也这样做，请尝试将所有代码放入 condesandbox (https://codesandbox.io/) 并在此处共享！

Answer 2

Facebook 在其 16.8 版本中引入了 Hooks，它仅适用于功能组件，因此在一些教程中，他们已经开始实施新的 hook API 这就是您发现功能组件的原因。w3schools 尚未更新他们的Hook API.

教程

我建议你从 HOOK API 开始，因为它很容易理解，而且与 class 基本组件相比，内存泄漏更少，并且它们解决了 [=] 中存在的许多问题22=] 基本组件。

钩子启动可以参考下面link:

https://reactjs.org/docs/hooks-reference.html

React 应用程序看起来与 w3school 和其他教程中的不同

react app looks different from one in w3school and other tutorials

default

reactjs