The useState hook is probably the most popular and frequently used hook in React. There were a few questions I had about it. If a component had multiple useState hooks and an event handler did multiple state updates, will the component render multiple times? If a setState function did not change the state value, will the component be rendered again?
To answer these questions, I created a sample component.…
Most React frameworks like Antd do a good job of trapping keyboard focus within a modal. If there is a textbox and some buttons, tabbing from the textbox takes you to the button. Tabbing from the buttons takes you back to the textbox. The keyboard focus never goes to the controls in the background. This is what I mean by trapping keyboard focus within a Modal.…
In React apps, state should be immutable. For every state change in our component, we should create a new state object. Consider the following state object.
const [complexState, setComplexState] = useState({
data: [
{
id: 1,
message: "Hello",
read: false
},
{
id: 2,
message: "World",
read: false
}
]
});State object has a data property. This is an array of objects.…
This tutorial shows how to implement drag and drop using react-dnd. The official tutorial is a bit long. So, I created a simpler app to illustrate how to integrate react-dnd in your apps. There is a github repository for this tutorial.
There are two elements on which we write event handlers: the drag element and the drop element.…
There are lot of reasons to love React Hooks. But I have one reason that stands out from the rest.
Consider a class component that sets some state. This component has a controlled input within it.
class MyInput extends Component {
state = { text: '' };
render() {
<input type="text" value={text} onChange={..} /}
}With class components there are three ways to write onChange handler.…
Gatsby and NextJS are popular alternatives to create static websites using React. This tutorial shows how to work with NextJS. We want to take some pages written in markdown and convert them to static pages. Along the way, we will explore NextJS features.
The sample app is available in Netlify. It is a company website that offers development services.…
Gatsby and NextJS are popular alternatives to create static websites using React. This tutorial shows how to work with Gatsby: use CSS modules to style, add a new page, navigate between pages, create a custom layout, add a plugin, process markdown files, use GraphQL and create custom pages.
The sample app is available in Netlify. There is a Home page which has a background image and a link to Services page.…
Istanbul is a code coverage utility for JavaScript apps. It is integrated with most unit-testing frameworks like Jest. It is also possible to produce an instrumentation build with a babel plugin named babel-plugin-istanbul. This works for any React app scaffolded with Webpack configuration. However, it does not work for create-react-app (CRA). CRA does not expose webpack.config or .babelrc file, files where we can add the istanbul plugin.…
Istanbul provides code coverage metrics for automated unit tests. It provides those metrics by instrumenting the JavaScript code. Official documentation on the website provides how to integrate Istanbul with various unit testing frameworks.
But, let’s say we do not have unit tests. And we do manual testing. How much of code coverage does our testing do? For this problem, there is very little official support.…
Most people use community packages to do something as trivial as setting up a Menu on a sidebar. In my opinion, it takes more time to understand the API of a package than it takes to build the Menu from scratch. In this tutorial, I will show how you can build your own Menu using React router and SASS.
For scaffolding a React app, please feel to use create-react-app (CRA) or Parcel.…