javascript - proyecto - Cómo crear una aplicación de múltiples páginas usando reaccionar

crear componente angular 6

Question

He creado una aplicación web de una sola página usando react js. He utilizado webpack para crear el paquete de todos los componentes. Pero ahora quiero crear muchas otras páginas. La mayoría de las páginas están relacionadas con la llamada API. es decir, en el index.html , he mostrado contenido de API . Quiero insertar contenido en otra página analizando datos de API. Webpack comprime todo lo de reaccionar en un archivo que es bundle.js . Sin embargo, la configuración de webpack es la siguiente:

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;

Ahora, estoy confundido sobre qué tipo de configuración de webpack será para otra página o cuál es la forma correcta de crear una aplicación de varias páginas utilizando react.js

Answer 1

(¡Asegúrate de instalar react-router usando npm!)

Para utilizar react-router, haga lo siguiente:

1. Cree un archivo con rutas definidas usando los componentes Route, IndexRoute

2. Inyecte el componente Router (con ''r''!) Como el componente de nivel superior para su aplicación, pasando las rutas definidas en el archivo de rutas y un tipo de historial (hashHistory, browserHistory)

3. Agregue {this.props.children} para asegurarse de que las nuevas páginas se representarán allí
4. Usa el componente Link para cambiar páginas

Paso 1 rutas.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>
);

Paso 2 punto de entrada (donde haces tu inyección 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'')
);

Paso 3 El componente de la aplicación (props.children)

En el render para su componente de aplicación, agregue {this.props.children}:

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

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

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

Paso 4 Usa el enlace para la navegación

En cualquier lugar del valor de retorno de JSX de la función de procesamiento de componentes, use el componente Enlace:

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

Answer 2

Esta es una pregunta amplia y hay muchas maneras de lograrlo. En mi experiencia, he visto muchas aplicaciones de una sola página que tienen un archivo de punto de entrada como index.js . Este archivo sería responsable de ''arrancar'' la aplicación y será su punto de entrada para el paquete web.

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,
);

Su componente <Application /> contendría las siguientes piezas de su aplicación. Has declarado que quieres páginas diferentes y eso me hace creer que estás usando algún tipo de enrutamiento. Eso podría incluirse en este componente junto con cualquier biblioteca que deba invocarse al iniciar la aplicación. react-router , redux , redux-saga , react-devtools vienen a la mente. De esta manera, solo tendrá que agregar un único punto de entrada a la configuración de su paquete web y todo se filtrará en un sentido.

Cuando haya configurado un enrutador, tendrá opciones para configurar un componente para una ruta coincidente específica. Si tenía una URL de /about , debe crear la ruta en cualquier paquete de enrutamiento que esté utilizando y crear un componente de About.js con la información que necesite.