JSX in react

JSX stands for JavaScript Syntax Extension or JavaScript XML. With JSX, you can write html inside JavaScript code.

const Comp = () => {
   return (
     <div>
       <p>This is a normal html inside JS</p>
     </div>
   ); 
}
There are certain rules that you need to follow when writing JSX
  • Elements must be wrapped inside parent div or fragment
  • Attributes of elements need to be adjusted e.g. instead of class, we need to use className. Instead of max-width, we need to write maxWidth....
  • JavaScript expressions can be written inside JSX using curly brackets
  • if..else can not be used but conditional operator is allowed
Here is another example based on JSX.

export default function Main() {
    const cities = ["Brisbane", "Mumbai"];
  
    return (
      <div>
        {cities.map((city, key) => (
          <div key={key}>
            City - {city}
            {city === "Mumbai" && <span> is an Asian City</span>}
          </div>
        ))}
      </div>
    );
  }
  
Complex problems, Simple Solutions