2.8 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036163	Creare un componente React	6	301386	create-a-react-component

--description--

L'altro modo per definire un componente React è con la sintassi ES6 class. Nell'esempio seguente, Kitten estende React.Component:

class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>Hi</h1>
    );
  }
}

Questo crea una classe ES6 Kitten che estende la classe React.Component. Così la classe Kitten ora ha accesso a molte funzionalità React utili, come lo stato locale (local state) e gli agganci del ciclo di vita (lifecycle hook). Non preoccuparti se non hai ancora familiarità con questi termini, saranno coperti in maggior dettaglio nelle sfide successive. Nota anche che la classe Kitten ha un constructor definito al suo interno che chiama super(). Esso usa super() per chiamare il costruttore della classe genitore, in questo caso React.Component. Il costruttore è un metodo speciale usato durante l'inizializzazione degli oggetti creati con la parola chiave class. È buona pratica chiamare il constructor di un componente con super e passare le props ad entrambi. Questo assicura che il componente sia inizializzato correttamente. Per adesso, sappi che è uno standard includere questo codice. Presto vedrai altri usi per il costruttore e le props.

--instructions--

MyComponent è definito nell'editor di codice usando la sintassi di classe. Termina la scrittura del metodo render in modo che restituisca un elemento div che contiene un h1 con il testo Hello React!.

--hints--

Il componente React dovrebbe restituire un elemento div.

assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');

Il div restituito dovrebbe fare il render di un elemento di intestazione h1 al suo interno.

assert(
  /<div><h1>.*<\/h1><\/div>/.test(
    Enzyme.shallow(React.createElement(MyComponent)).html()
  )
);

L'intestazione h1 dovrebbe contenere la stringa Hello React!.

assert(
  Enzyme.shallow(React.createElement(MyComponent)).html() ===
    '<div><h1>Hello React!</h1></div>'
);

--seed--

--after-user-code--

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

--seed-contents--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // Change code below this line



    // Change code above this line
  }
};

--solutions--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // Change code below this line
    return (
      <div>
        <h1>Hello React!</h1>
      </div>
    );
    // Change code above this line
  }
};

2.8 KiB Raw Blame History