React Devtools come in quite handy. They are available for Chrome, Edge and Firefox. Chrome is:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Clean Code Blog – www.harder-it-consulting.de
Clean Code – Tipps, Tricks for Fullstack React / Java / JavaScript / HTML 5 and more…
React Devtools come in quite handy. They are available for Chrome, Edge and Firefox. Chrome is:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
The HTML is rerendered after click and displays the chosen content.
We use a stateful variable.
The stateful variable (here, a boolean) is called ‚condition‘ 😉 :
const [condition, setCondition] = useState(false);
The #useEffect method to react on variable state change:
useEffect(() => { ... },[condition]);
The methods for the buttons:
const handleClickSomething01 = () => setCondition(true); const handleClickSomething02 = () => setCondition(false);
The returned HTML:
if (condition === true) { return ( <div> <Button variant="contained" color="primary" onClick={handleClickSomething02}> Primary </Button> <Button variant="contained" color="secondary" onClick={handleClickSomething01}> Secondary </Button>CONDITION fullfilled </div> ); } else { return ( <div> <Button variant="contained" color="primary" onClick={handleClickSomething02}> Primary </Button> <Button variant="contained" color="secondary" onClick={handleClickSomething01}> Secondary </Button>CONDITION not fulfilled </div> ); }
You will notice that this example uses duplicated code (sort of, a few details differ).
Why did I do this?
I have debugged so many unmaintainable Frontends during the last two decades and nearly always the obstacles where too many detailed conditions in the HTML.
Instead, by using IF/ELSE and clearly depict the HTML without conditional renderings within, the Code will be easier to maintain in the long run.
Of course, this is my personal experience and also a matter of Clean Code paradigms.
In some cases, am using inline conditions, inside the HTML lines, too. But as we Architects like to say: IT DEPENDS 😉
For this example I use React Hooks and a Component with a stateful variable.
When the variable is changed, the CSS class is changed accordingly.
The part in the component is automatically re-rendered on the fly.
//The variable is called 'active'.
//This is an example. Choose any name.
const [active, setActive] = useState(0);
We use the constant #getStyle to return a CSS class name based on the variable.
const getStyle = (input) => {
if (input === active){
// This example is freely chosen.
//button-active is the CSS class' name
return "button-active";
} else {
return "button-inactive";
}
};
The return statement returns rendered HTML.
//The hard coded value 0 can be any dynamic
//variable from JS or React, like one from the
//props (Properties) object
return (
<div className={getStyle(0)}>
</div>
);
Imagine you want to re-render a Component when a variable changes its state.
Your Component:
function MyComponent(props) {
Your variable, a name:
const [name, setName] = useState("OLD NAME");
A #useEffect method to react to changes of that specific variable:
useEffect(()=>{ alert('new name!');//a small alert to show you the effect immediately setName('NEW NAME'); }, [name]);
…and a return with that name being rendered:
return ( <div className={"someFancyCssClass"}>{name}</div> );
Note that, in this example, the initial OLD NAME is immediately replaced.
Reason for it: we set the name during initialization in the const.
import _ from "lodash";
User lodash to check if a variable is set and can be rendered (_.isEmpty).
If myVar is set, render it:
return ( <div> {!_.isEmpty(myVar) && <h1>Some Text + {myVar}</h1>} </div> );
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
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