3
votes

Comment créer une application React.js sans fonction dans App.js

Je viens de finir de taper npx create react app pour créer une application react mais pour une raison quelconque, mon App.js est une fonction et non une classe par exemple)

résultat:

Class app extends components{
   render (return())
}

Je veux quelque chose comme:

function App() {

  return ()

Je pourrais l'écrire manuellement mais je voulez que l'application de classe par défaut lorsque je crée une application pour que quelqu'un puisse me dire quelle en est la cause?

reactjs create-react-app

0 commentaires

3 Réponses :

6
votes

Cela vient juste de sortir de la boîte maintenant pour React. Vous pouvez faire de votre App.js un composant fonctionnel sans état OU un composant de classe.

class App extends React.Component{
   render(){
      return(
        <div>Hello World</div>
      )
   }
}

2 commentaires

C'est correct, mais pourquoi la valeur par défaut est fonctionnelle au lieu de composant? Alors que c'était auparavant une classe .

@FaizanMubasher Facebook a constaté que les composants de classe n'étaient pas très réutilisables, ils manquaient du sens d'interchangeabilité attendu lors de leur conceptualisation. Les développeurs de React mettaient tout en état, ce qui a fini par créer des composants géants et non recyclables. L'idée des hooks est que vous pouvez extrapoler l'état en dehors du composant et les intégrer si nécessaire. C'est le changement que Facebook souhaite voir avec React aller de l'avant.

4
votes

Avec l'introduction des hooks dans React 16.8, les composants fonctionnels peuvent être avec état et supposés pour remplacer les composants de classe dans la plupart des cas. C'est la raison pour laquelle App est un composant fonctionnel dans un projet qui est généré avec le package create-react-app , plus précisément react-scripts .

Il est possible d'initialiser le projet avec d'anciens react-scripts comme modèle:

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;

Et puis de le mettre à jour vers la dernière version: p>

npm -S react-scripts@^3

Étant donné que create-react-app fournit un passe-partout statique pour un projet et ne dispose pas de fonctionnalités d'échafaudage, il est possible de copier et coller App de la version précédente de react-scripts :

create-react-app foo --scripts-version react-scripts@^2

0 commentaires

0
votes

Comme mentionné par @FaizanMubasher, la classe Components n'était pas très réutilisable et manquait de sens de l'interchangeabilité. Cela n'a aucun sens de copier le code de composant de classe des versions précédentes. Il sera idéal d'utiliser s'éloigner des composants de classe et commencer à utiliser des composants de fonction. voici un exemple pour quiconque recherche la bonne approche.

import React from 'react';
import Aux from '../../hoc/Aux';

const layout = (props) => (
  <Aux>
  <div>TOOLBAR, SIDEDRAWER, BACKDROP</div>
  <main>
    {props.children}
  </main>
  </Aux>
);

export default layout;

Présentation des composants de la fonction:

import React from 'react';
import Layout from './components/Layout/Layout';

function App() {
  return (
    <div className="App">
      <Layout />
    </div>
  );
}

export default App;

0 commentaires