TGIMBA .NET Core Upgrade – React JS Redux Login

Git  Code Commit (this and all commits back to my last blog post)

Today, I am adding a React JS Redux client and its The Globe In My BucketList Application (TGIMBA) login page.

If you remember from the Angular 6 Type Script Login page post (reference #1), I decided to have a separate solution for it because of the complexity around how the wwwroot is handled. I could have possibly combined the React JS client into the Vanilla and JQuery JavaScript solution, but I am weary of a lot of time spent experimenting on how to achieve it. My passion is code…not plumbing 🙂

To achieve this:

  • Create Visual Studio 2017 React JS Redux Application

1

  • Restore Nuget Packages, build and run to make sure the stock application works.

2

  • Add needed .csproj projects, add needed links to TgimbaNetCoreWebReactJs.csproj, build and run tests/web application

3

  • Add Login.js to component folder (markup and code)

7

Another very different thing for me was how to do styling via Cascading Style Sheets (CSS).  If you remember, I am not styling any of these pages until the are functionally done.  Then, I am hoping, I can create a mobile, desktop and perhaps other views with only CSS.  In the previous version of TGIMBA, I had a different code base for desktop and mobile.  Since desktop is so last century and who knows what is coming next, I am hoping to see how far I can create different User Interfaces (UI) from one set of views.

Anyways, I centered the login view in the Vanilla/JQuery and Angular 6 Type Script login pages and I wanted to do the same here.  Problem is (I am just starting with React JS Redux, so the light bulb will probably turn on after the next couple of pages) that most samples of CSS I have found are embedded with React JS’s render method (one per file it seems).  It took a little bit, but I finally figured this out after reading a lot of posts.  I got it to work by defining a style and applying it this way (break point and highlighted markup definition above).

  • Add login route to App.js and make default

8

  • Remove navigation list in Layout.js

9

  • Server POST – Calling Redux Store – The ‘Redux’ part of this (as I understand it) is to provide a more uniform method of event handling and interacting with the server.  I came to this conclusion after reading a few posts and studying the stock application created by the Visual Studio 2017 Template.  For TGIMBA, this call is part of the markup/code combined file.

10

  • Server POST – Calling ASP .NET Controller – This is done in the Redux store Login.js. Reminiscent of the Java actionPerformed event handlers, it ‘seems’ like this is the correct place to put this type of code. If I find out differently, I will update. Remember, we all learn by doing…its much more fun than just reading a book 🙂 One thing I was not expecting was XMLHttpRequest. Yes, React JS is JavaScript. But I was expecting something like Angular 6 Type Script’s HttpClient class. Not bad, just not what I was expecting.  Reference #8 showed how to post and I used query string method like Angular 6 client,

11

One final thing I learned. In my JavaScript experience so far, processing has been purely event driven. For example, if someone types something into a textbox, processing occurs if something is tied to the keypress or button click event (usually). With React JS, it seems like it happens on every event.

More specifically, if you notice the method render(). At first, I didn’t pay much attention to this. However, no matter what I did, I could not pass the <input> value to my handler. If I set values on the state, that value was populated and would not change. If I set null, I could enter values, but the variable value in my handler was always null.

I thumped my head on the desk until I came across reference #6. Because (as I understand it) render is called every event, you have to reset the state on every event. This is done with the onChange event. Its a bit of a leap because I think of the onChange event as something you attach to if you need it. Here, it seems like its required.

12

To use:

  • Run

4

  • Login with bad username/password

5

  • Login with good username/password

6

Next, I will revive my Selenium project to lay down integration tests. I will add these in parallel with each page.

Stay tuned!

References

  1. https://erichelin.wordpress.com/2018/10/06/tgimba-net-core-upgrade-angular-5-replaced-with-angular-6-logined/
  2. https://stackoverflow.com/questions/45895913/correct-way-to-pass-arguments-to-reducer-in-reactredux
  3. http://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example
  4. https://www.pointblankdevelopment.com.au/blog/135/react-redux-with-aspnet-core-20-login-registration-tutorial-example
  5. https://www.thereformedprogrammer.net/using-a-redux-store-in-your-react-js-application/
  6. https://github.com/dsuryd/dotnetify-react-demo-vs2017
  7. https://stackoverflow.com/questions/48003218/typeerror-cannot-read-property-preparestyles-of-undefined-in-appbar
  8. https://reactjs.net/tutorials/aspnetcore.html
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s