Приложение «Реакция» выглядит не так, как в w3school и других уроках. - PullRequest
Новая
       7

Приложение «Реакция» выглядит не так, как в w3school и других уроках.

0 голосов
/ 31 марта 2020

это код приложения по умолчанию в 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;

Я все еще ничего не менял, и я не могу пройти курс с этим другим кодом, и даже когда я вручную набираю код по умолчанию, я получаю много ошибок !!!! Может кто-нибудь, пожалуйста, скажите мне, как я могу решить это?

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Facebook представляет Hooks в своей версии 16.8 и работает только с функциональными компонентами, поэтому в некоторых руководствах они начали реализовывать новый API-интерфейс ловушки, поэтому вы обнаружили, что функциональные компоненты .w3schools не обновляли свои учебники для API Hook.

Я предлагаю вам начать с HOOK API, потому что его легко понять, а также меньше утечки памяти по сравнению с базовыми компонентами класса, и они решают многие проблемы, которые были в базовых компонентах класса.

Ниже приведена ссылка для запуска подключения:

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

0 голосов
/ 31 марта 2020

Вы должны указать здесь ошибки, но я вижу большую разницу между кодами.

Код w3school использует класс: 

class App extends Component {

И вы используете функцию: 

function App() {

Оба кода в порядке.

Итак ... Мне нужно знать, как используется компонент приложения. Это должно быть примерно так: 

import App from './App.js';

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

Если вы делаете то же самое, попробуйте поместить весь ваш код в condesandbox (https://codesandbox.io/) и поделиться им здесь!

...