React – Howto redirect to other component

Sometimes, for example on a login, you want to redirect the User to another page in your application.

We assume that your Application has the default address of http://localhost:3000.

In this example, the application has the path localhost:3000 and you can navigate to the news with /news.

import {Redirect} from "react-router-dom";
//... your program code goes here...

return(
   <Redirect to='news'/>
);

The return statement will redirect to localhost:3000/news

How to debug a React Application in Webstorm

In Webstorm, start your application. I prefer the command line:
$ npm start

Then create a new JavaScript debug configuration:

Run – Edit configurations … add JavaScript Debug.

Choose your project path (because we are Harder IT Consulting, our nickname is HIT – C:\HIT\<application>)

Paste the URL http://localhost:3000 (or the URL you have configured your React Application to run on, 3000 is the default).

In the Terminal, type $npm start
When the application is started, start the Debugging:

Press the DEBUG button at the top right corner with your Debug configuration selected.

Do not forget the React Devtools which come in quite handy. They exist for Chrome, Firefox and Edge. Chrome is https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Hook Lifecycle – control WHEN functions are executed

By defining the dependencies in your #useEffect method, you can control the execution of methods and the rendering.

Execute only once when component is first rendered
By passing an empty array for a #useEffect method, you guarantee that the method is only executed once:

useEffect(() => {
     //do something....
}, [])

Now it behaves like #componentDidMount in the old React class architecture.

Execute after every render cycle
If no array is passed to #useEffect, the method will be executed AFTER EVERY render cycle:

useEffect(() => {
     //do something...
})//no array here

Execute only if some value has changed
If #useEffect shall only be executed when a certain variable has changed, do:

useEffect(() => {
     //do something...
   ...myValue...
}, [myValue])//myValue defined in the array

Helper functions in JavaScript / JS – use lodash

For instance in my JS Applications I do often need some helper functions, like I know them from Java, like #equals etc..

lodash provide an elegant suite of helper tools.
For instance in my React App, I do

import _ from "lodash";

And I can use their functions, like in this example:

if (_.isEmpty(this.myFooAttribute)) {...

Of course you need lodash as a dependency.
In your package.json do:

 "dependencies": {
     ...
    //version is an example. I always try to use the latest.
    "lodash": "^4.17.15", 

How to test Websites with Java

A very good way of testing a website is Selenium: http://seleniumhq.org/
The Groovy driven alternative is Tellurium which provides an easier entry but is not as good as Selenium for more complex Use Cases: http://code.google.com/p/aost/

Code driven (JUnit-like):

  • Java Tests for Selenium
  • Selenium will start to interact with your WebBrowser, as guided by the Tests.
  • Bears strong resemblance to normal UNIT Tests

Browser-driven:

  • Create a Selenium Test Suite by recording your clicks and website navigation in your browser.
  • Replay in your browser