web-dev-qa-db-ja.com

反応を使用して複数ページのアプリを作成する方法

反応jsを使用して単一ページのWebアプリを作成しました。 webpackを使用して、すべてのコンポーネントのバンドルを作成しました。しかし、今は他の多くのページを作成したいと思います。ほとんどのページは、API呼び出しに関連しています。つまり、index.htmlで、APIのコンテンツを表示しました。 APIからのデータを解析する別のページにコンテンツを挿入したい。 Webpackはbundle.jsであるファイル内の反応のすべてを圧縮します。ただし、webpackの構成は次のとおりです。

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;

今、私は他のページにどのような種類のwebpackが設定されるのか、またはreact.jsを使用して複数ページのアプリを構築する正しい方法は混乱しています

javascriptjqueryreactjswebpack
25
StreetCoder

（npmを使用してreact-routerをインストールしてください！）

反応ルーターを使用するには、次の手順を実行します。

  1. Route、IndexRouteコンポーネントを使用してroutesで定義されたファイルを作成する

  2. Router（with 'r'！）コンポーネントをアプリのトップレベルコンポーネントとして挿入し、routesファイルで定義されたルートと履歴のタイプ（hashHistory、browserHistory）を渡します

  3. {this.props.children}を追加して、新しいページがそこに表示されるようにします
  4. Linkコンポーネントを使用してページを変更します

ステップ1routes.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>
);

ステップ2エントリポイント（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')
);

ステップアプリコンポーネント（props.children）

Appコンポーネントのレンダリングで、{this.props.children}を追加します。

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

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

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

ステップ4ナビゲーションにリンクを使用

コンポーネントレンダリング関数の戻りJSX値のどこでも、Linkコンポーネントを使用します。

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

これは広範な質問であり、これを達成する方法は複数あります。私の経験では、index.jsなどのエントリポイントファイルを持つ多くのシングルページアプリケーションを見てきました。このファイルは、アプリケーションの「ブートストラップ」を担当し、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,
);

<Application />コンポーネントには、アプリの次の部分が含まれます。別のページが必要だと言ったので、何らかのルーティングを使用していると思わせます。これは、アプリケーションの起動時に呼び出す必要があるライブラリとともに、このコンポーネントに含めることができます。 react-router、redux、redux-saga、react-devtoolsが思い浮かびます。このように、Webpack構成に1つのエントリポイントを追加するだけで、すべてがある意味でトリクルダウンします。

ルーターをセットアップしたら、コンポーネントを特定の一致したルートに設定するオプションがあります。 /aboutのURLがある場合、使用しているルーティングパッケージにルートを作成し、必要な情報を使用してAbout.jsのコンポーネントを作成する必要があります。

8
Taylor Jones

Webアプリの場合、次の2つの例を読むことをお勧めします。

実装の再開：

1-react-router-domを追加：

糸

yarn add react-router-dom

またはNPM

npm install react-router-dom

2-index.jsファイルを次のように更新します：

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

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

3-メインコンポーネントを作成し、そこにページを呼び出します（ページコンポーネントも既に作成されている必要があります）。

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-App.jsファイルにメインコンポーネントを追加します。

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

5-リンクをページのどこかに追加します

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