How to add comments in JSX

In this article i will be discussing what is JSX, JSX in React and how to add comments in JSX template. What is JSX: JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse. Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then …

Continue Reading

How to add class in react conditionally

During initial day of react coding, all of us must stuck with the question how to add class in react conditionally. One often requires to add class in react DOM element based on some condition. Adding cladd using conditional operator is an very easy way to add class in react conditionally like this.

  In above code, hide class will be added when this.state.showLoading value will be set to false.  

Continue Reading

Looping an Array In JSX – React JS

When you already have working experience on any of the tempting engines or framework which provide looping DOM functionality, you want it to be everywhere. As you already know, we have ng-repeat in Angular 1, *ngFor in Angular 2 etc, Likewise in React js which use JSX for templating, you can use the following method to Looping In JSX Array element.

  Output: Sahil Jake Jon Thruster Note: Looping In JSX might give you following error: Error : Each child in an array or iterator should have a unique “key” prop. You can clear above error by providing a unique …

Continue Reading

Things that every React Developer should know

I have started learning React JS around 6 months before and i love learning it day by day. React JS is a library which is used to build UI.In React JS is that, you build your application UI as a combination of Components. It provides code maintainability and high flexibility to design as whole UI consists of very small components.  Also React JS use virtual DOM to re-render components when any change happen in the Component and it’s blazing fast. In this article i have included concepts which i think React Developer should know. This post assumes that you are …

Continue Reading