React
Recommendation
Updated
Moved
USE
2021-09-28
What is it
React is a JavaScript library for building user interfaces.
When to use it
Use React when building web applications.
How to use it
Use Vite for development server and as build tool when using React.
Form validation
Use Vest to validate user input—it plays nicely with Einride UI.
Error handling and logging
When handling errors, prefer using error boundaries over managing custom error state.
Instead of doing something like this:
const Parent = (): React.JSX.Element => {
return <Child />
}
const Child = (): React.JSX.Element => {
const [hasError, setHasError] = useState(false)
// logic that sets `hasError` to `true` if an error occurs
return (
<>
<p>...</p>
{hasError ? <p>An error occured!</p> : <p>...</p>}
</>
)
}
Prefer doing this:
const Parent = (): React.JSX.Element => {
return (
<ErrorBoundary fallback={<p>An error occured!</p>}>
<Child />
</ErrorBoundary>
)
}
const Child = (): React.JSX.Element => {
// logic that throws errors that occur
return (
<>
<p>...</p>
<p>...</p>
</>
)
}
Using error boundaries enables declaring what you'd like to display when no errors occur in
<Child>
and provide a fallback in <Parent>
, instead of maintaining custom error state that might
include logic bugs.
Use Sentry for error alerting and logging.
How to learn it
Installation and setup instructions can be found in the official React documentation.