How add login page to a react create app?

Question

I'have made a prototype of a small app with react create app (not ejected).

The app for the moment only get connected users from a personal JAVA spring server with axios .

I want to add a login/home page to my app.

This is a mockup of my login/home page:

• 1.Make an API call and verify loginn and redirect to the app.

This is how the small app look like :

• 2.Change middle container content
• 3.Disconnect and go back to home/login page

But I having trouble to find a way to to correctly add a login/home page to my app.

• Maybe with react router, but how ? I mean, everything on the page change, how can I link this ?
• I saw some post talking about webpack and entry point ? But kind lost myself in the all the possibilities. And this force me to eject, something that I want to avoid.
• Create another app with create app for the homepage ? Not really cool, and how will I link them ?

---

So the router's way seems the be the good one. I should try to do a topbar component that change is content, style and link when connected or not.

Answer 1

Just use react-router . I believe this is pre-installed with create-react-app . Webpack entry point stuff is not relevant here.

Start with some tutorials IMO. There are great tutorials on egghead.io.

Anyway here is the react-router

Answer 2

for starting this is not a good idea to create another app just for login because you will create 2 environment for the same application. You just need to create a basic structure for your project.

Webpack has nothing to do with the application core of your app, his roles is only to compile and serve your files.

In first place the use of react-router to your project will be required for creating a nice and friendly routing system. Here is a little documentation for the basic react router container : https://reacttraining.com/react-router/web/guides/quick-start

So your app will work with a entry point managed by react router who will redirect the user to different component according to the route.

The login approach is quite simple to design like this :

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

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

But the complex part will be to managed the user sessions and disconnect part, I recommend the JWT system, it's pretty robust and simple to implement : https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/