反応作成アプリケーションにログインページを追加するにはどうすればいいですか？

Question

react create app（イジェクトされていない）の小さなアプリのプロトタイプを作った。

今のところ、アプリケーションは、axiosの個人用JAVAスプリングサーバーからしか接続していません。

私のアプリにログイン/ホームページを追加したいと思います。

これは私のログイン/ホームページのモックアップです：API呼び出し1.Make

• とloginnを確認し、アプリにリダイレクトします。

これは小さなアプリはどのように見えるかです：

中央のコンテナのコンテンツ3.Disconnect

• 2.Changeとバックホーム/ログインページへ

を行きますしかし、正しく私のアプリにログイン/ホームページを追加する方法を見つけるのが難しい。

• おそらく反応ルータがありますか？つまり、ページ上のすべてが変更され、どのようにリンクすることができますか？
• ウェブパックとエントリーポイントに関するいくつかの記事を見ましたか？しかし、優しさはすべての可能性に自分自身を失った。そして、これは私に、私が避けたいものを取り出すことを強いる。
• ホームページの作成アプリで別のアプリを作成しますか？本当にクールではありません。どうすればリンクできますか？

---

ので、ルータの方法が良いものもいるようです。私は、コンテンツ、スタイル、リンクが接続されているかどうかを変更するトップバーコンポーネントを実行しようとする必要があります。

Answer 1

react-routerをそのまま使用してください。私はこれがcreate-react-appであらかじめインストールされていると信じています。 Webpackエントリーポイントのものはここでは関係ありません。

いくつかのチュートリアルIMOから始めます。 egghead.ioには素晴らしいチュートリアルがあります。とにかくここ

は、これを起動するためreact-router

Answer 2

であるあなたは、同じアプリケーションのための2の環境を作成するためだけのログインのために別のアプリケーションを作成するのは良いアイデアではありません。プロジェクトの基本構造を作成するだけです。

Webpackは、アプリケーションのアプリケーションコアとは関係がありません。彼の役割は、ファイルをコンパイルして提供することだけです。

最初は、きれいでフレンドリーなルーティングシステムを作成するために、プロジェクトに反応ルータを使用する必要があります。 https://reacttraining.com/react-router/web/guides/quick-start したがって、ルートに応じて異なるコンポーネントにユーザーをリダイレクトする反応ルータによって管理されるエントリポイントでアプリケーションが機能します。

ログインアプローチは、このように設計することが非常に簡単です：

submit: function(e){ 
    e.preventDefault(); 
    alert('it works!'); 
    } 

    render: function() { 
    return (
     <form onSubmit={this.submit}> 
     <button>Click me</button> 
     </form> 
    ); 
    } 

しかし、複雑な部分は、管理ユーザーセッションと切断部分になります、私はJWTシステムをお勧めします、それが実現するのは非常に堅牢かつ簡単です：https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/