NOTICE: The TGIMBA git hub repository has been corrupted and I had to start over. The link to the repository is here -> Git Code Commit
Today, I am adding a React JS Redux client and its The Globe In My BucketList Application (TGIMBA) login page.
To achieve this:
- Create Visual Studio 2017 React JS Redux Application
- Restore Nuget Packages, build and run to make sure the stock application works.
- Add needed .csproj projects, add needed links to TgimbaNetCoreWebReactJs.csproj, build and run tests/web application
- Add Login.js to component folder (markup and code)
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
- Remove navigation list in Layout.js
- 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.
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.
- Login with bad username/password
- Login with good username/password
Next, I will revive my Selenium project to lay down integration tests. I will add these in parallel with each page.