Month: March 2022

 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

Example 1 above can be written in pure React.js without JSX as follows: The createElement function is the main function in the React top-level API. It’s 1 of a total of 8 things in that level that you need to learn. That’s how small the React API is. Much like the DOM itself having a document.createElement function to create… Continue reading What the flux is JSX?