You need Node >= 10.16 and npm >= 5.6. Creating a React with TypeScript project Rendering JSX Rendering JSX into the DOM: React elements are immutable Once you create an element, you can’t change its children or attributes. You would have to call render again to see changes. React DOM then compares the element and […]

React hooks are a new way to enhance your React Functional Components, for example to let them handle state or reference DOM elements. Before hooks were introduced the only way to achieve this was to use React Class Components. In this article we have a look at what React Hooks are and how to implement them.

Installing recoil Add RecoilRoot to your root component Atoms An atom is (a piece) of state that can shared between your components is what components can use to read from or write to will trigger a re-render for any component (that uses the atom) whenever the atom state changed You create atom shared state like […]

Let’s assume you have an array of data: What you want to end up with is this: In other words, you want to group 3 elements together by surrounding them with another element. The solution

When React tries to set state on a component that has been unmounted from the DOM you get that error: react_devtools_backend.js:2560 Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a […]

A functional component will refresh any time it receives new props, more precisely if its old and new props fail a referential identity check. Props must be treated as immutable. Just like function arguments, you should never modify props from within the functional component. Doing so will not trigger a refresh. Consider the following component: […]

We are going to have a look at how you can test your React Components and your Redux reducers and actions.