Skip to main content

JSX = XMLised Javascript


JSX stands for Javascript XML. React works without using JSX but it is advised to use it to write more elegant code. Let us find out what JSX is and the pros of using it:

What is JSX?

JSX is syntactic sugar to React.createElement(component, props, ...children) function. In short it basically allows you to write HTML in react code.

Why JSX?

React embraces the fact that rendering logic is inherently coupled with other UI logic like handling events, how data is prepared for display e.t.c.. so instead of separating markup and logic into different files. It is easier to have it along side your ReactJS code. Also, it's type-safe which helps you to catch most of the errors during compilation.

JSX and it's React code:

JSX
const element = (
    <h1 className="greeting">
    Hello, React!
    </h1>
);

Above JSX will get compiled to the following code without JSX:
var element = React.createElement(
  "h1",
  {
    className: "greeting"
  },
  "Hello, React!"
);

*Babel is the javascript compiler used to convert the above JSX code to React.createElement code.

→ As seen above, after compilation JSX expressions become regular javascript function calls which will then be evaluated to javascript objects in the browser so similar to the functions JSX can be assigned to variables, accepted as arguments, used inside control statements and return it from functions.
→ JSX syntax is similar to XML. JSX tags contain tag name, attributes and children. Attribute values can be a string between '  ' or javascript expressions wrapped in curly braces {} can be used.

Rules:

  1. One top level element must wrap the HTML code if not exceptions like "Adjacent JSX elements must be wrapped in an enclosing tag" will occur.
  2. JSX considers components with small letters a html tags(h1, p, div...) and tries to render them directly instead of creating a React object using React.createElement() so user components must be declared with capital letters and used when needed.
One more example with children components:
JSX
function hello() {
  return 
  <div>
    <ul className="numbers">
      <li>one</li>
      <li>two</li>
    </ul>
    <h1>Hello</h1>
  </div>;
}
Without JSX
function hello() {
  return;
  React.createElement(
    "div",
    null,
    React.createElement(
      "ul",
      {
        className: "numbers"
      },
      React.createElement("li", null, "one"),
      React.createElement("li", null, "two")
    ),
    React.createElement("h1", null, "Hello")
  );
}
Labels:

Comments

Post a Comment

Popular posts from this blog

Spring Boot - RestTemplate PATCH request fix

  In Spring Boot, you make a simple http request as below: 1. Define RestTemplate bean @Bean public RestTemplate restTemplate () { return new RestTemplate (); } 2. Autowire RestTemplate wherever you need to make Http calls @Autowire private RestTemplate restTemplate ; 3. Use auto-wired RestTemplate to make the Http call restTemplate . exchange ( "http://localhost:8080/users" , HttpMethod . POST , httpEntity , String . class ); Above setup works fine for all Http calls except PATCH. The following exception occurs if you try to make a PATCH request as above Exception: I / O error on PATCH request for \ "http://localhost:8080/users\" : Invalid HTTP method: PATCH ; nested exception is java . net . ProtocolException : Invalid HTTP method: PATCH Cause: Above exception happens because of the HttpURLConnection used by default in Spring Boot RestTemplate which is provided by the standard JDK HTTP library. More on this at this  bug Fix: This can b...
Post a Comment
Read more

RADUS#4 - Caching the response in REST API's

  Caching in spring boot app: Caching can be used to provide a performance boost to your application users by avoiding the business logic processing involved again and again, load on your DB, requests to external systems if the users request data that's not changed frequently Different types of caching: We'll be focusing more on in-memory caching in this post i listed other options available to have an idea. In-memory caching You'll have a key-value data stores that stores the response of the request after it is served for the first time There are multiple systems like Redis, Memcached that do this distributed caching very well By default Spring provides concurrent hashmap as default cache, but you can override CacheManager to register external cache providers. Database caching Web server caching Dependencies needed: Maven < dependency > < groupId > org . springframework . boot </ groupId > < artifactId > spring - boot - starter - cache ...
Post a Comment
Read more

Set BIND VARIABLE and EXECUTE QUERY programmatically in ADF

A very common scenario in ADF is to set a bind variable and execute query programmatically within AMImpl/ VOImpl classes. Here's a simple way to do this: To set bind variable for all rowsets:       ViewObjectImpl someVO = this.getSomeViewObject();       VariableValueManager vMngr = someVO.ensureVariableManager();        vMngr.setVariableValue("DefinedBindVariable",value);        someVO,executeQuery(); To set bind variable for default rowset:          ViewObjectImpl someVO = this.getSomeViewObject();          someVO.setNamedWhereClauseParam("DefinedBindVariable",value);          someVO,executeQuery();
2 comments
Read more