Author: Anik Babu

In this guide, I’m going to show how to setup and use moment.js in React. Let’s get started: Table of Contents Installation Examples Installation We can use only moment package but I I’ll suggest you to use react-moment too. It comes with handy JSX tags which reduce a lot of work. Optional: You can also install moment-timezone package. It is required to use the timezone… Continue reading How to Install & Use Moment.js in React

We can select all content of an input field or textarea in many ways. I’m going to share three ways here. I’ll use e.target.select() method. Let’s start: The onClick handler allows us to call a function and perform an action when an element is clicked. The onfocus event occurs when an element gets focus. Have a look… Continue reading How to Select all Text of Textarea in React

 sometimes we need to remove all spaces from string. In this artcle, we’re going to remove all spaces from string in React.

To disable autocomplete for a specific input field, we need to set autoComplete attribute to off. Example: To disable autocomplete for an entire form, we need to set autoComplete attribute with off value in the form like this:

Now that we know about the state of a component and how when that state changes some magic happens, let’s learn the last few concepts about that process. A component might need to re-render when its state gets updated or when its parent decides to change the props that it passed to the component If… Continue reading Every React component has a story

React gets its name from the fact that it reacts to state changes (although not reactively, but on a schedule). There was a joke that React should have been named Schedule! However, what we witness with the naked eye when the state of any component gets updated is that React reacts to that update and automatically reflects the… Continue reading React will react

The following is also only applicable to class components. Did I mention that some people call presentational-only components dumb? The state property is a special one in any React class component. React monitors every component state for changes. But for React to do so efficiently, we have to change the state field through another React API thing that… Continue reading React components can have a private state

When handling events inside React elements, there are two very important differences from the way we do so with the DOM API: All React elements attributes (events included) are named using camelCase, rather than lowercase. It’s onClick, not onclick. We pass an actual JavaScript function reference as the event handler, rather than a string. It’s onClick={handleClick}, not onClick=”handleClick”. React wraps the… Continue reading Events in React: Two Important Differences

Simple function components are great for simple needs, but sometimes we need more. React supports creating components through the JavaScript class syntax as well. Here’s the Button component (in Example 1) written with the class syntax: The class syntax is simple. Define a class that extends React.Component (another top-level React API thing that you need to learn). The class defines a… Continue reading You can write React components with JavaScript classes

Inside a JSX section, you can use any JavaScript expression within a pair of curly braces. Any JavaScript expression can go inside those curly braces. This is equivalent to the ${} interpolation syntax in JavaScript template literals. This is the only constraint inside JSX: only expressions. So, for example, you can’t use a regular if statement, but a ternary expression… Continue reading You can use JavaScript expressions anywhere in JSX