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
React won’t allow you to return more than one element in the return statement.
Solution is to wrap it.
You can use an empty element.
This is called a fragment:
function App() {
return (
<> //...the empty element
<MyComponent />
<input type="my text">
<button>My Button</button>
</>
)
}
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