Skip to main content

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 = (): JSX.Element => {
return <Child />
}

const Child = (): 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 = (): JSX.Element => {
return (
<ErrorBoundary fallback={<p>An error occured!</p>}>
<Child />
</ErrorBoundary>
)
}

const Child = (): 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 tutorial.