web-dev-qa-db-fra.com

Comment créer une application à plusieurs pages en utilisant react

J'ai créé une application Web d'une seule page à l'aide de react js. J'ai utilisé webpack pour créer un ensemble de tous les composants. Mais maintenant, je veux créer beaucoup d'autres pages. La plupart des pages sont liées aux appels d'API. c'est-à-dire dans le index.html, J'ai affiché le contenu de API. Je souhaite insérer du contenu dans une autre page en analysant les données de l'API. Webpack compresse tout de réagir dans un fichier qui est bundle.js. Cependant, la configuration de webpack est la suivante:

const webpack = require('webpack');

var config = {
entry: './main.js',

output: {
    path:'./',
    filename: 'dist/bundle.js',
},

devServer: {
    inline: true,
    port: 3000
},

module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
},

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]
}

module.exports = config;

Maintenant, je suis confus quel type de configuration de webpack sera pour une autre page ou quelle est la bonne façon de créer une application multi-pages en utilisant react.js

javascriptjqueryreactjswebpack
25
StreetCoder

(Assurez-vous d'installer react-router en utilisant npm!)

Pour utiliser react-router, procédez comme suit:

  1. Créer un fichier avec routes défini à l'aide des composants Route, IndexRoute

  2. Injectez le composant Routeur (avec 'r'!) En tant que composant de niveau supérieur pour votre application, en transmettant les routes définies dans le fichier de routes et un type d'historique (hashHistory, browserHistory).

  3. Ajoutez {this.props.children} pour vous assurer que les nouvelles pages y seront affichées.
  4. Utilisez le composant Link pour changer de page

Étape 1 routes.js 

import React from 'react';
import { Route, IndexRoute } from 'react-router';

/**
 * Import all page components here
 */
import App from './components/App';
import MainPage from './components/MainPage';
import SomePage from './components/SomePage';
import SomeOtherPage from './components/SomeOtherPage';

/**
 * All routes go here.
 * Don't forget to import the components above after adding new route.
 */
export default (
  <Route path="/" component={App}>
    <IndexRoute component={MainPage} />
    <Route path="/some/where" component={SomePage} />
    <Route path="/some/otherpage" component={SomeOtherPage} />
  </Route>
);

Étape 2 point d’entrée (où vous effectuez votre injection DOM) 

// You can choose your kind of history here (e.g. browserHistory)
import { Router, hashHistory as history } from 'react-router';
// Your routes.js file
import routes from './routes';

ReactDOM.render(
  <Router routes={routes} history={history} />,
  document.getElementById('your-app')
);

Étape Le composant d'application (props.children)

Dans le rendu de votre composant App, ajoutez {this.props.children}:

render() {
  return (
    <div>
      <header>
        This is my website!
      </header>

      <main>
        {this.props.children}
      </main>

      <footer>
        Your copyright message
      </footer>
    </div>
  );
}

Étape 4 Utilisez Lien pour la navigation

N'importe où dans la valeur de retour JSX de votre fonction de rendu de composant, utilisez le composant Link:

import { Link } from 'react-router';
(...)
<Link to="/some/where">Click me</Link>
45
nbkhope

C'est une question vaste et il y a plusieurs façons d'y parvenir. D'après mon expérience, de nombreuses applications à page unique ont un fichier de point d'entrée tel que index.js. Ce fichier serait responsable du "démarrage" de l'application et sera votre point d'entrée pour WebPack.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Application from './components/Application';

const root = document.getElementById('someElementIdHere');

ReactDOM.render(
  <Application />,
  root,
);

Votre <Application /> composant contiendrait les prochaines pièces de votre application. Vous avez déclaré vouloir des pages différentes, ce qui m'amène à penser que vous utilisez une sorte de routage. Cela pourrait être inclus dans ce composant avec toutes les bibliothèques qui doivent être appelées au démarrage de l'application. react-router, redux, redux-saga, react-devtools venir à l'esprit. De cette façon, vous n'aurez besoin d'ajouter qu'un seul point d'entrée dans la configuration de votre pack Web.

Lorsque vous avez configuré un routeur, vous avez la possibilité de définir un composant sur un itinéraire spécifique. Si vous aviez une URL de /about, vous devez créer la route dans le package de routage que vous utilisez et créer un composant de About.js avec toutes les informations dont vous avez besoin.

8
Taylor Jones

Pour les applications Web, je vous recommande de lire ces deux exemples:

Résumé de la mise en oeuvre:

1 - Ajouter react-router-dom:

Fils 

yarn add react-router-dom

ou [~ # ~] npm [~ # ~] 

npm install react-router-dom

2 - Mettez à jour votre index.js fichier avec:

import { BrowserRouter } from 'react-router-dom';

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

3 - Créez un composant principal et appelez-y vos pages (vous devez également avoir des composants de pages déjà créés):

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Home from '../pages/Home';
import Signup from '../pages/Signup';

const Main = () => {
  return (
    <Switch>
      <Route exact path='/' component={Home}></Route>
      <Route exact path='/signup' component={Signup}></Route>
    </Switch>
  );
}

export default Main;

4 - Ajoutez le composant principal en App.js fichier:

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

5 - Ajoutez le lien vers vos pages quelque part

<Link to="/signup">
  <button variant="outlined">
    Sign up
  </button>
</Link>
5
Lucas Andrade