Development Environment for React

jsx is compiled by bible into javascript functions

Three arguments: element, propsObject, children

function Greeting() {
  return React.createElement("div", {}, "hi world");
}

JSX Rules

  • Always return single element.
    • We can use the ‘React.Fragment’ of ‘<>..</>’ instead of nesting div into another div.
    • div / section/ article
  • use camelCase for html attributes.
    • use className instead of class.
  • Close every element
  • formatting

use of jsx in javascript

import React from "react";
import ReactDom from "react-dom";
import "./index.css";

const info = "This is additional info outside of function componenet";

const Person = () => {
  const btn = "Big Search Button";
  const ahmad = "Ahmed Hassan";
  const lastName = "Khan Kakar";
  const ali = "Ali Hassan";

  return (
    <section>
      <h1>{ahmad + " " + lastName}</h1>
      <h2>{`${ali} ${lastName}`}</h2>
      <p>{info}</p>
      <button className="btn">{btn}</button>
    </section>
  );
};

ReactDom.render(<Person></Person>, document.getElementById("root"));
Previous
Next